PWA+AMPの話

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

1. Progressive Web Apps + AMP = PWAMP (for PHPer) @yui_tang PHPΧϯϑΝϨϯε෱Ԭɹ 2017.06.10
2. • ࡔຊ ݁ҥ(@yui_tang) • Software Engineer • Mercari, inc. • ೖࣾ3೥໨ • αʔόʔαΠυɺϑϩϯτΤϯυɺϓϩδΣΫτ Φʔφʔ౳ʑ • ༷ʑͳϓϩδΣΫτʹؔΘΓͳ͕Β΋ɺೖࣾҎདྷ WebΛ୲౰͍ͯ͠Δ About Me
3. PHPΧϯϑΝϨϯε෱Ԭ2017 ͰPHPʹ৮Εͳ͍࿩Λ͢Δ࿮
4. ग़ͯ͘Δαϯϓϧίʔυ͸ ຊ൪Ͱ͸࢖͑·ͤΜ
5. Contents • ԿނWebʁ • AMPʢAccelerated Mobile Pagesʣͱ͸ • PWAʢProgressive Web Appsʣͱ͸ • PWA ʴ AMP • ૯ׅ
6. ࠓ೔ͷΰʔϧ ͜ΕΒͷٕज़ʹ৮Εͨ͜ͱͷͳ͍ ਓୡʹڵຯΛ࣋ͬͯ΋Β͑Δ
7. ԿނΞϓϦͰ͸ͳ͘ Webͷ࿩Λ͢Δͷʁ
8. ԿނWebʁ
9. ԿނWebʁ • ճઢ؀ڥͷѱ͍ࠃʑͰ͸ɺΞϓϦΛμ΢ϯϩʔ υ͢Δ͜ͱ΁ͷ఍߅ײ͕ະͩڧ͍ • ࠃ಺Ͱ͸ʁ • ݄຤ʹ଎౓੍ݶֻ͕͔ΔϢʔβʔ • ి೾͕ແ͍ঢ়گͰɺͦΕΛײͣ͡ʹಈ͘Ξϓ Ϧ͹͔ΓͰ͸ແ͍
10. Twitter lite͸PWA IUUQTCMPHUXJUUFSDPNP⒏DJBMKB@KQUPQJDTQSPEVDUUXJUUFSMJUF@IUNM
11. Twitter lite • Android App 23MB+ • iOS App 100MB+ • PWA 0.6MB
12. ԿނWebʁ • ΞϓϦ͕ྑ͍ / ѱ͍ͷ࿩Ͱ͸ͳ͍ • Webϒϥ΢βͰදݱग़དྷΔ͜ͱ͕૿͍͑ͯΔ • Ϣʔβʔ͕બ΂Δબ୒ࢶ͕૿͑Δ • ݶΒΕͨϦιʔεͷதͰɺWebʹ஫ྗ͢Δ͜ ͱͰେ͖ͳϝϦοτ͕͋ΔͳΒ͹Φεεϝ
13. AMP Accelerated Mobile Pages
14. About AMP • AMPͱ͸ʁ • Pros ⤴ / Cons ⤵ • ࣮૷ํ๏ • ରԠϒϥ΢β • ͲΜͳαΠτʹ༗ޮʁ
15. About AMP • AMPͱ͸ʁ • Pros ⤴ / Cons ⤵ • ࣮૷ํ๏ • ରԠϒϥ΢β • ͲΜͳαΠτʹ༗ޮʁ • ϦονͰ஗͍ ✖ γϯϓϧͰૣ͍=>৽ఏҊ • htmlʹࣅֶ͍ͯͯशίετ͕௿͍ • ؆୯ͳهड़ͰDLɾϨϯμϦϯά͕ૣ͍ • ௨ৗͷhtmlͱൺ΂ͯग़དྷͳ͍͜ͱ͕͋Δ
16. "DDFMFSBUFE
    .PCJMF
    1BHFT
    1SPKFDU
    
    ".1
    IUUQTXXXBNQQSPKFDUPSH
17. "DDFMFSBUFE
    .PCJMF
    1BHFT
    1SPKFDU
    
    ".1
    IUUQTXXXBNQQSPKFDUPSH ".1
    $POG
    ΁ߦ͖ͬͯ·ͨ͠
    ".1$POG
    IUUQUFDINFSDBSJDPNFOUSZ
18. AMPͱ͸ʁ • Google / Twitter͕த৺ͱͳͬͯ࢝·ͬͨOSS • ύϒϦογϟͱίϯςϯπϗϧμ͕͍Δ • ੍ݶͷ͋ΔHTML5Ͱ࣮૷͢Δ • PublisherଆͰΩϟογϡΛ͢Δ͜ͱͰߴ଎Խ • ϖʔδίϯςϯπ࣍ୈͰ͸Googleݕࡧͷ݁ՌͰԸܙΛड ͚ΒΕΔ
19. AMPͱ͸ʁ • AMP͚ͩͲɺผʹMobileઐ༻Ͱ͸ͳ͍ • Mobileઐ༻Ͱ͸ͳ͍͠ɺϨεϙϯγϒରԠ΋ Մೳ
20. AMP Pros / Cons
21. AMP Pros / Cons • ࣮૷͕؆୯ ֮͑Δ͜ͱ͕গͳ͍ • ग़དྷΔίτ͕υϯυϯ૿͍͑ͯΔ ⤴ • αʔόʔαΠυݴޠͱ΋౰વ૊Έ߹ΘͤΒΕΔ • ౰વૣ͍ • Googleݕࡧ݁ՌͰ΋༏۰͞ΕΔ৔߹΋
22. AMP Pros / Cons • “ग़དྷແ͍ίτ” Λཧղ͢Δඞཁ͕͋Δ • طଘϖʔδͱͷ2ॏ؅ཧͷ৔߹ͷ؅ཧίετ • …͜ͷ͘Β͍͔ʁ
23. AMP ࣮૷ํ๏
24. AMP ࣮૷ํ๏ (minimum) <!DOCTYPE html> <html ⚡ lang=“en"> <head> <meta charset=“UTF-8"> <meta name="viewport" content=“width=device-width,minimum- scale=1,initial-scale=1"> <script async src=“https://cdn.ampproject.org/v0.js”></ script> <style amp-boilerplate> <!— தུ —!></style></noscript> <link rel="canonical" href=“/"> <title>AMP Test</title> </head> <body> Hello. </body> </html>
25. AMP ࣮૷ํ๏ • AMPʹඞཁͳίϯϙʔωϯτಡΈࠐΈ༻ͷJSҎ֎͸࢖༻ ग़དྷͳ͍ • JSͰ΍͍ͬͯͨίτΛAMPͰஔ͖׵͑ΒΕΔ͔ʁ • ֎෦CSS͸ಡΈࠐΉίτ͕ग़དྷͳ͍ • λάͷstyleཁૉ or <style>಺ʹهड़ • PHPͰ͸ɺtemplate಺ͰςΩετϑΝΠϧ͕ಡΈࠐ Ί·͢ΑͶ • ໿50KBͷ੍ݶ
26. AMP ࣮૷ํ๏ • ࢖༻ग़དྷͳ͍htmlλά΍୅ସͷAMPίϯϙʔ ωϯτ͕͋Δλά͕ଘࡏ • × frame • img -> amp-img • form -> amp-form • and more IUUQTXXXBNQQSPKFDUPSHEPDTSFGFSFODFDPNQPOFOUT
27. AMP ࣮૷ํ๏ • amp-form, amp-bindʹΑͬͯɺECαΠτ΋ AMPԽ͕ग़དྷΔΑ͏ʹͳͬͨ!! • ߏ଄ԽσʔλΛ௥Ճ͢Δ ▶ Optional • URL຤ඌʹ “#development=1” • dev toolͷconsoleʹ݁Ռදࣔ IUUQTXXXBNQQSPKFDUPSHEPDTSFGFSFODFDPNQPOFOUT
28. AMP ࣮૷ํ๏ • AMP Start • AMP Official
29. AMP ରԠϒϥ΢βɹ • ػೳΛ੍ݶͨ͠HTML5ͳ͚ͩ • Ϟμϯϒϥ΢βͳΒجຊతʹಈ͘ • amp-◦◦ʹΑͬͯ͸ڍಈ͕ҧ͏৔߹΋͋Δ
30. AMP ͲΜͳαΠτʹ༗ޮ • ϒϩά • χϡʔεαΠτ • ϨγϐαΠτ • E-Commerce • ؆୯ͳίʔϙϨʔταΠτ
31. AMPʹ͍ͭͯ࠷ߴʹৄ͍͠هࣄ • “ελϯυΞϩϯAMPͷεεϝ” • http://tech.mercari.com/entry/ recommending-standalone-amp
32. PWA Progressive Web Apps
33. About PWA • PWA Overview • Prosɹ/ɹCons • ࣮૷ํ๏ • ֤छπʔϧ • ରԠϒϥ΢β
34. https://developers.google.com/web/progressive-web-apps/
35. PWA Overview • Reliable / Fast / Engage • ৴པੑ: ॠ࣌ʹϩʔυ͠ɺෆ࣮֬ͳωοτ ϫʔΫͰ΋404Λग़ͣ͞ʹϖʔδΛදࣔ • ଎͞: Ϣʔβʔͱͷ΍ΓͱΓʹਝ଎ʹରԠ • Τϯήʔδ: ΞϓϦͷΑ͏ͳମݧΛಧ͚Δ
36. PWA Overview • WebϖʔδͰAppͷΑ͏ͳUXΛ࣮ݱ͢Δ • ϗʔϜը໘ʹΞΠίϯΛ௥ՃͰ͖Δ • Native AppͷΑ͏ͳfull screen UI • ϒϥ΢β΁ Push Notification • Service WorkerʹΑΔߴ଎Խ΍ΦϑϥΠϯΩϟογϡ
37. PWA Pros / Cons
38. PWA Pros / Cons • ஈ֊తʹಋೖग़དྷΔ • PWAͱ͸Ұͭͷ׬੒ܗ͚ͩΛࢦ͢༁Ͱ͸ແ͍ • ࠓطʹಈ͍͍ͯΔΞϓϦέʔγϣϯͰ΋ঃʑʹ ରԠͰ͖Δ • HTTPSԽͷνϟϯε
39. PWA Pros / Cons • ίϯςϯπͷCache Controll • SafariඇରԠ • େن໛αΠτʹ׬શରԠ͢Δʹ͸ͦΕͳΓͷ ޻਺ֻ͕͔Δ
40. PWA ࣮૷ʹඞཁͳཁૉ • manifest.json • Add to home screen • Full Screen like native apps • Service Worker • and more
41. PWA ࣮૷ʹඞཁͳཁૉ • manifest.json • Add to home screen • Full Screen like native apps • Service Worker • and more
42. Service Worker
43. Service WorkerʢSWʣ • ௨ৗͷϖʔδͰಈ͘JSͱ͸ҧ͍ɺϒϥ΢β಺Ͱྑ͠ͳ ʹىಈ/ఀࢭ͢ΔJS Workerʢ͔ͩΒΠϯετʔϧ͢ Δʣ • Service Workerࣗମ͕Ӭଓతͳσʔλ͸อ࣋Ͱ͖ͳ͍ • IndexedDB౳Λ࢖͏ • ௚઀DOMૢ࡞͸ग़དྷͳ͍
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౳֤छΠϕϯτʹରԠʣɹ
45. Service WorkerʢSWʣ • SW͸ϓϩάϥϚϒϧͳϓϩΩγͰ͋Δ • ϖʔδ͔ΒͷϦΫΤετΛΠϯλʔηϓτ ͠ίϯτϩʔϧ͢Δ • ֎͔Βͷ௨஌Λྑ͠ͳʹૢ࡞ͯ͠ϖʔδʹϨ εϙϯεͱͯ͠ฦ͢
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)); });
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); })ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ); } });
48. Service Worker #SPXTFS 4FSWFS 48 TXKT navigator.serviceWorker.register(‘./sw.js’); JOTUBMM BDUJWBUF XBJUJOH
49. Service Worker (install࣌) #SPXTFS 4FSWFS 48 TXKT navigator.serviceWorker.register(‘./sw.js’); JOTUBMM BDUJWBUF XBJUJOH
50. Service Worker (installޙ) #SPXTFS 4FSWFS 48 TXKT navigator.serviceWorker.register(‘./sw.js’); JOTUBMM BDUJWBUF XBJUJOH
51. Service Worker #SPXTFS 4FSWFS 48 fetchΠϕϯτ fetch event.respondWith()
52. Service Worker
53. App Shell
54. App ShellϞσϧ
55. App ShellϞσϧ • ࠷௿ݶͷhtml, css, jsΛΦϑϥΠϯͰඳըͰ͖ ΔΑ͏ʹΩϟογϡΛ͢Δ • ಈతίϯςϯπ͸ΩϟογϡΛར༻͠ͳ͕Β ΋࠷৽ͷ৘ใΛฦ͢ • ·ΔͰωΠςΟϒΞϓϦ
56. Twitter liteͷ࣮ࡍͷಈ͖ • ͜Ε·Ͱͷઆ໌ʢҎ্ͷ͜ ͱʣΛҰ௨Γߦ͍ɺΞϓϦ ͱશ͘Ḯ৭ͳ͍ಈ࡞Λମݧ ͢Δ͜ͱ͕Ͱ͖Δɻ
57. PWA ϥΠϒϥϦ / πʔϧ • Workbox • sw-precacheʹมΘΔSW༻ϥΠϒϥϦ • Lighthouse • PWA౓΍ύϑΥʔϚϯεɺΞΫηγϏϦ ςΟΛ఺਺Խ
58. 8PSLCPY
    IUUQTXPSLCPYKTPSH
59. 8PSLCPY
    IUUQTXPSLCPYKTPSH
60. -JHIUIPVTF
    IUUQTEFWFMPQFSTHPPHMFDPNXFCUPPMTMJHIUIPVTF
61. • Chrome • Firefox • Edge • Opera PWA ରԠϒϥ΢β PWA ඇରԠϒϥ΢β • Safari
62. PWA + AMP
63. PWAͱAMPΛ ૊Έ߹ΘͤΔϝϦοτ • PWA͸SWΠϯετʔϧޙ͕ૣ͍ • AMP͸Ϧονͳίϯςϯπ͸Ͱ͖ͳ͍͕ɺ࠷ ॳ͔Βૣ͍ • AMPϖʔδͰSW͕Πϯετʔϧग़དྷͨΒʁ
64. amp-install-servieworker <script async custom-element="amp-install-serviceworker" src=“https://cdn.ampproject.org/v0/amp-install- serviceworker-0.1.js"></script> <!— தུ —!> <amp-install-serviceworker src=“https://www.your-domain.com/ serviceworker.js" data-iframe-src=“https://www.your-domain.com/ install-serviceworker.html" layout="nodisplay"> </amp-install-serviceworker>
65. AMP as PWA AMP to PWA AMP in PWA
66. AMPͰߏங͞ΕͨϖʔδͰɺ PWAͷػೳΛར༻͢Δɻ AMP as PWA
67. AMP to PWA
68. AMP to PWA AMP to PWA
69. AMP to PWA AMP to PWA
70. ૯ׅ
71. ૯ׅ • Ϣʔβʔʹ΋αʔϏεʹ΋ϝϦοτͷ͋ΔAMP + PWA • Native App͔Web App͔ɺͲͪΒ͕࢖͍қ͍͔ΛબͿͷ͸ Ϣʔβʔ • ͚ͲɺWebαʔϏεϝΠϯͷ৔߹͸ରԠͷՁ஋͕େ͍ʹ͋Δ • WebΛ࡞͍ͬͯΔօ͞Μʹ͸ೃછΈқ͍͸ͣ • Apple͸WebͷਐԽΛࢭΊଓ͚Δͷ͔…
72. We’re hiring!! IUUQTXXXXBOUFEMZDPNDPNQBOJFTNFSDBSJBQQDPN