Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PWA+AMPの話

 PWA+AMPの話

Progressive Web AppsとAMPのさらっとした話をしました。

Yui Sakamoto

June 10, 2017
Tweet

More Decks by Yui Sakamoto

Other Decks in Programming

Transcript

  1. Progressive Web Apps
    +
    AMP
    = PWAMP (for PHPer)
    @yui_tang
    PHPΧϯϑΝϨϯε෱Ԭɹ
    2017.06.10

    View Slide

  2. • ࡔຊ ݁ҥ(@yui_tang)
    • Software Engineer
    • Mercari, inc.
    • ೖࣾ3೥໨
    • αʔόʔαΠυɺϑϩϯτΤϯυɺϓϩδΣΫτ
    Φʔφʔ౳ʑ
    • ༷ʑͳϓϩδΣΫτʹؔΘΓͳ͕Β΋ɺೖࣾҎདྷ
    WebΛ୲౰͍ͯ͠Δ
    About Me

    View Slide

  3. PHPΧϯϑΝϨϯε෱Ԭ2017
    ͰPHPʹ৮Εͳ͍࿩Λ͢Δ࿮

    View Slide

  4. ग़ͯ͘Δαϯϓϧίʔυ͸
    ຊ൪Ͱ͸࢖͑·ͤΜ

    View Slide

  5. Contents
    • ԿނWebʁ
    • AMPʢAccelerated Mobile Pagesʣͱ͸
    • PWAʢProgressive Web Appsʣͱ͸
    • PWA ʴ AMP
    • ૯ׅ

    View Slide

  6. ࠓ೔ͷΰʔϧ
    ͜ΕΒͷٕज़ʹ৮Εͨ͜ͱͷͳ͍
    ਓୡʹڵຯΛ࣋ͬͯ΋Β͑Δ

    View Slide

  7. ԿނΞϓϦͰ͸ͳ͘
    Webͷ࿩Λ͢Δͷʁ

    View Slide

  8. ԿނWebʁ

    View Slide

  9. ԿނWebʁ
    • ճઢ؀ڥͷѱ͍ࠃʑͰ͸ɺΞϓϦΛμ΢ϯϩʔ
    υ͢Δ͜ͱ΁ͷ఍߅ײ͕ະͩڧ͍
    • ࠃ಺Ͱ͸ʁ
    • ݄຤ʹ଎౓੍ݶֻ͕͔ΔϢʔβʔ
    • ి೾͕ແ͍ঢ়گͰɺͦΕΛײͣ͡ʹಈ͘Ξϓ
    Ϧ͹͔ΓͰ͸ແ͍

    View Slide

  10. Twitter lite͸PWA
    IUUQTCMPHUXJUUFSDPNP⒏DJBMKB@KQUPQJDTQSPEVDUUXJUUFSMJUF@IUNM

    View Slide

  11. Twitter lite
    • Android App 23MB+
    • iOS App 100MB+
    • PWA 0.6MB

    View Slide

  12. ԿނWebʁ
    • ΞϓϦ͕ྑ͍ / ѱ͍ͷ࿩Ͱ͸ͳ͍
    • Webϒϥ΢βͰදݱग़དྷΔ͜ͱ͕૿͍͑ͯΔ
    • Ϣʔβʔ͕બ΂Δબ୒ࢶ͕૿͑Δ
    • ݶΒΕͨϦιʔεͷதͰɺWebʹ஫ྗ͢Δ͜
    ͱͰେ͖ͳϝϦοτ͕͋ΔͳΒ͹Φεεϝ

    View Slide

  13. AMP
    Accelerated Mobile Pages

    View Slide

  14. About AMP
    • AMPͱ͸ʁ
    • Pros ⤴ / Cons ⤵
    • ࣮૷ํ๏
    • ରԠϒϥ΢β
    • ͲΜͳαΠτʹ༗ޮʁ

    View Slide

  15. About AMP
    • AMPͱ͸ʁ
    • Pros ⤴ / Cons ⤵
    • ࣮૷ํ๏
    • ରԠϒϥ΢β
    • ͲΜͳαΠτʹ༗ޮʁ
    • ϦονͰ஗͍ ✖ γϯϓϧͰૣ͍=>৽ఏҊ
    • htmlʹࣅֶ͍ͯͯशίετ͕௿͍
    • ؆୯ͳهड़ͰDLɾϨϯμϦϯά͕ૣ͍
    • ௨ৗͷhtmlͱൺ΂ͯग़དྷͳ͍͜ͱ͕͋Δ

    View Slide

  16. "DDFMFSBUFE.PCJMF1BHFT1SPKFDU".1
    IUUQTXXXBNQQSPKFDUPSH

    View Slide

  17. "DDFMFSBUFE.PCJMF1BHFT1SPKFDU".1
    IUUQTXXXBNQQSPKFDUPSH
    ".1$POG΁ߦ͖ͬͯ·ͨ͠".1$POG
    IUUQUFDINFSDBSJDPNFOUSZ

    View Slide

  18. AMPͱ͸ʁ
    • Google / Twitter͕த৺ͱͳͬͯ࢝·ͬͨOSS
    • ύϒϦογϟͱίϯςϯπϗϧμ͕͍Δ
    • ੍ݶͷ͋ΔHTML5Ͱ࣮૷͢Δ
    • PublisherଆͰΩϟογϡΛ͢Δ͜ͱͰߴ଎Խ
    • ϖʔδίϯςϯπ࣍ୈͰ͸Googleݕࡧͷ݁ՌͰԸܙΛड
    ͚ΒΕΔ

    View Slide

  19. AMPͱ͸ʁ
    • AMP͚ͩͲɺผʹMobileઐ༻Ͱ͸ͳ͍
    • Mobileઐ༻Ͱ͸ͳ͍͠ɺϨεϙϯγϒରԠ΋
    Մೳ

    View Slide

  20. AMP Pros / Cons

    View Slide

  21. AMP Pros / Cons
    • ࣮૷͕؆୯ ֮͑Δ͜ͱ͕গͳ͍
    • ग़དྷΔίτ͕υϯυϯ૿͍͑ͯΔ ⤴
    • αʔόʔαΠυݴޠͱ΋౰વ૊Έ߹ΘͤΒΕΔ
    • ౰વૣ͍
    • Googleݕࡧ݁ՌͰ΋༏۰͞ΕΔ৔߹΋

    View Slide

  22. AMP Pros / Cons
    • “ग़དྷແ͍ίτ” Λཧղ͢Δඞཁ͕͋Δ
    • طଘϖʔδͱͷ2ॏ؅ཧͷ৔߹ͷ؅ཧίετ
    • …͜ͷ͘Β͍͔ʁ

    View Slide

  23. AMP ࣮૷ํ๏

    View Slide

  24. AMP ࣮૷ํ๏ (minimum)




    scale=1,initial-scale=1">
    <br/>script><br/><style amp-boilerplate> <!— தུ —!></style></noscript><br/><link rel="canonical" href=“/"><br/><title>AMP Test</title><br/></head><br/><body><br/>Hello.<br/></body><br/></html><br/>

    View Slide

  25. AMP ࣮૷ํ๏
    • AMPʹඞཁͳίϯϙʔωϯτಡΈࠐΈ༻ͷJSҎ֎͸࢖༻
    ग़དྷͳ͍
    • JSͰ΍͍ͬͯͨίτΛAMPͰஔ͖׵͑ΒΕΔ͔ʁ
    • ֎෦CSS͸ಡΈࠐΉίτ͕ग़དྷͳ͍
    • λάͷstyleཁૉ or ಺ʹهड़<br/>• PHPͰ͸ɺtemplate಺ͰςΩετϑΝΠϧ͕ಡΈࠐ<br/>Ί·͢ΑͶ <br/>• ໿50KBͷ੍ݶ<br/>

    View Slide

  26. AMP ࣮૷ํ๏
    • ࢖༻ग़དྷͳ͍htmlλά΍୅ସͷAMPίϯϙʔ
    ωϯτ͕͋Δλά͕ଘࡏ
    • × frame
    • img -> amp-img
    • form -> amp-form
    • and more
    IUUQTXXXBNQQSPKFDUPSHEPDTSFGFSFODFDPNQPOFOUT

    View Slide

  27. AMP ࣮૷ํ๏
    • amp-form, amp-bindʹΑͬͯɺECαΠτ΋
    AMPԽ͕ग़དྷΔΑ͏ʹͳͬͨ!!
    • ߏ଄ԽσʔλΛ௥Ճ͢Δ ▶ Optional
    • URL຤ඌʹ “#development=1”
    • dev toolͷconsoleʹ݁Ռදࣔ
    IUUQTXXXBNQQSPKFDUPSHEPDTSFGFSFODFDPNQPOFOUT

    View Slide

  28. AMP ࣮૷ํ๏
    • AMP Start
    • AMP Official

    View Slide

  29. AMP ରԠϒϥ΢βɹ
    • ػೳΛ੍ݶͨ͠HTML5ͳ͚ͩ
    • Ϟμϯϒϥ΢βͳΒجຊతʹಈ͘
    • amp-○○ʹΑͬͯ͸ڍಈ͕ҧ͏৔߹΋͋Δ

    View Slide

  30. AMP ͲΜͳαΠτʹ༗ޮ
    • ϒϩά
    • χϡʔεαΠτ
    • ϨγϐαΠτ
    • E-Commerce
    • ؆୯ͳίʔϙϨʔταΠτ

    View Slide

  31. AMPʹ͍ͭͯ࠷ߴʹৄ͍͠هࣄ
    • “ελϯυΞϩϯAMPͷεεϝ”
    • http://tech.mercari.com/entry/
    recommending-standalone-amp

    View Slide

  32. PWA
    Progressive Web Apps

    View Slide

  33. About PWA
    • PWA Overview
    • Prosɹ/ɹCons
    • ࣮૷ํ๏
    • ֤छπʔϧ
    • ରԠϒϥ΢β

    View Slide

  34. https://developers.google.com/web/progressive-web-apps/

    View Slide

  35. PWA Overview
    • Reliable / Fast / Engage
    • ৴པੑ: ॠ࣌ʹϩʔυ͠ɺෆ࣮֬ͳωοτ
    ϫʔΫͰ΋404Λग़ͣ͞ʹϖʔδΛදࣔ
    • ଎͞: Ϣʔβʔͱͷ΍ΓͱΓʹਝ଎ʹରԠ
    • Τϯήʔδ: ΞϓϦͷΑ͏ͳମݧΛಧ͚Δ

    View Slide

  36. PWA Overview
    • WebϖʔδͰAppͷΑ͏ͳUXΛ࣮ݱ͢Δ
    • ϗʔϜը໘ʹΞΠίϯΛ௥ՃͰ͖Δ
    • Native AppͷΑ͏ͳfull screen UI
    • ϒϥ΢β΁ Push Notification
    • Service WorkerʹΑΔߴ଎Խ΍ΦϑϥΠϯΩϟογϡ

    View Slide

  37. PWA Pros / Cons

    View Slide

  38. PWA Pros / Cons
    • ஈ֊తʹಋೖग़དྷΔ
    • PWAͱ͸Ұͭͷ׬੒ܗ͚ͩΛࢦ͢༁Ͱ͸ແ͍
    • ࠓطʹಈ͍͍ͯΔΞϓϦέʔγϣϯͰ΋ঃʑʹ
    ରԠͰ͖Δ
    • HTTPSԽͷνϟϯε

    View Slide

  39. PWA Pros / Cons
    • ίϯςϯπͷCache Controll
    • SafariඇରԠ
    • େن໛αΠτʹ׬શରԠ͢Δʹ͸ͦΕͳΓͷ
    ޻਺ֻ͕͔Δ

    View Slide

  40. PWA ࣮૷ʹඞཁͳཁૉ
    • manifest.json
    • Add to home screen
    • Full Screen like native apps
    • Service Worker
    • and more

    View Slide

  41. PWA ࣮૷ʹඞཁͳཁૉ
    • manifest.json
    • Add to home screen
    • Full Screen like native apps
    • Service Worker
    • and more

    View Slide

  42. Service Worker

    View Slide

  43. Service WorkerʢSWʣ
    • ௨ৗͷϖʔδͰಈ͘JSͱ͸ҧ͍ɺϒϥ΢β಺Ͱྑ͠ͳ
    ʹىಈ/ఀࢭ͢ΔJS Workerʢ͔ͩΒΠϯετʔϧ͢
    Δʣ
    • Service Workerࣗମ͕Ӭଓతͳσʔλ͸อ࣋Ͱ͖ͳ͍
    • IndexedDB౳Λ࢖͏
    • ௚઀DOMૢ࡞͸ग़དྷͳ͍

    View Slide

  44. Service WorkerʢSWʣ
    • ҎԼͷ༷ʹSWΛొ࿥͢Δ͜ͱͰɺର৅είʔ
    ϓҎԼͰಈ࡞͠ଓ͚Δ
    navigator.serviceWorker.register(‘./sw.js’, {scope:
    './'}).then(function(registration) {
    console.log(‘SW registered with scope: ‘,
    registration.scope);
    }); ɹɹɹɹɹɹ
    • ొ࿥ޙɺΠϕϯτۦಈͰಈ࡞͢Δʢinstall,
    activate, fetch౳֤छΠϕϯτʹରԠʣɹ

    View Slide

  45. Service WorkerʢSWʣ
    • SW͸ϓϩάϥϚϒϧͳϓϩΩγͰ͋Δ
    • ϖʔδ͔ΒͷϦΫΤετΛΠϯλʔηϓτ
    ͠ίϯτϩʔϧ͢Δ
    • ֎͔Βͷ௨஌Λྑ͠ͳʹૢ࡞ͯ͠ϖʔδʹϨ
    εϙϯεͱͯ͠ฦ͢

    View Slide

  46. Service WorkerʢSWʣ
    ϒϥ΢β͔ΒͷϦΫΤετΛfetchΠϕϯτͰड͚ͯɺSW͔ΒϨεϙϯεΛฦ͢
    self.addEventListener('fetch', function(event) {
    console.log(event.request.url);
    event.respondWith(new Response('Hello, world! from SW'));
    });
    SW͕ड͚ͨϦΫΤετΛͦͷ··fetch APIͰSW͕ϦΫΤετΛ౤͛ͯฦ͢
    self.addEventListener('fetch', function(event) {
    event.respondWith(fetch(event.request));
    });

    View Slide

  47. Service WorkerʢSWʣ
    const dataCacheName = ‘v1';
    const cacheName = ‘v1';
    const filesToCache = [
    ‘/index.html',
    ‘/images/logo.png'
    ];
    self.addEventListener('install', function(e) {
    console.log('[ServiceWorker] Install’);
    e.waitUntil(
    caches.open(cacheName).then(function(cache) {
    console.log('[ServiceWorker] Caching app shell’);
    return cache.addAll(filesToCache);
    })
    );
    });
    self.addEventListener('activate', function(e) {
    console.log('[ServiceWorker] Activate’);
    e.waitUntil(
    caches.keys().then(function(keyList) {
    return Promise.all(keyList.map(function(key) {
    if (key !== cacheName && key !== dataCacheName) {
    console.log('[ServiceWorker] Removing old
    cache', key);
    return caches.delete(key);
    }
    }));
    })
    );
    return self.clients.claim();
    });
    self.addEventListener('fetch', function(e) {ɹ ɹɹɹ
    console.log('[Service Worker] Fetch’, ɹɹɹɹ
    e.request.url); ɹɹɹ
    const dataUrl = 'https://example.com/data/v1';
    if (e.request.url.indexOf(dataUrl) > -1) {ɹɹɹɹ
    e.respondWith(ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ
    caches.open(dataCacheName).then(function(cache) {
    return fetch(e.request).then(function(response){
    cache.put(e.request.url, response.clone());
    return response;
    });ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ɹɹ
    })
    );
    } else {
    e.respondWith(
    caches.match(e.request).then(function(response) {
    return response || fetch(e.request);
    })ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ
    );
    }
    });

    View Slide

  48. Service Worker
    #SPXTFS 4FSWFS
    48
    TXKT
    navigator.serviceWorker.register(‘./sw.js’);
    JOTUBMM
    BDUJWBUF
    XBJUJOH

    View Slide

  49. Service Worker (install࣌)
    #SPXTFS 4FSWFS
    48
    TXKT
    navigator.serviceWorker.register(‘./sw.js’);
    JOTUBMM
    BDUJWBUF
    XBJUJOH

    View Slide

  50. Service Worker (installޙ)
    #SPXTFS 4FSWFS
    48
    TXKT
    navigator.serviceWorker.register(‘./sw.js’);
    JOTUBMM
    BDUJWBUF
    XBJUJOH

    View Slide

  51. Service Worker
    #SPXTFS 4FSWFS
    48
    fetchΠϕϯτ fetch
    event.respondWith()

    View Slide

  52. Service Worker

    View Slide

  53. App Shell

    View Slide

  54. App ShellϞσϧ

    View Slide

  55. App ShellϞσϧ
    • ࠷௿ݶͷhtml, css, jsΛΦϑϥΠϯͰඳըͰ͖
    ΔΑ͏ʹΩϟογϡΛ͢Δ
    • ಈతίϯςϯπ͸ΩϟογϡΛར༻͠ͳ͕Β
    ΋࠷৽ͷ৘ใΛฦ͢
    • ·ΔͰωΠςΟϒΞϓϦ

    View Slide

  56. Twitter liteͷ࣮ࡍͷಈ͖
    • ͜Ε·Ͱͷઆ໌ʢҎ্ͷ͜
    ͱʣΛҰ௨Γߦ͍ɺΞϓϦ
    ͱશ͘Ḯ৭ͳ͍ಈ࡞Λମݧ
    ͢Δ͜ͱ͕Ͱ͖Δɻ

    View Slide

  57. PWA ϥΠϒϥϦ / πʔϧ
    • Workbox
    • sw-precacheʹมΘΔSW༻ϥΠϒϥϦ
    • Lighthouse
    • PWA౓΍ύϑΥʔϚϯεɺΞΫηγϏϦ
    ςΟΛ఺਺Խ

    View Slide

  58. 8PSLCPY
    IUUQTXPSLCPYKTPSH

    View Slide

  59. 8PSLCPY
    IUUQTXPSLCPYKTPSH

    View Slide

  60. -JHIUIPVTF
    IUUQTEFWFMPQFSTHPPHMFDPNXFCUPPMTMJHIUIPVTF

    View Slide

  61. • Chrome
    • Firefox
    • Edge
    • Opera
    PWA ରԠϒϥ΢β PWA ඇରԠϒϥ΢β
    • Safari

    View Slide

  62. PWA + AMP

    View Slide

  63. PWAͱAMPΛ
    ૊Έ߹ΘͤΔϝϦοτ
    • PWA͸SWΠϯετʔϧޙ͕ૣ͍
    • AMP͸Ϧονͳίϯςϯπ͸Ͱ͖ͳ͍͕ɺ࠷
    ॳ͔Βૣ͍
    • AMPϖʔδͰSW͕Πϯετʔϧग़དྷͨΒʁ

    View Slide

  64. amp-install-servieworker
    src=“https://cdn.ampproject.org/v0/amp-install-
    serviceworker-0.1.js">

    serviceworker.js" data-iframe-src=“https://www.your-domain.com/
    install-serviceworker.html" layout="nodisplay">

    View Slide

  65. AMP as PWA
    AMP to PWA
    AMP in PWA

    View Slide

  66. AMPͰߏங͞ΕͨϖʔδͰɺ
    PWAͷػೳΛར༻͢Δɻ
    AMP as PWA

    View Slide

  67. AMP to PWA

    View Slide

  68. AMP to PWA
    AMP to PWA

    View Slide

  69. AMP to PWA
    AMP to PWA

    View Slide

  70. ૯ׅ

    View Slide

  71. ૯ׅ
    • Ϣʔβʔʹ΋αʔϏεʹ΋ϝϦοτͷ͋ΔAMP + PWA
    • Native App͔Web App͔ɺͲͪΒ͕࢖͍қ͍͔ΛબͿͷ͸
    Ϣʔβʔ
    • ͚ͲɺWebαʔϏεϝΠϯͷ৔߹͸ରԠͷՁ஋͕େ͍ʹ͋Δ
    • WebΛ࡞͍ͬͯΔօ͞Μʹ͸ೃછΈқ͍͸ͣ
    • Apple͸WebͷਐԽΛࢭΊଓ͚Δͷ͔…

    View Slide

  72. We’re hiring!!
    IUUQTXXXXBOUFEMZDPNDPNQBOJFTNFSDBSJBQQDPN

    View Slide