20180827_PWA.pdf

Transcript

1. 1SPHSFTTJWF
   8FC
   "QQT 
   
2. "HFOEB  ֓ཁฤ
    ٕज़ฤ
    ·ͱΊ
   
3. ֓ཁฤ
   
4. 1SPHSFTTJWF
   8FC
   "QQTͱ͸ w (PPHMFͷఏএ͢Δ࣍ੈ୅ͷ8FCΞϓϦͷ͜ͱ
   w ΑΓྑ͍ϢʔβମݧΛఏڙ͢ΔͨΊͷࢦඪ
   w '8͕ଘࡏ͢ΔΑ͏ͳ΋ͷͰ͸ͳ͍
   w (PPHMF͕νΣοΫϦετΛެ։͍ͯ͠Δ͕ɺͦΕΒ͸ࣗલͰ ࣮૷͢Δඞཁ͕͋Δ
    PWA Check List - https://developers.google.com/web/progressive-web-apps/checklist
5. ैདྷͷ8FCͱԿ͕ҧ͏ʁ w ϒϥ΢β"1*ͷൃలʹΑΓैདྷͷ8FCͰͰ͖ͳ͔ͬͨ͜ͱ͕Ͱ͖ ΔΑ͏ʹͳͬͨ
   w ϓογϡ௨஌
   w ΦϑϥΠϯͰͷར༻
   w ϗʔϜεΫϦʔϯͷΞΠίϯ͔Βىಈ
    => ϚαϓΰϣίϤϷͽͭ͡ͽͣ΀͡͹͵ͩ;͢WebͽΘݢᚆ΁
6. ͳͥࠓ18"ʁ w J04͕͔Β18"ͷίΞٕज़Ͱ͋Δ4FSWJDF8PSLFSʹରԠ
   w 4FSWJDF8PSLFSʹରԠ͢Δϒϥ΢βͷγΣΞ͕େ෯ʹ֦େ
    https://caniuse.com/#search=serviceworker
7. ઌਐࣄྫ w ೔ܦిࢠ൛
 IUUQTIBDLOJLLFJDPNCMPHOJLLFJGFBUVSFEBUHPPHMFJP
   w 4VVNP
   w 5XJUUFS
   -JUF
   w 5SJWBHP
   
8. ҰํੈͷதͰ͸ w 18"ͱ͍͏୯ޠ͕όζϫʔυԽ
   w 18"Խ
   
   ϗʔϜεΫϦʔϯʹ௥ՃͰ͖Δ͜ͱ
   w ʮ18"ͰԿ͔Ͱ͖ͳ͍͔ʁʯͱ໨తͱखஈ͕ٯస
   w 
   %FW0QT
   "HJMF౳ʑͱಉ͡ಓΛḷΓͭͭ͋Δ
   
9. 18"ͱͷ޲͖߹͍ํ w 18"୆಄ͷഎܠʹ͋Δٕज़ཁૉΛཧղ͢Δ͜ͱ
 w ͦΕΒͷٕज़ཁૉͰԿΛ࣮ݱͰ͖Δ͔ཧղ͢Δ͜ͱ
 w ͦΕΒΛ౿·্͑ͨͰϢʔβମݧͷ޲্ʹͭͳ͕ΔػೳΛݟۃ Ί࠾༻Ͱ͖Δ͜ͱ
   
10. 18"ͱͷ޲͖߹͍ํ w 18"୆಄ͷഎܠʹ͋Δٕज़ཁૉΛਖ਼͘͠ཧղ͢Δ͜ͱ
 
    4FSWJDF8PSLFS
    8FC
    "QQ
    .BOJGFTU
    1VTI
    "1*
    ౳ʑ
    w ͦΕΒͷٕज़ཁૉͰԿΛ࣮ݱͰ͖Δ͔ཧղ͢Δ͜ͱ
 
    ϓογϡ௨஌ɺϗʔϜεΫϦʔϯ௥ՃɺΦϑϥΠϯରԠ
    ౳ʑ
    w ͦΕΒΛ౿·্͑ͨͰϢʔβମݧͷ޲্ʹͭͳ͕ΔػೳΛݟۃ Ί࠾༻Ͱ͖Δ͜ͱ
     ໨ࢦ͢΂͖ͱ͜Ζ͸͜͜
 18"Λ࡞Γ͍ͨͷͰ͸ͳ͘
    69޲্ͷखஈͷҰ͕ͭ18"
11. ٕज़ฤ
    
12. 18"ΛऔΓרٕ͘ज़ w 4FSWJDF8PSLFS
    w $BDIF
    "1*
    w 8FC
    "QQ
    .BOJGFTU
    w ͦͷଞ
    
13. 4FSWJDF8PSLFS w όοΫάϥ΢ϯυͰಈ࡞͢ΔϓϩάϥϚϒϧͳϩʔΧϧϓϩΩγ
    w ϦΫΤετϨεϙϯεͷ΍ΓऔΓʹհೖͰ͖Δ
    
14. 4FSWJDF8PSLFS <!-- index.html --> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register(‘/sw.js') .then(registration => { console.log('registration successful'); }).catch(() => { console.log('registration failed'); }); } </script>
     // sw.js self.addEventListener('install', event => { console.log('install service worker'); }); self.addEventListener('activate', event => { console.log('activate service worker'); }); self.addEventListener('fetch', event => { console.log('intercept fetch request'); }); 4FSWJDF8PSLFSͷొ࿥ॲཧ
15. $BDIF
    "1* w ίϯςϯπΛ$BDIFʹอଘ͢Δ͜ͱ͕Ͱ͖Δ
    
16. $BDIF
    "1* const CACHE_NAME = ‘pwa-sample-v1'; const urlsToCache = [ '/assets/css/styles.css', '/assets/js/main.js', ]; self.addEventListener('install', event => { event.waitUntil( caches .open(CACHE_NAME) .then(cache => cache.addAll(urlsToCache)) .catch(console.log) ); });
     self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request).then(res => { if (res) { console.log('exist in cache'); // cacheʹ͋ͬͨΒͦΕΛฦ͢ return res; } else { console.log('not exist in cache'); // cacheʹͳ͚Ε͹௨৴ͯͦ͠ͷ݁ՌΛฦ͢ return fetch(event.request); } }) ); }); ىಈ࣌ʹ$BDIFʹอଘ $BDIFʹ͋Ε͹௨৴͠ͳ͍
17. 8FC
    "QQ
    .BOJGFTU w NBOJGFTUϑΝΠϧΛ༻ҙ͢Δ͜ͱͰΠϯετʔϧͰ͖ΔΑ͏ʹ ͳΔ
    w εϓϥογϡը໘΍ΞΠίϯͷઃఆ΋Ͱ͖Δ
    w ϒϥ΢βͷόʔͳ͠Ͱશը໘දࣔͰ͖Δ
    w 1$Ͱ΋σεΫτοϓΞϓϦͱͯ͠ΠϯετʔϧͰ͖Δ
    
18. 8FC
    "QQ
    .BOJGFTU
     NBOJGFTUϑΝΠϧΛ࡞ͬͯIUNMͰಡΈࠐΉ͚ͩ // manifest.json { "name": “React Handson", "short_name": "ReactHandson", "start_url": "/", "display": “standalone", "orientation": "any", "background_color": "#f5fcff", "theme_color": "#222222", "icons": [ { "src": "/assets/img/icon_072.png", "sizes": "72x72", "type": "image/png" } ] } <!— index.html —> <link rel="manifest" href=“/manifest.json">
19. 8FC
    "QQ
    .BOJGFTU
     Πϯετʔϧϓϩϯϓτͷ੍ޚ // main.js let deferredPrompt; const button = document.getElementById('install-button'); // Chrome͕ग़͢ϓϩϯϓτΛ཈ࢭ͠ୀආ͓ͯ͘͠ addEventListener('beforeinstallprompt', function(e) { e.preventDefault(); deferredPrompt = e; button.disabled = false; return false; }); // ϘλϯΛΫϦοΫͨ͠Βୀආ͓͍ͯͨ͠ϓϩϯϓτදࣔॲཧΛ࣮ߦ button.addEventListener('click', function() { if(deferredPrompt !== undefined) { deferredPrompt.prompt(); deferredPrompt = null; } });
20. ͦͷଞ w 1VTI
    "1*
    w ϓογϡ௨஌
    w #BDLHSPVOE
    4ZOD
    "1*
    w όοΫάϥ΢ϯυಉظ
    w 8FC
    "VUIFOUJDBUJPO
    "1*
    w ೝূͷࣗಈԽ
     w 1BZNFOU
    3FRVFTU
    "1*
    w ܾࡁը໘ͷڞ௨6*
    w *NBHF
    $BQUVSF
    "1*
    w Χϝϥ΁ͷΞΫηε
    w 8FC
    4IBSF
    "1*
    w 4/4γΣΞͷڞ௨6*
21. 18"ؔ࿈πʔϧ w 18"
    #VJMEFS
    w .JDSPTPGU੡
    w طଘαΠτΛΠϯϓοτʹNBOJGFTU΍TXKTͷ਽ܗΛੜ੒
    w 8PSLCPY
    w (PPHMF੡
    w $BDIF؅ཧΛ༰қʹ͢ΔϥΠϒϥϦ
    w ࠾༻ࣄྫΛΑ͘ฉ͘
    
22. ·ͱΊ
    
23. 18"ͷ͍͍ͱ͜Ζ w ωΠςΟϒ
    PS
    8FCΛݕ౼͢Δࡍͷબ୒ࢶ͕֦େͨ͠
    w ఏڙ͍ͨ͠αʔϏεͷੑ࣭ʹΑͬͯ͸ΞϓϦͱ8FCͷ͍͍ͱ͜ औΓ͕Ͱ͖Δ
    w Ұ෦ͷػೳ͚ͩͰ΋Ϣʔβମݧͷ޲্ʹͭͳ͛Δ͜ͱ͕Ͱ͖Δ
    
24. 18"ͷ՝୊ w ར༻Մೳͳϒϥ΢β੍͕ݶ͞Εͨػೳ͕ଟ਺
    w ೔ຊͰ͸J04Ͱ࢖͑Δ͔Ͳ͏͔ͷӨڹ͕େ͖͍
    w ·ͩϊ΢ϋ΢͕গͳ͍ͷͰϋϚΓͲ͜Ζ΋ଟ͍
    w Ωϟογϡઓུ
    w J04Ͱͷ໭ΔϘλϯ໰୊
    w ϓογϡ௨஌ڐՄͷλΠϛϯά
    
25. ·ͱΊ w "1*ͷൃలʹΑΓ8FCͰͰ͖Δ͜ͱ͕֦େͨ͠
    w ͦΕΒΛ׆༻ͯ͠ϢʔβମݧΛ޲্ͤͨ͞ΞϓϦ͕18"
    w Կ͕Ͱ͖Δ͔ཧղ͠ద੾ʹ࢖͍෼͚Δ͜ͱ͕େ੾
    w ݱঢ়͸ະରԠϒϥ΢β΋ଟ͍͕ࠓޙʹ޲͚ͯ΢Υον͍ͯ͘͠ ΂͖
    
26. ͋Γ͕ͱ͏͍͟͝·ͨ͠