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.3k
Edbee6089620d92f417d03963f1775d9?s=48 yuisakamoto
7
4.9k
Edbee6089620d92f417d03963f1775d9?s=48 yuisakamoto
8
5.5k

Other Decks in Programming

See All in Programming
F02afcecaa4f0ac77531c6efdead2e67?s=48 mpociot
2
780
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
4
220
4d78b749c315e21a956053dcbf0508a9?s=48 po3rin
1
820
B84123138372542a55401c92b170b528?s=48 hassaku63
4
1.8k
376e4eb9dc6c2e33d1330262edc4f109?s=48 janko_m
0
280
5ad0bb268dd2605b09165d464308cb7e?s=48 igaiga
2
120
9ec05c5a1b9b0ce9cd53ec3a63838b9a?s=48 yuuu
2
150
De266761b955b2636e454a1bc7a99ed4?s=48 masayaaoyama
5
560
9ed92fc8760bf8b6ea2a034022052b42?s=48 takaram
3
140
0aa238a274c2397214b20d6eed58939b?s=48 moomooya
4
540
0aa238a274c2397214b20d6eed58939b?s=48 moomooya
2
370
C4b9a181d7fb82642b4c8c1df6ae2b87?s=48 louvre2489
1
120

Featured

See All Featured
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
257
24k
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
10
1.2k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
304
16k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
27k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
142
19k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
145
12k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
7
580
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
94
5k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
55
9.2k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
61
7.4k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
22
1.6k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
326
35k

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