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

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

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

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

5f533aeab28ed4f70c26e336e71296f7?s=128

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