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

PWA+AMPの話

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

 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.6k
Edbee6089620d92f417d03963f1775d9?s=48 yuisakamoto
7
5.2k
Edbee6089620d92f417d03963f1775d9?s=48 yuisakamoto
8
5.7k

Other Decks in Programming

See All in Programming
13fb4600e942b31c69cfeaf4768c36cc?s=48 takazudo
7
750
Ebaf5fd2c63aa33c66b0894034ae87af?s=48 yuichi110
1
140
F9d1e7c494103e9ad73723d4496334f9?s=48 mattdclarke
0
190
Ca17a082a30f4cbfed1d0a6dacbe3af2?s=48 shin1x1
PRO
2
2.7k
B03c47042f27235b4ddd97621c02df81?s=48 storz
0
110
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
170
E10ba38646a905c8cd2c893c84d5c520?s=48 suzushin54
0
280
F9d1e7c494103e9ad73723d4496334f9?s=48 mattdclarke
0
200
8ad4be5fb42a8fd88d68a9054d9eba8e?s=48 tamai_63
0
1.2k
8f84b7d8869ef6005d89b378e8661f7c?s=48 masuda220
PRO
2
1.5k
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
0
230
0b26590a0a8b0f1da140ed5de9b68379?s=48 usamik26
0
220

Featured

See All Featured
Ba530e786553390f3fb271848485681c?s=48 3n
170
23k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
78
280k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
22k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
172
7.9k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
38
5.9k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
238
10k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
4k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
178
8.3k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
303
40k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.3k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
208
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