¸ð¹ÙÀÏ Å©·Ò¿¡¼ ´ÜÃà ¾ÆÀÌÄÜ »ý¼º - WebApp ¸¸µé±â?
Chrome 31 ¹öÀüºÎÅÍ À¥¾ÛÀ» ¸¸µé ¼ö ÀÖ´Â ShortcutÀ» Á¦°øÇÏ°í ÀÖ¾ú´Ù°í ÇÕ´Ï´Ù.
±×°£ À¥ÀÇ ¼º´ÉÀÌ ¸¹ÀÌ ÁÁ¾ÆÁö¸é¼ ¸¹Àº º¯È°¡ ÀÖ¾ú°í, Å©·Ò ºê¶ó¿ìÀú¸¦ ÅëÇÑ À¥¾Û»ý¼ºÀÌ °¡´ÉÇÏ´Ù°í ÇÕ´Ï´Ù.
Áö³ÁÖ Google Developers Summit¿¡ Âü¿©ÇÏ¿© Introduction to Progressive Web App (Robert Nyman, Google)ÀÇ ÁÖÁ¦¸¦ µè°í³ª¼ ¾Ë°ÔµÇ¾ú½À´Ï´Ù.
Å©·Ò °³¹ß¹®¼¿¡´Â Add to Homescreen ¹®¼°¡ Á¦°øÁßÀÔ´Ï´Ù.
¿À´ÃÀº Add to HomescreenÀ» Àû¿ëÇÏ´Â ¹æ¹ýÀ» °£´ÜÇÏ°Ô »ìÆ캸°Ú½À´Ï´Ù.
ÇöÀç´Â ¾Èµå·ÎÀÌµå ¿ë Å©·Ò ºê¶ó¿ìÀú¿¡¼¸¸ Áö¿øÇÏ°í ÀÖ½À´Ï´Ù.
Ȩ½ºÅ©¸° ¾Û ¸¸µé±â
Chrome 31ºÎÅÍ Áö¿øÇÏ¿´Áö¸¸ 39¹öÀü ºÎÅÍ´Â JSON-based manifest ÆÄÀÏÀ» »ý¼ºÇÏ¿© °£´ÜÇÏ°Ô À¥¾ÛÀ» »ý¼ºÇÒ ¼ö ÀÖ´Ù°í ÇÕ´Ï´Ù.
Å©·Ò ºê¶ó¿ìÀú¿¡ ´ÜÃà ¾ÆÀÌÄÜ »ý¼ºÀ» ÇÏ°Ô µÇ¸é ¸¶Ä¡ ³×ÀÌƼºê¾Û°ú µ¿ÀÏÇÏ°Ô µ¿ÀÛÇÏ°Ô µË´Ï´Ù.
Robert NymanÀÌ ¼Ò°³ÇÑ ÆäÀÌÁö¸¦ ¾Èµå·ÎÀ̵å Å©·Ò¿¡¼ Á¢¼ÓÇÏ½Ã¸é ´ÜÃà ¾ÆÀÌÄÜ »ý¼º À¯µµ°¡ µË´Ï´Ù.(39¹öÀü ÀÌ»ó)
´ÜÃà ¾ÆÀÌÄÜÀ» »ý¼ºÇÏ°Ô µÇ¸é FlipkartÀÌ ³×ÀÌƼºê¾Û ó·³ µ¿ÀÛÇÏ°Ô µË´Ï´Ù.
´ÜÃà ¾ÆÀÌÄÜÀ» Áö¿øÇϱâ
³×ÀÌƼºê ¾Ûó·³ µ¿ÀÛÇÏ´Â ´ÜÃà ¾ÆÀÌÄÜÀ» ¸¸µé±â À§Çؼ´Â ¸î°¡Áö meta tag¿Í json °ü·ÃµÈ ºÎºÐÀ» Ãß°¡ÇØÁÖ¸é µË´Ï´Ù.
¸ÞÀÎ ÆäÀÌÁö¿¡ ´ÙÀ½À» Ãß°¡ÇØÁÝ´Ï´Ù.(Àú´Â github ºí·Î±×¿¡ Ãß°¡ÇÒÅĵ¥ index.htmlÀÌ µË´Ï´Ù.)
<link rel="manifest" href="manifest.json">
ÀÌÁ¦ jsonÀ» »ý¼ºÇØÁÖ°Ô µË´Ï´Ù.
json¿¡´Â ȸéÀÇ È¸Àü »óŸ¦ °Á¦·Î ÁöÁ¤ÇÒ ¼ö ÀÖ°í, ´ÜÃà¾ÆÀÌÄÜÀ¸·Î »ç¿ëÇÒ À̹ÌÁöÀÇ ´ÜÃà ¾ÆÀÌÄÜÀ» Á¤ÀÇÇÒ ¼ö ÀÖ½À´Ï´Ù.
{
"name": "Web Application Manifest Sample",
"icons": [
{
"src": "launcher-icon-0-75x.png",
"sizes": "36x36",
"type": "image/png",
"density": 0.75
},
{
"src": "launcher-icon-1x.png",
"sizes": "48x48",
"type": "image/png",
"density": 1.0
},
{
"src": "launcher-icon-1-5x.png",
"sizes": "72x72",
"type": "image/png",
"density": 1.5
},
{
"src": "launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png",
"density": 2.0
},
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png",
"density": 3.0
},
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png",
"density": 4.0
}
],
"start_url": "index.html",
"display": "standalone",
"orientation": "landscape"
}
¸ðÁú¶ó °³¹ß ºÎºÐ¿¡ °¢ MembersÀÇ »ó¼¼ÇÑ ¼³¸íÀÌ ´Þ·ÁÀÖ½À´Ï´Ù.
background_color
À§¿¡´Â ¾øÁö¸¸ ¾ÛÀÌ ½ÇÇàµÉ¶§ º¸¿©Áú ¹é±×¶ó¿îµå »ö»óÀ» ÁöÁ¤ÇÒ ¼ö ÀÖ½À´Ï´Ù.
"background_color": "red"
display
ȸéÀÇ »óŸ¦ ÁöÁ¤ÇÒ ¼ö ÀÖ½À´Ï´Ù. ºê¶ó¿ìÀú ÇüÅ·Π¶ß°Ô ÇÒ°ÍÀÎÁö ÀüüȸéÀ» Àû¿ëÇÏ¿© ¾Ûó·³ ¶ß°Ô ÇÒ °ÍÀÎÁö ÁöÁ¤ÀÌ °¡´ÉÇÕ´Ï´Ù.
ÃÑ 4°³ÀÇ ¿É¼ÇÀ» Á¦°øÇÕ´Ï´Ù.
- fullscreen : ÀüüȸéÀ» »ç¿ëÇÏ°Ô µË´Ï´Ù.
- standalone : ÀÏ¹Ý ¾Ûó·³ µ¿ÀÛÇÏ°Ô µË´Ï´Ù.
- minimal-ui : ÃÖ¼ÒÇÑÀÇ WebUI¸¦ Æ÷ÇÔÇÕ´Ï´Ù.
- browser : ±×³É Å©·Ò À¥¿¡ Ç¥½ÃµÇ´Â°Í°ú µ¿ÀÏÇϸç ÀÌ °ªÀÌ ±âº»°ªÀÔ´Ï´Ù.
icons
±¸±Û¿¡¼ Á¦°øÇÏ´Â ¿¹Á¦¿¡´Â density°¡ Æ÷ÇԵǾî ÀÖÁö¸¸ mozilla¿¡¼ Á¦°øÇÏ´Â ¿¹Á¦¿¡´Â Æ÷ÇԵǾî ÀÖÁö ¾Ê½À´Ï´Ù. ¾ÆÀÌÄÜÀÌ ¶ßÁö ¾Ê¾Æ ÇØ´ç Äڵ带 Á¦°ÅÇß´õ´Ï ¾ÆÀÌÄÜÀÌ Á¤»óÀ¸·Î Ç¥½ÃµË´Ï´Ù.
- size : ¾ÆÀÌÄÜÀÇ »çÀÌÁ Á¤ÀÇÇÕ´Ï´Ù.(¸ðÁú¶ó ¿¹Á¦¿¡¼´Â ¸ÖƼ »çÀÌÁî ÁöÁ¤µµ °¡´ÉÇϳ׿ä)
- src : À̹ÌÁöÀÇ °æ·Î¸¦ Á¤ÀÇÇÕ´Ï´Ù.
- type : À̹ÌÁöÀÇ Å¸ÀÔÀ» ÁöÁ¤ÇÕ´Ï´Ù.
description
À¥¾Û¿¡ ´ëÇÑ ¼³¸íÀ» Á¤ÀÇÇÕ´Ï´Ù.
start_url
¾ÛÀÌ ½ÇÇàµÉ À§Ä¡ ÆäÀÌÁö¸¦ ÁöÁ¤ÇÕ´Ï´Ù.
"start_url": "index.html"
short_name
´ÜÃà ¾ÆÀÌÄÜÀ» »ý¼ºÇÒ À̸§À» ÁöÁ¤ÇÕ´Ï´Ù.
"short_name": "Shortcut name"
theme_color
¾ÛÀÌ ½ÇÇàµÉ¶§ Ç¥½ÃÇÒ ¾Û »ö»óÀ» ÁöÁ¤ÇÕ´Ï´Ù.
"theme_color": "black"
orientation
ȸé ȸÀüÀ» ÁöÁ¤ÇÒ ¼ö ÀÖ½À´Ï´Ù. °Á¦·Î °¡·Î/¼¼·Î¸¦ °íÁ¤ÇÒ¼öµµ ÀÖ°í, any ¸í·ÉÀ¸·Î ÀÚÀ¯·Ó°Ô µÑ ¼öµµ ÀÖ½À´Ï´Ù.
"orientation": "any"
Example
Á¦ Github ºí·Î±×¿¡ Àû¿ëÇغ» °á°ú¹°ÀÔ´Ï´Ù.
manifest.json¿¡ background_color °ËÁ¤»öÀ¸·Î Á¤ÀÇÇÏ¿´½À´Ï´Ù.