PWAͰԿ͕Ͱ͖ΔΑ͏ʹͳΔͷ͔ ॳՆͷJavaScriptࡇ 2018.5.19 tipo159

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

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/

PWA͕ग़͖ͯͨഎܠ • Ұൠͷਓʑ͕৽͍͠NativeAppΛ΄ͱΜͲΠϯετʔϧ͠ͳ͍ͱ͍͏ௐࠪ݁Ռ ϞόΠϧΞϓϦͷϒʔϜऴᖼͱɺͦͷ࣍ʹདྷΔ΋ͷcΞυϏUXಓ৔ https://blogs.adobe.com/creativestation/web-the-death-of-the- standalone-app-and-what-comes-next • ৽ڵࠃͰ͸ϞόΠϧωοτϫʔΫ͕े෼੔උ͞Ε͍ͯͳ͍ͨΊɼ • WebApp࣮ߦதʹωοτϫʔΫ͕੾அ • NativeAppΛSDΧʔυܦ༝Ͱ͔͠ΠϯετʔϧͰ͖ͳ͍ 4

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

ϕʔεϥΠϯ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

Service Workerͱ͸ w ϒϥ΢β͕8FCϖʔδͱ͸ผʹόοΫάϥ΢ϯυͰ࣮ߦ͢ΔεΫϦ ϓτ w Webϖʔδ΍ϢʔβͷΠϯλϥΫγϣϯΛඞཁͱ͠ͳ͍ػೳΛఏ ڙ w ϓϦΩϟογϡ w ϥϯλΠϜΩϟογϯά w όοΫάϥϯυಉظ w ϓογϡ௨஌ʢSafari͸ະαϙʔτʣ 7

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

Web App Manifestͱ͸ w ϞόΠϧ୺຤ͷϗʔϜεΫϦʔϯʹPWAΛදࣔ͢Δํ๏Λ੍ޚ͠ɺϢʔ βʔ͕ىಈ͢ΔURL΍ىಈ࣌ͷ֎؍ͳͲΛࢦఆ͢ΔJSONܗࣜͷϑΝΠϧ w ࢦఆͰ͖Δ߲໨ʢҰ෦ʣ w ਖ਼໊ࣜশʢඞਢʣ w ϗʔϜεΫϦʔϯʹදࣔ͢Δ໊শʢඞਢʣ w ىಈ࣌ͷURL w ΞΠίϯ w εϓϥογϡը໘ w ςʔϚΧϥʔ w ىಈ࣌ͷελΠϧ w ϑϧεΫϦʔϯɼελϯυΞϩʔϯɼϒϥ΢β 9

ࢀߟɿ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

ࢀߟɿHNPWA Time to interactiveͷ݁Ռ Ұ෦ൈਮ 11 'JSFCBTF 7JQFS 1SFBDU 3FBDU "OHVMBS 7VF 'BUFS( &NFSHJOH

໛ൣత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

໛ൣతProgressive Web App Checklist(2/4) w ϢʔβʔΤΫεϖϦΤϯε w ίϯςϯπΛϖʔδϩʔυதʹδϟϯϓͤ͞ͳ͍ w Πϝʔδ΍޿ࠂͷαΠζΛࢦఆ͓ͯ͘͠ w ৄࡉϖʔδ͔ΒϦετϖʔδʹ໭Δͱ͖͸εΫϩʔϧҐஔΛอ࣋ w ςΩετೖྗ࣌ʹೖྗཝ͕εΫϦʔϯΩʔϘʔυͰӅ͞Εͳ͍ w ελϯυΞϩʔϯ΍ϑϧεΫϦʔϯϞʔυͰ΋ίϯςϯπڞ༗Ͱ ͖Δ w ίϯςϯπڞ༗΍URLΛίϐʔ͢ΔͨΊͷϘλϯΛ௥Ճ w εϚϗɼλϒϨοτ΍σεΫτοϓʹରͯ͠Ϩεϙϯγϒ w ΞϓϦͷΠϯετʔϧΛա౓ʹଅ͞ͳ͍ w ϗʔϜεΫϦʔϯ΁ͷ௥Ճ͕Πϯλʔηϓτ͞Ε͍ͯΔ 13

໛ൣతProgressive Web App Checklist(3/4) w ύϑΥʔϚϯε w ࠷ॳͷϩʔυ͕3GճઢͰ΋ඇৗʹ଎͍ w Nexus 5 3GճઢͰඵҎԼʢϕʔεϥΠϯͰ͸10ඵҎԼʣ w Ωϟογϯά w αΠτ͕ΩϟογϡϑΝʔετωοτϫʔΩϯάΛ࢖༻ w αΠτ͕ΦϑϥΠϯͰ͋Δ͜ͱΛద੾ʹϢʔβʹ௨஌ 14

໛ൣత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