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

PWA+AMPの話

Edbee6089620d92f417d03963f1775d9?s=47 Yui Sakamoto
June 10, 2017
Programming
25
20k

 PWA+AMPの話

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

Edbee6089620d92f417d03963f1775d9?s=128

Yui Sakamoto

June 10, 2017
Tweet

More Decks by Yui Sakamoto

See All by Yui Sakamoto
Edbee6089620d92f417d03963f1775d9?s=48 yuisakamoto
3
3.4k
Edbee6089620d92f417d03963f1775d9?s=48 yuisakamoto
7
5k
Edbee6089620d92f417d03963f1775d9?s=48 yuisakamoto
8
5.6k

Other Decks in Programming

See All in Programming
97a42cc1630ebdfdaaa8d50078a9fd3d?s=48 koheisakata
0
180
9a3693c0c3d12f2fbae51792dd6a1344?s=48 akito0107
0
210
B5582ce2d9959dfcff0384a07003e188?s=48 mackee
0
650
16040fb086040d7a04dd40478786a4ce?s=48 mizotake
2
330
7e0087a19318ded4ba2203187694740f?s=48 christianweyer
PRO
0
310
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
240
877ac424e59bd3dd183859ef4cc9a08a?s=48 ryosukes
0
1.4k
948c23c57a850629ff283f2a83088173?s=48 yotuba088
2
600
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
160
270b0c7883545117a9a618dc7ca7cc83?s=48 xrdnk
0
140
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
190
7fccfb690a818ed2f3a15fc21d426d5a?s=48 texmeijin
0
140

Featured

See All Featured
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
165
19k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
217
16k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
392
61k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
18k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
401
20k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.9k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
200
20k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
146
19k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
167
7.3k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
52
4.2k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
347
20k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
294
39k

Transcript

  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.PCJMF1BHFT1SPKFDU".1 IUUQTXXXBNQQSPKFDUPSH

  17. "DDFMFSBUFE.PCJMF1BHFT1SPKFDU".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