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

PWA+AMPの話

Yui Sakamoto
June 10, 2017
Programming
25
21k

 PWA+AMPの話

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

Yui Sakamoto

June 10, 2017
Tweet

More Decks by Yui Sakamoto

See All by Yui Sakamoto
Google I/O '18 Overview @わいわい報告会
yuisakamoto
3
3.8k
Google I/O 2017 注目のmobile Web技術
yuisakamoto
7
5.4k
アプリファーストの影で頑張るWebの話
yuisakamoto
8
5.9k

Other Decks in Programming

See All in Programming
Step Functions Distributed Map を使ってみた
codemountains
0
100
低レイヤーから始める GUI
fadis
18
9.3k
tidy_rpart
bk_18
0
580
Jetpack Compose 完全に理解した
mkeeda
1
440
ECテックカンファレンス2023
kspace
1
230
PHPアプリケーションにおけるアーキテクチャメトリクスについて / Architecture Metrics in PHP Applications
isanasan
1
220
はてなリモートインターンシップ2022 フロントエンドブートキャンプ 講義資料
hatena
0
120
Amebaブログの会員画面システム刷新の道程
ryotasugawara
1
220
TokyoR#103_DataProcessing
kilometer
0
520
監視せなあかんし、五大紙だけにオオカミってな🐺🐺🐺🐺🐺
sadnessojisan
2
1.4k
Glance App Widgetでウィジェットを作ろう / MoT TechTalk #15
mot_techtalk
0
110
Cloudflare Workersと状態管理
chimame
3
480

Featured

See All Featured
WebSockets: Embracing the real-time Web
robhawkes
58
6k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
128
8.8k
Code Reviewing Like a Champion
maltzj
508
38k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Into the Great Unknown - MozCon
thekraken
2
280
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
32
6.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
50k
The Language of Interfaces
destraynor
149
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
32
1.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
840
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
Infographics Made Easy
chrislema
235
17k

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⒏DJBM[email protected]UPQJDTQSPEVDUUXJUUFS[email protected]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