PWA+AMPの話 - Speaker Deck

PWA+AMPの話

by Yui Sakamoto

Slide 1

Slide 1 text

Progressive Web Apps + AMP = PWAMP (for PHPer) @yui_tang PHPΧϯϑΝϨϯε෱Ԭɹ 2017.06.10

Slide 2

Slide 2 text

• ࡔຊ ݁ҥ(@yui_tang) • Software Engineer • Mercari, inc. • ೖࣾ3೥໨ • αʔόʔαΠυɺϑϩϯτΤϯυɺϓϩδΣΫτ Φʔφʔ౳ʑ • ༷ʑͳϓϩδΣΫτʹؔΘΓͳ͕Β΋ɺೖࣾҎདྷ WebΛ୲౰͍ͯ͠Δ About Me

Slide 3

Slide 3 text

PHPΧϯϑΝϨϯε෱Ԭ2017 ͰPHPʹ৮Εͳ͍࿩Λ͢Δ࿮

Slide 4

Slide 4 text

ग़ͯ͘Δαϯϓϧίʔυ͸ ຊ൪Ͱ͸࢖͑·ͤΜ

Slide 5

Slide 5 text

Contents • ԿނWebʁ • AMPʢAccelerated Mobile Pagesʣͱ͸ • PWAʢProgressive Web Appsʣͱ͸ • PWA ʴ AMP • ૯ׅ

Slide 6

Slide 6 text

ࠓ೔ͷΰʔϧ ͜ΕΒͷٕज़ʹ৮Εͨ͜ͱͷͳ͍ ਓୡʹڵຯΛ࣋ͬͯ΋Β͑Δ

Slide 7

Slide 7 text

ԿނΞϓϦͰ͸ͳ͘ Webͷ࿩Λ͢Δͷʁ

Slide 8

Slide 8 text

ԿނWebʁ

Slide 9

Slide 9 text

ԿނWebʁ • ճઢ؀ڥͷѱ͍ࠃʑͰ͸ɺΞϓϦΛμ΢ϯϩʔ υ͢Δ͜ͱ΁ͷ఍߅ײ͕ະͩڧ͍ • ࠃ಺Ͱ͸ʁ • ݄຤ʹ଎౓੍ݶֻ͕͔ΔϢʔβʔ • ి೾͕ແ͍ঢ়گͰɺͦΕΛײͣ͡ʹಈ͘Ξϓ Ϧ͹͔ΓͰ͸ແ͍

Slide 10

Slide 10 text

Twitter lite͸PWA IUUQTCMPHUXJUUFSDPNP⒏DJBMKB@KQUPQJDTQSPEVDUUXJUUFSMJUF@IUNM

Slide 11

Slide 11 text

Twitter lite • Android App 23MB+ • iOS App 100MB+ • PWA 0.6MB

Slide 12

Slide 12 text

ԿނWebʁ • ΞϓϦ͕ྑ͍ / ѱ͍ͷ࿩Ͱ͸ͳ͍ • Webϒϥ΢βͰදݱग़དྷΔ͜ͱ͕૿͍͑ͯΔ • Ϣʔβʔ͕બ΂Δબ୒ࢶ͕૿͑Δ • ݶΒΕͨϦιʔεͷதͰɺWebʹ஫ྗ͢Δ͜ ͱͰେ͖ͳϝϦοτ͕͋ΔͳΒ͹Φεεϝ

Slide 13

Slide 13 text

AMP Accelerated Mobile Pages

Slide 14

Slide 14 text

About AMP • AMPͱ͸ʁ • Pros ⤴ / Cons ⤵ • ࣮૷ํ๏ • ରԠϒϥ΢β • ͲΜͳαΠτʹ༗ޮʁ

Slide 15

Slide 15 text

About AMP • AMPͱ͸ʁ • Pros ⤴ / Cons ⤵ • ࣮૷ํ๏ • ରԠϒϥ΢β • ͲΜͳαΠτʹ༗ޮʁ • ϦονͰ஗͍ ✖ γϯϓϧͰૣ͍=>৽ఏҊ • htmlʹࣅֶ͍ͯͯशίετ͕௿͍ • ؆୯ͳهड़ͰDLɾϨϯμϦϯά͕ૣ͍ • ௨ৗͷhtmlͱൺ΂ͯग़དྷͳ͍͜ͱ͕͋Δ

Slide 16

Slide 16 text

"DDFMFSBUFE.PCJMF1BHFT1SPKFDU".1 IUUQTXXXBNQQSPKFDUPSH

Slide 17

Slide 17 text

"DDFMFSBUFE.PCJMF1BHFT1SPKFDU".1 IUUQTXXXBNQQSPKFDUPSH ".1$POG΁ߦ͖ͬͯ·ͨ͠".1$POG IUUQUFDINFSDBSJDPNFOUSZ

Slide 18

Slide 18 text

AMPͱ͸ʁ • Google / Twitter͕த৺ͱͳͬͯ࢝·ͬͨOSS • ύϒϦογϟͱίϯςϯπϗϧμ͕͍Δ • ੍ݶͷ͋ΔHTML5Ͱ࣮૷͢Δ • PublisherଆͰΩϟογϡΛ͢Δ͜ͱͰߴ଎Խ • ϖʔδίϯςϯπ࣍ୈͰ͸Googleݕࡧͷ݁ՌͰԸܙΛड ͚ΒΕΔ

Slide 19

Slide 19 text

AMPͱ͸ʁ • AMP͚ͩͲɺผʹMobileઐ༻Ͱ͸ͳ͍ • Mobileઐ༻Ͱ͸ͳ͍͠ɺϨεϙϯγϒରԠ΋ Մೳ

Slide 20

Slide 20 text

AMP Pros / Cons

Slide 21

Slide 21 text

AMP Pros / Cons • ࣮૷͕؆୯ ֮͑Δ͜ͱ͕গͳ͍ • ग़དྷΔίτ͕υϯυϯ૿͍͑ͯΔ ⤴ • αʔόʔαΠυݴޠͱ΋౰વ૊Έ߹ΘͤΒΕΔ • ౰વૣ͍ • Googleݕࡧ݁ՌͰ΋༏۰͞ΕΔ৔߹΋

Slide 22

Slide 22 text

AMP Pros / Cons • “ग़དྷແ͍ίτ” Λཧղ͢Δඞཁ͕͋Δ • طଘϖʔδͱͷ2ॏ؅ཧͷ৔߹ͷ؅ཧίετ • …͜ͷ͘Β͍͔ʁ

Slide 23

Slide 23 text

AMP ࣮૷ํ๏

Slide 24

Slide 24 text

AMP ࣮૷ํ๏ (minimum) script> <style amp-boilerplate> <!— தུ —!></style></noscript> <link rel="canonical" href=“/"> <title>AMP Test</title> </head> <body> Hello. </body> </html>

Slide 25

Slide 25 text

AMP ࣮૷ํ๏ • AMPʹඞཁͳίϯϙʔωϯτಡΈࠐΈ༻ͷJSҎ֎͸࢖༻ ग़དྷͳ͍ • JSͰ΍͍ͬͯͨίτΛAMPͰஔ͖׵͑ΒΕΔ͔ʁ • ֎෦CSS͸ಡΈࠐΉίτ͕ग़དྷͳ͍ • λάͷstyleཁૉ or ಺ʹهड़ • PHPͰ͸ɺtemplate಺ͰςΩετϑΝΠϧ͕ಡΈࠐ Ί·͢ΑͶ • ໿50KBͷ੍ݶ

Slide 26

Slide 26 text

AMP ࣮૷ํ๏ • ࢖༻ग़དྷͳ͍htmlλά΍୅ସͷAMPίϯϙʔ ωϯτ͕͋Δλά͕ଘࡏ • × frame • img -> amp-img • form -> amp-form • and more IUUQTXXXBNQQSPKFDUPSHEPDTSFGFSFODFDPNQPOFOUT

Slide 27

Slide 27 text

AMP ࣮૷ํ๏ • amp-form, amp-bindʹΑͬͯɺECαΠτ΋ AMPԽ͕ग़དྷΔΑ͏ʹͳͬͨ!! • ߏ଄ԽσʔλΛ௥Ճ͢Δ ▶ Optional • URL຤ඌʹ “#development=1” • dev toolͷconsoleʹ݁Ռදࣔ IUUQTXXXBNQQSPKFDUPSHEPDTSFGFSFODFDPNQPOFOUT

Slide 28

Slide 28 text

AMP ࣮૷ํ๏ • AMP Start • AMP Ofﬁcial

Slide 29

Slide 29 text

AMP ରԠϒϥ΢βɹ • ػೳΛ੍ݶͨ͠HTML5ͳ͚ͩ • Ϟμϯϒϥ΢βͳΒجຊతʹಈ͘ • amp-○○ʹΑͬͯ͸ڍಈ͕ҧ͏৔߹΋͋Δ

Slide 30

Slide 30 text

AMP ͲΜͳαΠτʹ༗ޮ • ϒϩά • χϡʔεαΠτ • ϨγϐαΠτ • E-Commerce • ؆୯ͳίʔϙϨʔταΠτ

Slide 31

Slide 31 text

AMPʹ͍ͭͯ࠷ߴʹৄ͍͠هࣄ • “ελϯυΞϩϯAMPͷεεϝ” • http://tech.mercari.com/entry/ recommending-standalone-amp

Slide 32

Slide 32 text

PWA Progressive Web Apps

Slide 33

Slide 33 text

About PWA • PWA Overview • Prosɹ/ɹCons • ࣮૷ํ๏ • ֤छπʔϧ • ରԠϒϥ΢β

Slide 34

Slide 34 text

https://developers.google.com/web/progressive-web-apps/

Slide 35

Slide 35 text

PWA Overview • Reliable / Fast / Engage • ৴པੑ: ॠ࣌ʹϩʔυ͠ɺෆ࣮֬ͳωοτ ϫʔΫͰ΋404Λग़ͣ͞ʹϖʔδΛදࣔ • ଎͞: Ϣʔβʔͱͷ΍ΓͱΓʹਝ଎ʹରԠ • Τϯήʔδ: ΞϓϦͷΑ͏ͳମݧΛಧ͚Δ

Slide 36

Slide 36 text

PWA Overview • WebϖʔδͰAppͷΑ͏ͳUXΛ࣮ݱ͢Δ • ϗʔϜը໘ʹΞΠίϯΛ௥ՃͰ͖Δ • Native AppͷΑ͏ͳfull screen UI • ϒϥ΢β΁ Push Notiﬁcation • Service WorkerʹΑΔߴ଎Խ΍ΦϑϥΠϯΩϟογϡ

Slide 37

Slide 37 text

PWA Pros / Cons

Slide 38

Slide 38 text

PWA Pros / Cons • ஈ֊తʹಋೖग़དྷΔ • PWAͱ͸Ұͭͷ׬੒ܗ͚ͩΛࢦ͢༁Ͱ͸ແ͍ • ࠓطʹಈ͍͍ͯΔΞϓϦέʔγϣϯͰ΋ঃʑʹ ରԠͰ͖Δ • HTTPSԽͷνϟϯε

Slide 39

Slide 39 text

PWA Pros / Cons • ίϯςϯπͷCache Controll • SafariඇରԠ • େن໛αΠτʹ׬શରԠ͢Δʹ͸ͦΕͳΓͷ ޻਺ֻ͕͔Δ

Slide 40

Slide 40 text

PWA ࣮૷ʹඞཁͳཁૉ • manifest.json • Add to home screen • Full Screen like native apps • Service Worker • and more

Slide 41

Slide 41 text

PWA ࣮૷ʹඞཁͳཁૉ • manifest.json • Add to home screen • Full Screen like native apps • Service Worker • and more

Slide 42

Slide 42 text

Service Worker

Slide 43

Slide 43 text

Service WorkerʢSWʣ • ௨ৗͷϖʔδͰಈ͘JSͱ͸ҧ͍ɺϒϥ΢β಺Ͱྑ͠ͳ ʹىಈ/ఀࢭ͢ΔJS Workerʢ͔ͩΒΠϯετʔϧ͢ Δʣ • Service Workerࣗମ͕Ӭଓతͳσʔλ͸อ࣋Ͱ͖ͳ͍ • IndexedDB౳Λ࢖͏ • ௚઀DOMૢ࡞͸ग़དྷͳ͍

Slide 44

Slide 44 text

Service WorkerʢSWʣ • ҎԼͷ༷ʹSWΛొ࿥͢Δ͜ͱͰɺର৅είʔ ϓҎԼͰಈ࡞͠ଓ͚Δ navigator.serviceWorker.register(‘./sw.js’, {scope: './'}).then(function(registration) { console.log(‘SW registered with scope: ‘, registration.scope); }); ɹɹɹɹɹɹ • ొ࿥ޙɺΠϕϯτۦಈͰಈ࡞͢Δʢinstall, activate, fetch౳֤छΠϕϯτʹରԠʣɹ

Slide 45

Slide 45 text

Service WorkerʢSWʣ • SW͸ϓϩάϥϚϒϧͳϓϩΩγͰ͋Δ • ϖʔδ͔ΒͷϦΫΤετΛΠϯλʔηϓτ ͠ίϯτϩʔϧ͢Δ • ֎͔Βͷ௨஌Λྑ͠ͳʹૢ࡞ͯ͠ϖʔδʹϨ εϙϯεͱͯ͠ฦ͢

Slide 46

Slide 46 text

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)); });

Slide 47

Slide 47 text

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); })ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ); } });

Slide 48

Slide 48 text

Service Worker #SPXTFS 4FSWFS 48 TXKT navigator.serviceWorker.register(‘./sw.js’); JOTUBMM BDUJWBUF XBJUJOH

Slide 49

Slide 49 text

Service Worker (install࣌) #SPXTFS 4FSWFS 48 TXKT navigator.serviceWorker.register(‘./sw.js’); JOTUBMM BDUJWBUF XBJUJOH

Slide 50

Slide 50 text

Service Worker (installޙ) #SPXTFS 4FSWFS 48 TXKT navigator.serviceWorker.register(‘./sw.js’); JOTUBMM BDUJWBUF XBJUJOH

Slide 51

Slide 51 text

Service Worker #SPXTFS 4FSWFS 48 fetchΠϕϯτ fetch event.respondWith()

Slide 52

Slide 52 text

Service Worker

Slide 53

Slide 53 text

App Shell

Slide 54

Slide 54 text

App ShellϞσϧ

Slide 55

Slide 55 text

App ShellϞσϧ • ࠷௿ݶͷhtml, css, jsΛΦϑϥΠϯͰඳըͰ͖ ΔΑ͏ʹΩϟογϡΛ͢Δ • ಈతίϯςϯπ͸ΩϟογϡΛར༻͠ͳ͕Β ΋࠷৽ͷ৘ใΛฦ͢ • ·ΔͰωΠςΟϒΞϓϦ

Slide 56

Slide 56 text

Twitter liteͷ࣮ࡍͷಈ͖ • ͜Ε·Ͱͷઆ໌ʢҎ্ͷ͜ ͱʣΛҰ௨Γߦ͍ɺΞϓϦ ͱશ͘Ḯ৭ͳ͍ಈ࡞Λମݧ ͢Δ͜ͱ͕Ͱ͖Δɻ

Slide 57

Slide 57 text

PWA ϥΠϒϥϦ / πʔϧ • Workbox • sw-precacheʹมΘΔSW༻ϥΠϒϥϦ • Lighthouse • PWA౓΍ύϑΥʔϚϯεɺΞΫηγϏϦ ςΟΛ఺਺Խ

Slide 58

Slide 58 text

8PSLCPY IUUQTXPSLCPYKTPSH

Slide 59

Slide 59 text

8PSLCPY IUUQTXPSLCPYKTPSH

Slide 60

Slide 60 text

-JHIUIPVTF IUUQTEFWFMPQFSTHPPHMFDPNXFCUPPMTMJHIUIPVTF

Slide 61

Slide 61 text

• Chrome • Firefox • Edge • Opera PWA ରԠϒϥ΢β PWA ඇରԠϒϥ΢β • Safari

Slide 62

Slide 62 text

PWA + AMP

Slide 63

Slide 63 text

PWAͱAMPΛ ૊Έ߹ΘͤΔϝϦοτ • PWA͸SWΠϯετʔϧޙ͕ૣ͍ • AMP͸Ϧονͳίϯςϯπ͸Ͱ͖ͳ͍͕ɺ࠷ ॳ͔Βૣ͍ • AMPϖʔδͰSW͕Πϯετʔϧग़དྷͨΒʁ

Slide 64

Slide 64 text

amp-install-servieworker

Slide 65

Slide 65 text

AMP as PWA AMP to PWA AMP in PWA

Slide 66

Slide 66 text

AMPͰߏங͞ΕͨϖʔδͰɺ PWAͷػೳΛར༻͢Δɻ AMP as PWA

Slide 67

Slide 67 text

AMP to PWA

Slide 68

Slide 68 text

AMP to PWA AMP to PWA

Slide 69

Slide 69 text

AMP to PWA AMP to PWA

Slide 70

Slide 70 text

૯ׅ

Slide 71

Slide 71 text

૯ׅ • Ϣʔβʔʹ΋αʔϏεʹ΋ϝϦοτͷ͋ΔAMP + PWA • Native App͔Web App͔ɺͲͪΒ͕࢖͍қ͍͔ΛબͿͷ͸ Ϣʔβʔ • ͚ͲɺWebαʔϏεϝΠϯͷ৔߹͸ରԠͷՁ஋͕େ͍ʹ͋Δ • WebΛ࡞͍ͬͯΔօ͞Μʹ͸ೃછΈқ͍͸ͣ • Apple͸WebͷਐԽΛࢭΊଓ͚Δͷ͔…

Slide 72

Slide 72 text

We’re hiring!! IUUQTXXXXBOUFEMZDPNDPNQBOJFTNFSDBSJBQQDPN