$30 off During Our Annual Pro Sale. View Details »

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

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

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

tipo159

May 19, 2018
Tweet

More Decks by tipo159

Other Decks in Programming

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