ネイティブアプリの代わりにPWAで戦う選択肢 / pwa-instead-of-native

PWAのメリットが強くなる時ってどんなときか考えた。
今回はネイティブアプリの代わりにPWAで頑張る話したけど、ネイティブアプリのありなしに関わらずWebを良くしていきたい。

紹介した自作PWA
- http://ease.netlify.com/ (TODOリスト)
- http://mottox2.com/ (ブログ)

Transcript

1. NativeΞϓϦͷ୅ΘΓʹ PWAΞϓϦͰઓ͏બ୒ࢶ 2018.05.24 PWA Beginners #4 - @mottox2 ͲΜͳ࣌ʹPWAத৺ͷ։ൃΛબ୒Ͱ͖Δͷ͔
2. @mottox2 • React, Ruby on RailsΛத৺ʹWebαʔϏε։ൃ͍ͯ͠·͢ • Pull RequestͷϨϏϡʔͱٕज़બఆͷ͓ख఻͍΋͍ͯ͠·͢ • WebͷՄೳੑΛ৴͍͖͍ͯͨ͡λΠϓͷਓؒͰ͢ɻ • ϒϩά΍ͬͯ·͢(esa.io + note.mu + Gatsby) => mottox2.com Freelance web engineer & designer Yuki Takemoto
3. ࢲͱPWA ease.netlify.com Desktop޲͚ʹ࡞ͬͨToDoΞϓϦ • React + TypeScript • Service Worker • IndexedDB (Dexie.js) • Web App Manifest • Add to Home Screen • Offline
4. ࢲͱPWA mottox2.com ݸਓͷΤϯδχΞϒϩά • React (Gatsby) • Service Worker • Web App Manifest
5. PWA͸ωΠςΟϒΞϓϦΛஔ͖׵͑Δ΋ͷͰ͸ͳ͍ લఏ
6. PWA͸WebͰΑ͍ମݧΛੜΈग़͢ΞϓϦέʔγϣϯ લఏ
7. ͩͱͯ͠΋ɺωΠςΟϒΞϓϦͷ୅ΘΓͱͯ͠ͷ PWAͷՄೳੑΛ୳ͬͯΈ͍ͨ
8. 1. Α͋͘ΔωΠςΟϒΞϓϦ։ൃͷࣦഊΛආ͚͍ͨa 2. ετΞͷ৹ࠪΛͬ͢ඈ͹͍ͨ͠a 3. WebͷάϩʔεʹྗΛೖΕ͍ͨa 4. ਓ͕͍ͳ͍͠ɺ࠾༻ͷݟࠐΈ΋ͳ͍a 5. ର৅Ϣʔβʔ͕iOSΑΓAndroidͷํ͕ଟͦ͏a ͨͱ͑͹͜Μͳ࣌
9. 1. Α͋͘ΔωΠςΟϒΞϓϦ։ൃͷࣦഊΛආ͚͍ͨa ͨͱ͑͹͜Μͳ࣌ • NativeAppΛ͚ͭͬͨ͘ͲGooglePlayΛݟΔͱDL਺1000ҎԼͷύλʔϯΛݟΔ • ಋઢͷऑ͞ɺϝϦοτૌٻɺ௿ධՁʹΑΔεϧʔʹΑΔѱ॥؀a • ͦ΋ͦ΋NativeΞϓϦ͕ඞཁͳཁ݅ͳͷ͔ʁͱ͍͏࿩΋͋Δɻ • NativeAppͷ৽نμ΢ϯϩʔυ਺͸೥ʑݮগ͍ͯ͠Δɻ[ཁग़య] • ϋʔυϧ͕ߴ͍ʹ΋͔͔ΘΒͣɺยखؒͰϦϦʔεͯ͠΋উෛʹͳΒͳ͍a • ϑΟʔυόοΫճ͢αΠΫϧ͕஗͘ͳΓ͕ͪa • ԾઆݕূΛ͢Δʹ͸ωοΫʹͳΔa • ࠷ۙ͸Code PushͰετΞΛ௨ͣ͞ߋ৽Ͱ͖Δ • ͍͔ͭ͘ͷ఺͸ɺܦݧऀ͕͍Ε͹ճආͰ͖Δ
10. 2. ετΞͷ৹ࠪΛͬ͢ඈ͹͍ͨ͠a ͨͱ͑͹͜Μͳ࣌ • ΞμϧτͳͲ৹ࠪΛ௨աग़དྷͳ͍ΞϓϦa • Ξοϓσʔτʹ௥ैग़དྷͳ͍ΞϓϦa • ৽͍͠ը໘αΠζରԠ΍64bitରԠɺSwiftͷΞοϓσʔτͳͲ޻਺͔͚ͨ͘ͳ͍ ์ஔܥΞϓϦͰਏ͍a • ΞϓϦετΞ্Ͱग़དྷͳ͍ϓϩϞʔγϣϯํ๏Λ࠾༻͍ͨ͠ΞϓϦa • ঺հಛయͱ͔Ξ΢τʹͳͬͨ͸ͣa
11. 3. WebͷάϩʔεʹྗΛೖΕ͍ͨa ͨͱ͑͹͜Μͳ࣌ • Webͩͱ৽نࢪࡦ͕༏ઌ͞Εͯɺඇػೳཁ͕͓݅͟ͳΓʹͳΓ΍͍͢ • PWAରԠͱ͍ͬͯ଎౓্͛Δ͚ͩͰɺKPIվળ͢ΔՄೳੑ΋ • WebΤϯδχΞʹߴ͍Ϩϕϧ͕ٻΊΒΕͯɺ࢓ࣄͷϨϕϧ΋্͕Δ • ৽نࢪࡦ΋࢝Ί΍͍͢a • WebͰ࿅͔ͬͯΒΞϓϦΛ࡞ΕΔa • (APIͷϨεϙϯεܗࣜͷมߋͱ͔ͷ෼ذ͕ݮΔɺෛ࠴ʹͳΓʹ͍͘)
12. 4. ਓ͕͍ͳ͍͠ɺ࠾༻ͷݟࠐΈ΋ͳ͍a ͨͱ͑͹͜Μͳ࣌ • ͍··ͰWeb͔͠΍ͬͯ͜ͳ͔ͬͨͬͯঢ়گͰɺΞϓϦΤϯδχΞΛ࠾༻͢Δͷ͸ ೉͍͠ɻ • AndroidΞϓϦ͕ग़ͤͯͳ͍ձ͕ࣾͨ·ʹ͍Δؾ͕͢Δ • ΞϓϦΤϯδχΞΛޏ͑ͨͱͯ͠΋ɺiOS, AndroidωΠςΟϒͷจ຺ʹԊͬͨUI͕ Ͱ͖Δ͔ʁ • PWAରԠͱ͍ͬͯ଎౓্͛Δ͚ͩͰɺKPIվળ͢ΔՄೳੑ΋ • ਓΛ৽ͨʹ࠾༻͢Δϋʔυϧͷߴ͞
13. 5. ର৅Ϣʔβʔ͕iOSΑΓAndroidͷํ͕ଟͦ͏a ͨͱ͑͹͜Μͳ࣌ • iOS͸ݱ࣌఺ͰWeb Push, Install Prompt͕ະରԠɻ • ੈքతʹ͸AndroidγΣΞ͕େ͖͍ͷͰɺPWAରԠ͕ਐΜͰ͍ΔChromeͷԸܙΛ ड͚΍͍͢͸ͣͩͬͨɻ͕ɺ೔ຊ͸iOS͕ଟ͍ɻ • ಛʹएऀ޲͚αʔϏεͰ͸iOS͕ଟ͘ͳΔ܏޲͕͋Δɻʢܦݧଇʣ • ͨͩɺී௨ͷWebαΠτͱͯ͠͸࢖͑Δɻ
14. • PWAඇର৅Ϣʔβʔ΁ͷΤϯήʔδϝϯτ͕ऑ͘ͳΔ͜ͱΛڐ༰͢Δ • NativeAppͰͳͯ͘PWAͱ͍͏൑அΛͨ͠৔߹ • ύέοτͷؔ܎ͰiOSͷΞοϓσʔτͯ͠ͳ͍ͳͲͷϢʔβʔʹڧ͘Ξϓ ϩʔνग़དྷͳ͍ɻ • ݱঢ়Safari 11.1ͰPush NotificationɺInstall Prompt͕ແޮ • ʮ·ͣ͸ΞʔϦʔΞμϓλʔʹ޲͚ͯଧͭʯΈ͍ͨͳܦӦ൑அ͕ग़དྷΔ͔ʁa • ੒ޭ͢Δࠒʹ͸ɺPWA͕ීٴͯ͠Δ͔͕ۚ͋ΔͷͰΞϓϦΤϯδχΞΛޏ͑͹Α ͍ɻ τϨʔυΦϑΛҙࣝ͢Δ
15. • PWAٕज़܈͸WebͰউෛ͢Δͱ͍͏બ୒ࢶΛ༩͑ͯ͘Εͨɻ • ʮωΠςΟϒΞϓϦΞϓϦΛϦϦʔε͚ͨ͠ͲάϩʔεʹྗΛׂ͚ͳ͔ͬͨʯΈ ͍ͨͳࣦഊΛ๷͛Δɻ • ʮNative or Webʯͱͳͬͨ࣌ʹ໎͍ͳ͘Web͕બ୒ग़དྷΔͱخ͍͠ PWAͰઓ͏બ୒ࢶ ͳͥPWAͰઓ͏બ୒ࢶ͕ཉ͍͠ͷ͔ʁ
16. • Windows Storeʹ͸ग़ͤΔ (ex. Twitter Lite) • υΩϡϝϯτ΋͋Δɻग़ͨ͠ͱ͜ΖͰͲ͏ͳͷʁͬͯײ͡͸͢Δa • Google Playʹ΋ग़ͤΔ • طଘͷϦϦʔεΞϓϦ͸WebView? • কདྷతʹPWA޲͚ͷTrusted Web Activity͕ఏڙ͞ΕΔɻ(Google I/O 2018Ͱݴͬͯͨ) • App Store͸Apple࣍ୈ ؾʹͳΔϙΠϯτ Google Map Go - https://play.google.com/store/apps/details?id=com.google.android.apps.mapslite&hl=ja Twitter Lite - https://play.google.com/store/apps/details?id=com.twitter.android.lite&hl=ja ※ ࠃ಺ͷ୺຤ʹ͸ରԠ͍ͯ͠ͳ͍ Google Playʹग़͍ͯΔPWAͷྫ Progressive Web Apps in the Microsoft Store - https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps/microsoft-store ετΞʹग़ͤͳ͍Μ͡Όͳ͍͔ʁ
17. • Pixiv chatstory͸޻෉͍ͯ͠Δ ؾʹͳΔϙΠϯτ Πϯετʔϧͯ͘͠ΕΔਓ͍Δͷʁ
18. • ϖʔδߏ଄೉͍͠ɻ • WebͱAppͷ྆ํͷੑ࣭Λ࣋ͬͨσβΠφʔٽ͔ͤͳߏ଄ɻ • SEO্ͷϖʔδߏ଄΋ߟྀ͕ඞཁɻ • ϞόΠϧϑΝʔετͳϨεϙϯγϒɻa • ωΠςΟϒ෩UIΛ࠾༻͢ΔͳΒOnsen UI, Polymer, IonicͳͲͷબ୒ࢶɻ • ଟ͘ͷέʔεͰSPAඞਢɻ • ϨεϙϯεΛૣ͘͢Δඞཁɻa • HTTP/2, Resource Hints, Inline CSS, ը૾ͷ࠷దԽͳͲͳͲ • ʮWebϖʔδ଎౓վળΨΠυʯ͕͓͢͢Ί Ͳ͏΍ͬͯ࢝ΊΔ͔ʁ ࣗ෼͕ߟ͑Δͱ͜Μͳײ͡
19. • ෦෼తʹApplication Likeͳը໘ʹ͍ͯ͘͠ͷ͕ݱ࣮ղͳؾ͕͍ͯ͠Δ • ωΠςΟϒΞϓϦͷ୅ΘΓʹεϚϗWebΛPWAʹϦϓϨʔε͢Δͷ͋Γ • Twitter Lite͸εϚʔτϑΥϯ޲͚αΠτ͚ͩ੾Γग़͢ • starbucks.com ͸ϩάΠϯޙͷϖʔδͷΈ • Mobile First IndexͰͲ͏͍͏൑ఆ͕ͳ͞ΕΔ͔Α͘෼͔Βͳ͍ • طଘϖʔδΛPWAʹΑͤΔͱ͍͏ΑΓ͸ɺ৽نίʔυͰ࡞Γม͍͑ͯ͘ํ͕ݱ࣮ త͔΋ • CSS, JSपΓͷ࠷దԽ͕ղܾग़དྷΔͳΒ͍͍͚Ͳɺ͜Ε͕೉͍͠ɻ • ಛఆۀछͷWeb App͸ੵۃతʹPWAʹد͍ͤͯ͘ͱΑͦ͞͏ɻ • ਓੜͷઅ໨ʹඞཁ͚ͩͲɺ௕ظؒ࢖͏αʔϏεͰ͸ͳ͍ײ͡ͷɻਓࡐͱ͔ ωΠςΟϒΞϓϦͷͳ͍طଘࣄۀͰ͸ʁ ิ଍ ΋ͪΖΜΞϓϦͬΆ͘͢Δඞཁ͸ͳͯ͘ɺSWͳͲ෦෼ରԠ͢Δ͚ͩͰ΋Α͍ɻ
20. ັྗతͳWebΛ๻ΒͰ࡞͍͖ͬͯ·͠ΐ͏ ޙ೔ɺิ଍ΛϒϩάͰॻ͔͘΋͠Εͳ͍ͷͰݟͯͶʂ mottox2.com