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

やっていこう。PWA

 やっていこう。PWA

「PWA Night vol.4 ~PWAのミライや活用方法をみんなで考えよう~」にて登壇した発表資料です。

https://pwanight.connpass.com/event/128434

oliver

May 15, 2019
Tweet

More Decks by oliver

Other Decks in Technology

Transcript

  1. ࣗݾ঺հ # Daiki Minakawa ( @oliver_diary ) - Fringe81 Application

    Developer - ࠷ۙ͸Elmॻ͍ͯ·͢ - ৽ଔ̎ϲ݄໨Ͱ͢ - Main : Server Sideʢجຊతʹશ෦΍Δʣ - RailsΛ࢖ͬͯݸਓ։ൃΛ͍ͯ͠Δ
  2. PWAͱ͸ • Progressive Web Apps ͷུ • ϞόΠϧʹݶΒͣσεΫτοϓͷ྆ํͰΠϯετʔϧՄೳ • ΞϓϦͱಉ౳ͷମݧΛఏڙ

    • Reliable, Integrated, Fast, Engaging ͳͲͷUXΛ݉Ͷඋ͑ͨ WebΞϓϦͷ͜ͱͰ͋Γɺಛఆͷٕज़ͷ͜ͱͰ͸ͳ͍ FIRE !!
  3. PWAͱ͸ • Progressive Web Apps: Escaping Tabs Without Losing Our

    Soul • https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/ • 2015೥6݄ͷهࣄ • Progressive Web Appsͷίϯηϓτ͕ॻ͔Ε͍ͯΔ • PWAʹΑͬͯʮdeliver an even better user experience
 ʢ͞Βʹ༏ΕͨϢʔβʔΤΫεϖϦΤϯεΛ࣮ݱʣʯ
  4. PWAͱ͸ • Progressive Web Apps: Escaping Tabs Without Losing Our

    Soul • https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/ • 2015೥6݄ͷهࣄ • Progressive Web Appsͷίϯηϓτ͕ॻ͔Ε͍ͯΔ • PWAʹΑͬͯʮdeliver an even better user experience
 ʢ͞Βʹ༏ΕͨϢʔβʔΤΫεϖϦΤϯεΛ࣮ݱʣʯ
  5. ࠷ۙͷPWAʢAndroidʣ • Google Chrome 56ʢ2017೥2݄ʣ • WebAPKʹΑͬͯWebΛΞϓϦԽͰ͖ΔΑ͏ʹͳΔ • Google Chrome

    68ʢ2018೥7݄ʣ • Add to Home Screen (A2HS) ͔Β Mini-infobar ΁ • Google Chrome 72ʢ2019೥1݄ʣ • Trusted Web Activityʢޙड़ʣ
 PWAΛ Google Play ʹΞϓϦͱͯ͠ొ࿥͢Δ͜ͱ͕Ͱ͖Δʂ A2HS Mini-infobar
  6. ࠷ۙͷPWAʢPC൛Chromeʣ • Google Chrome 67ʢ2018೥5݄ʣ • Chrome OSΛPWAʹରԠ • Google

    Chrome 70ʢ2018೥10݄ʣ • Windows / LinuxΛPWAʹରԠ • Google Chrome 73ʢ2019೥3݄ʣ • macOSΛPWAʹରԠ
  7. ࠷ۙͷPWAʢiOSʣ • iOS11.3ʢ2018೥1݄ʣ • iOS͕PWAʹରԠ • Service Worker ͕࢖͑ΔΑ͏ʹͳͬͨ •

    ʮϗʔϜը໘ʹ௥Ճʯ͔ΒΠϯετʔϧՄೳ • OauthϩάΠϯ࣌ʹSafariʹඈ͹͞ΕΔ ͳͲͳͲ ͜͜ΑΓઌʹਐΊͳͯ͘ࢮ๢
  8. ࠷ۙͷPWAʢiOSʣ • iOS12.2ʢ2019೥3݄ʣ • Web Share API ʹରԠ • δΣενϟʔʹΑΔφϏήʔγϣϯ


    ʢεϫΠϓͰਐΉɺ໭ΔͳͲʣ • ϚϧνλεΫ࣌ʹ΋ঢ়ଶΛҡ࣋ʢOauthϩάΠϯ͕Մೳʹͳͬͨʣ ϩάΠϯͰ͖ΔΑ͏ʹͳͬͨʂ ͳͲͳͲ
  9. ࣮ࡍͷPWA͸ͲΜͳײ͡ͳͷ͔ • Progressive Web App Checklist • https://developers.google.com/web/progressive-web-apps/checklist • جຊతͳཁ݅͸͜͜ʹॻ͔Ε͍ͯΔ

    • HTTPSඞਢͩͱ͔ɺϞόΠϧϑϨϯυϦʔͩͱ͔ɺϗʔϜը ໘௥Ճͩͱ͔ɺΩϟογϯάͩͱ͔ɺ݁ߏͨ͘͞Μ͋Δɻ
  10. ࣮ࡍͷPWA͸ͲΜͳײ͡ͳͷ͔ • PWAͷඞཁ৚݅Ͱ͸ͳ͍͚ͲWebͰग़དྷΔ͜ͱ • Push௨஌ • Web Share • Payment

    Request • Web Bluetooth • Χϝϥ΍ϚΠΫͷىಈ ͳͲͳͲ • Ґஔ৘ใΛऔಘ • ΦʔσΟΦ΍ϏσΦͷ࠶ੜ੍ޚ • Ճ଎౓ηϯαʔɾδϟΠϩηϯαʔ • ωΠςΟϒΞϓϦͷΠϯετʔϧ֬ೝ
 (getInstalledRelatedApps)
  11. PWAʹ·ͭΘΔٕज़ͨͪ • ཁ݅ • ಡΈࠐΈ͕ॠ࣌ʹߦΘΕΔ͜ͱ • σʔλ͸࠷খݶͰ͋Δ͜ͱ • ੩తΞηοτ͸ϩʔΧϧͷΩϟογϡΛ༻͍Δ͜ͱ •

    ίϯςϯπͱφϏήʔγϣϯ͸෼཭͞Ε͍ͯΔ͜ͱ • ϖʔδݻ༗ͷίϯςϯπͷऔಘͱද͕࣮ࣔ૷͞Ε͍ͯΔ͜ͱ • ඞཁʹԠ͡ɺಈతίϯςϯπͷΩϟογϡΛߦ͏͜ͱ
  12. PWAʹ·ͭΘΔٕज़ͨͪ • Ionic • ελʔλʔςϯϓϨʔτϨϕϧͰPWAΛαϙʔτ͍ͯ͠Δ • Flutter • Google I/O

    2019 ͰPWAʹରԠ͍ͯ͘͠ํ਑͕ൃද • Nuxt.js • ݸਓతʹΦεεϝɻ࠷ۙ͸͍ͭ΋͓ੈ࿩ʹͳ͍ͬͯΔɻ • Workbox ͕಺แ͞Ε͍ͯΔͨΊѻ͍΍͍͢ɻOneSignal Λ࢖ͬͨϓογϡ௨஌ʹ΋ରԠɻ
  13. PWAʹ·ͭΘΔٕज़ͨͪ • TWA (Trusted Web Activity) • https://medium.com/@firt/google-play-store-now-open-for-progressive- web-apps-ec6f3c6ff3cc •

    Android ൛ Chrome 72 ͷϦϦʔεͱͱ΋ʹਖ਼ࣜʹར༻Մೳ • Chrome ͕ఏڙ͢ΔػೳͰ͋Δ TWA ্Ͱಈ͘ • https://www.slideshare.net/RyuShindo/20190320-pwanight-pwa-to-apk
  14. PWAʹ·ͭΘΔٕज़ͨͪ • TWA (Trusted Web Activity) • खॱ͸গ͠ଟ͍͕ɺ͜ΕʹΑΓPWAΛGoogle Play Storeʹࡌ͚ͬΒΕΔʂ

    • PWAΛAPKʹ͢Δ͜ͱ͕Ͱ͖Δʂ • Chromeͱηογϣϯ΍ετϨʔδɺΩϟογϡͳͲ͸ڞ༗ • PWA͚ͩͰ͸Χόʔ͖͠Εͳ͘ͳͬͨ෦෼͕ग़͖ͯͨͱ͖ʹɺ·ͨθϩ͔ Β։ൃ͢Δඞཁੑ͕গͳ͘ͳΔ
  15. ઌ೔ͷ Google I/O 2019 ʹͯ • Web Share Target API

    v2 • ϑΝΠϧ΋ڞ༗Ͱ͖ΔΑ͏ʹͳΔ • Shape Detection API • إݕग़ɺόʔίʔυݕग़ɺςΩετݕग़ͳͲ͕Մೳʹ • Badging API • ΞϓϦΞΠίϯʹόοδΛ෇༩͢Δ͜ͱ͕Մೳʹ
  16. ઌ೔ͷ Google I/O 2019 ʹͯ • Wake Lock API •

    ૢ࡞͍ͯ͠ͳ͍࣌ͷը໘ͷϩοΫΛ๷͙ • Native File System API • ϩʔΧϧͷϑΝΠϧΛΘ͟Θ͟Ξοϓϩʔυͯ͠ɺมߋ͔ͯ͠Βμ΢ϯϩʔυ͢ Δͱ͍͏खؒΛແͤ͘Δ • Serial API • ϚΠΫϩίϯτϩʔϥ΍3DϓϦϯλͳͲͱ௨৴Ͱ͖ΔΑ͏ʹͳΔ
  17. ઌ೔ͷ Google I/O 2019 ʹͯ • WebHID • ήʔϜύουͳͲͷHIDυϥΠόʹΑ੍ͬͯޚ͞Ε͍ͯͯWebʹΞΫηεͰ͖ͳ͍HID ΁ͷ੍ޚ͕Մೳʹ

    • Contacts Picker • Ϣʔβͷ࿈བྷઌʹΞΫηεͰ͖ΔΑ͏ʹͳΔ • Font Access API • ϩʔΧϧʹΠϯετʔϧ͞Ε͍ͯΔϑΥϯτͷऔಘ΍ϑΥϯτͷৄࡉʹΞΫηεͰ͖Δ