PWAで何ができるようになるのか / What does PWA do

PWAとその他の技術との比較
PWAが出てきた背景
Progressive Web App Checklist
Service Workerとは
Web App Manifestとは

Transcript

1. PWAͰԿ͕Ͱ͖ΔΑ͏ʹͳΔͷ͔
   ॳՆͷJavaScriptࡇ 2018.5.19 tipo159
2. PWAͱ͸ • Google͕೥ʹఏএͨ͠Native Appʹ͍ۙWeb Appͷ֓೦
   • W3C΍WHATNGͰඪ४Խ͞Εͯ͸͍ͳ͍
   • iOS 11.3, macOS 10.13.4, Windows 10 1803(April 2018 Update)ͰPWAΛαϙʔτ
   • Progressive Web Apps
   https://developers.google.com/web/progressive-web- apps/
   ʹ͸ҎԼͷಛ௃Λ࣋ͭ8FC
   "QQͱఆٛ͞Ε͍ͯΔ
   • ৴པੑ͕͋Δ
   • ͙͢ʹϩʔυ͞ΕͯɼͲΜͳωοτϫʔΫ৚݅Ͱ΋downasaur αʔϏε͕ఏڙͰ͖ͳ͍͜ͱΛؙࣔ͢ʹࣼ Ίઢ͕ೖͬͨڪཽͷਤ ͕දࣔ͞Εͳ͍
   • ଎͍
   • Ϣʔβͷૢ࡞ʹରͯ͠εϜʔζͳΞχϝʔγϣϯ΍εΫϩʔϧͰ͢͹΍͘൓Ԡ͢Δ
   • ΤϯήʔδϯάʢਓΛऒ͖͚ͭΔʣ
   • ຅ೖͰ͖ΔϢʔβΤΫεϖϦΤϯεͰ࣮ߦ͢ΔσόΠεͷNative AppͷΑ͏ʹײ͡ΒΕΔ 2
3. PWAͱͦͷଞͷٕज़ͱͷൺֱ 3 SPA (Single-page Application) AMP (Accelerated Mobile Pages) PWA (Prgrssive Web Apps) ReactNative NativeScript Weex Native App ΦϑϥΠϯ
   ಈ࡞ ˚ º ˓ ˓ ˓ Πϯετʔϧ
   ཁ൱ ෆཁ ෆཁ ෆཁ ඞཁ ඞཁ ϗʔϜεΫϦʔ ϯ΁ͷ௥Ճํ๏ ϒοΫϚʔΫ ϒοΫϚʔΫ ΞΠίϯ ΞΠίϯ ΞΠίϯ λεΫϦετ
   දࣔ ϒϥ΢β ϒϥ΢β ݸผApp ݸผApp ݸผApp UI HTML, CSS HTML, CSS αϒηοτ HTML, CSS Native Components Native API ΞϓϦهड़ݴޠ JavaScript JavaScript JavaScript JavaScript Swift, Obj-C, Kotlin, Java, etc WPAͱAMPΛ૊Έ߹ΘͤͨPWAMP΋ఏҊ͞Ε͍ͯΔ
   https://www.smashingmagazine.com/2016/12/progressive-web-amps/
4. PWA͕ग़͖ͯͨഎܠ • Ұൠͷਓʑ͕৽͍͠NativeAppΛ΄ͱΜͲΠϯετʔϧ͠ͳ͍ͱ͍͏ௐࠪ݁Ռ ϞόΠϧΞϓϦͷϒʔϜऴᖼͱɺͦͷ࣍ʹདྷΔ΋ͷ
   c
   ΞυϏUXಓ৔
   https://blogs.adobe.com/creativestation/web-the-death-of-the- standalone-app-and-what-comes-next • ৽ڵࠃͰ͸ϞόΠϧωοτϫʔΫ͕े෼੔උ͞Ε͍ͯͳ͍ͨΊɼ
   • WebApp࣮ߦதʹωοτϫʔΫ͕੾அ • NativeAppΛSDΧʔυܦ༝Ͱ͔͠ΠϯετʔϧͰ͖ͳ͍ 4
5. Progressive Web App Checklist w PWAͷΤΫεϖϦΤϯεΛϕʔεϥΠϯ͔Β໛ൣత·Ͱʹ͢Δଟ਺ͷ؍఺͕͋Δͨ ΊɼϕʔεϥΠϯProgressive Web App Checklistͱ໛ൣతProgressive Web App ChecklistʹผΕ͍ͯΔ
   w LighthouseʢChrome֦ு·ͨ͸ίϚϯυϥΠϯπʔϧʣͰ߲໨ͷνΣοΫ͕Մ ೳ
   w Chrome 60͔Β͸σϕϩούʔπʔϧʹ౷߹͞ΕͨͨΊΠϯετʔϧෆཁ
   w ϕʔεϥΠϯProgressive Web App Checklistͷ߲໨ͷ಺߲໨ͱॻ͔Ε͍ͯΔ͕ɼ࠷৽ͷϕʔεϥ ΠϯProgressive Web App Checklistʹ͸छྨ͔͠ॻ͔Ε͍ͯͳ͍ͨΊɼυΩϡϝϯτͷߋ৽͕ؒʹ ߹͍ͬͯͳ͍ʁ
   https://developers.google.com/web/progressive-web-apps/checklist https://developers.google.com/web/tools/lighthouse/ 5
6. ϕʔεϥΠϯProgressive Web App Checklist w HTTPSͰαΠτΛఏڙ Lighthouse
   w λϒϨοτ΍ϞόΠϧσόΠεʹରͯ͠Ϩεϙϯγϒ Lighthouse
   w ͢΂ͯͷApp URLΛΦϑϥΠϯͰ΋ϩʔυͰ Lighthouse
   w Service WorkerΛ࢖࣮ͬͯݱ
   w ϗʔϜεΫϦʔϯʹ௥Ճ͢ΔͨΊͷϝλσʔλΛఏڙ Lighthouse
   w Web App ManifestϑΝΠϧΛ௥Ճ
   w 3GճઢͰ΋࠷ॳͷϩʔυ͕े෼଎͍ Lighthouse
   w Ϋϩεϒϥ΢βͰಈ࡞
   • Chrome, Edge, Firefox, Safari w ϖʔδભҠ͕஗͍ճઢʹΑͬͯϒϩοΫ͞Εͳ͍
   w ίϯςϯπ͕ͳ͍࿮૊Έ͚ͩͷϖʔδʹભҠͤ͞Δํ͕ྑ͍
   w શͯͷϖʔδ͕URLΛ࣋ͭ 6
7. Service Workerͱ͸ w ϒϥ΢β͕8FCϖʔδͱ͸ผʹόοΫάϥ΢ϯυͰ࣮ߦ͢ΔεΫϦ ϓτ
   w Webϖʔδ΍ϢʔβͷΠϯλϥΫγϣϯΛඞཁͱ͠ͳ͍ػೳΛఏ ڙ
   w ϓϦΩϟογϡ
   w ϥϯλΠϜΩϟογϯά
   w όοΫάϥϯυಉظ
   w ϓογϡ௨஌ʢSafari͸ະαϙʔτʣ 7
8. Service Workerͷ࡞੒ํ๏ w react-pwa΍vuejs-templates/pwaͳͲͷϑϨʔϜϫʔΫΛ࢖༻
   w GoogleͷWorkboxΛ࢖༻
   w sw-precache΍sw-toolboxͷޙܧऀ
   w Githubͷελʔͷ਺͸sw-precache΍sw-toolbox͕ಥग़͍ͯ͠Δ͕ɼ৽ن։ ൃͳΒWorkbox͕͓͢͢Ί
   w ϓογϡ௨஌͸αϙʔτ͍ͯ͠ͳ͍
   https://developers.google.com/web/tools/workbox/ 8
9. Web App Manifestͱ͸ w ϞόΠϧ୺຤ͷϗʔϜεΫϦʔϯʹPWAΛදࣔ͢Δํ๏Λ੍ޚ͠ɺϢʔ βʔ͕ىಈ͢ΔURL΍ىಈ࣌ͷ֎؍ͳͲΛࢦఆ͢ΔJSONܗࣜͷϑΝΠϧ
   w ࢦఆͰ͖Δ߲໨ʢҰ෦ʣ
   w ਖ਼໊ࣜশʢඞਢʣ
   w ϗʔϜεΫϦʔϯʹදࣔ͢Δ໊শʢඞਢʣ
   w ىಈ࣌ͷURL
   w ΞΠίϯ
   w εϓϥογϡը໘
   w ςʔϚΧϥʔ
   w ىಈ࣌ͷελΠϧ
   w ϑϧεΫϦʔϯɼελϯυΞϩʔϯɼϒϥ΢β 9
10. ࢀߟɿHNPWAͱ͸ w PWAͰ࡞ͬͨHacker NewsϦʔμʔͷ࣮૷ྫΛूੵ͢ΔαΠτ
    IUUQTIOQXBDPN
    w ࣮૷ຖʹԼهΛूੵ
    w LighthouseͷPWAείΞ
    w Emerging 400Kbps 3G
    ஗Ԇ400ms ͱFast 3G 1.6Mbps 3G
    ஗Ԇ300ms ͷճઢͰΠϯλϥ ΫςΟϒʹͳΔ·Ͱͷ࣌ؒ
    w ϑϨʔϜϫʔΫUIϥΠϒϥϦ
    w Ϟδϡʔϧόϯυϥ WebpackͳͲ
    • Service Worker w ύϑΥʔϚϯεύλʔϯʢύϑΥʔϚϯε޲্ͷͨΊͷࢪࡦʣ
    w αʔόʔαΠυϨϯμϦϯά
    w ࢖༻API Hacker News Firebase API͔Node-hnapi
    w ϗεςΟϯά؀ڥ 10
11. ࢀߟɿHNPWA Time to interactiveͷ݁Ռ Ұ෦ൈਮ 11      'JSFCBTF 7JQFS 1SFBDU 3FBDU "OHVMBS 7VF 'BUFS
    ( &NFSHJOH
12. ໛ൣతProgressive Web App Checklist(1/4) w ΠϯσοΫεՄೳͱιʔγϟϧ
    w αΠτͷίϯςϯπΛGoogleͰΠϯσοΫε
    w Schema.orgͷϝλσʔλΛՄೳͰ͋Ε͹ఏڙ
    w ιʔγϟϧϝλσʔλΛՄೳͰ͋Ε͹ఏڙ
    w Facebook΍Twitter༻ͷϝλσʔλ
    w ΧϊχΧϧURLΛඞཁͰ͋Ε͹ఏڙ
    w ෳ਺ͷURLͰಉ͡ίϯςϯπΛఏڙ͍ͯ͠Δ৔߹ͷΈ
    w History APIΛ࢖༻
    w https://example.com/#!user/26601
    ͳͲͷURLΛ࢖༻͠ͳ͍ 12
13. ໛ൣతProgressive Web App Checklist(2/4) w ϢʔβʔΤΫεϖϦΤϯε
    w ίϯςϯπΛϖʔδϩʔυதʹδϟϯϓͤ͞ͳ͍
    w Πϝʔδ΍޿ࠂͷαΠζΛࢦఆ͓ͯ͘͠
    w ৄࡉϖʔδ͔ΒϦετϖʔδʹ໭Δͱ͖͸εΫϩʔϧҐஔΛอ࣋
    w ςΩετೖྗ࣌ʹೖྗཝ͕εΫϦʔϯΩʔϘʔυͰӅ͞Εͳ͍
    w ελϯυΞϩʔϯ΍ϑϧεΫϦʔϯϞʔυͰ΋ίϯςϯπڞ༗Ͱ ͖Δ
    w ίϯςϯπڞ༗΍URLΛίϐʔ͢ΔͨΊͷϘλϯΛ௥Ճ
    w εϚϗɼλϒϨοτ΍σεΫτοϓʹରͯ͠Ϩεϙϯγϒ
    w ΞϓϦͷΠϯετʔϧΛա౓ʹଅ͞ͳ͍
    w ϗʔϜεΫϦʔϯ΁ͷ௥Ճ͕Πϯλʔηϓτ͞Ε͍ͯΔ 13
14. ໛ൣతProgressive Web App Checklist(3/4) w ύϑΥʔϚϯε
    w ࠷ॳͷϩʔυ͕3GճઢͰ΋ඇৗʹ଎͍
    w Nexus 5 3GճઢͰඵҎԼʢϕʔεϥΠϯͰ͸10ඵҎԼʣ
    w Ωϟογϯά
    w αΠτ͕ΩϟογϡϑΝʔετωοτϫʔΩϯάΛ࢖༻
    w αΠτ͕ΦϑϥΠϯͰ͋Δ͜ͱΛద੾ʹϢʔβʹ௨஌ 14
15. ໛ൣతProgressive Web App Checklist(4/4) w ϓογϡ௨஌
    w Ϣʔβʹϓογϡ௨஌ͷઆ໌Λ͔ͯ͠ΒڐՄΛಘΔ
    w Ϣʔβʹϓογϡ௨஌ΛΦϯʹ͢ΔΑ͏ڧཁ͠ͳ͍
    w ڐՄΛٻΊΔͱ͖ʹ͸εΫϦʔϯΛ҉͘͢Δ
    w ϓογϡ௨஌͸λΠϜϦΟɾਖ਼֬ɾؔ࿈
    w λΠϜϦΟ
    
    Ϣʔβ͕ཁٻ͔ͨ࣌͠Πϕϯτ͕ى͖ͨ࣌
    w ਖ਼֬
    
    ௨஌ʹج͍ͮͯߦಈͰ͖Δඞཁ࠷খݶͷ৘ใ
    w ؔ࿈
    
    Ϣʔβ͕஌Γ͍ͨਓ΍ࣄ৅ʹؔ࿈
    w ௨஌ͷڐՄͱېࢭΛ͍ͭͰ΋ઃఆͰ͖Δ
    w ௥Ճͷػೳ
    w Credential Management APIΛ࢖ͬͯσόΠεΛ·͍ͨͰϩάΠϯՄೳ
    w Payment Request APIΛ࢖ͬͯࢧ෷͍Մೳ 15