やっていこう。PWA

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

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

Transcript

1. ΍͍ͬͯ͜͏ɻPWA
   ͓Γ͹ʔʢ@oliver_diaryʣ
   

   View Slide

2. ࣗݾ঺հ
   

   View Slide

3. ࣗݾ঺հ
   # Daiki Minakawa ( @oliver_diary )
   - Fringe81 Application Developer
   - ࠷ۙ͸Elmॻ͍ͯ·͢
   - ৽ଔ̎ϲ݄໨Ͱ͢
   - Main : Server Sideʢجຊతʹશ෦΍Δʣ
   - RailsΛ࢖ͬͯݸਓ։ൃΛ͍ͯ͠Δ
   

   View Slide

4. ͲΜͳ͜ͱ࿩͢ʁ
   • PWAͱ͸ɾ࠷ۙͷPWA
   • ࣮ࡍͷPWA͸ͲΜͳײ͡ͳͷ͔
   • PWAαʔϏεΛϦϦʔεͨ͠ॴײ
   • PWAΛ໨ࢦ্͢Ͱେࣄͩͱײ͍ͯ͡Δ͜ͱ
   • PWAʹ·ͭΘΔٕज़ͨͪ
   • PWA͸ࠓޙͲ͏ͳ͍ͬͯ͘ͷ͔
   

   View Slide

5. PWAͱ͸
   

   View Slide

6. PWAͱ͸
   • Progressive Web Apps ͷུ
   • ϞόΠϧʹݶΒͣσεΫτοϓͷ྆ํͰΠϯετʔϧՄೳ
   • ΞϓϦͱಉ౳ͷମݧΛఏڙ
   • Reliable, Integrated, Fast, Engaging ͳͲͷUXΛ݉Ͷඋ͑ͨ
   WebΞϓϦͷ͜ͱͰ͋Γɺಛఆͷٕज़ͷ͜ͱͰ͸ͳ͍
   FIRE !!
   

   View Slide

7. 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

   ʢ͞Βʹ༏ΕͨϢʔβʔΤΫεϖϦΤϯεΛ࣮ݱʣʯ
   

   View Slide

8. 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

   ʢ͞Βʹ༏ΕͨϢʔβʔΤΫεϖϦΤϯεΛ࣮ݱʣʯ
   

   View Slide

9. PWAͱ͸
   • ͔ͦ͜Β2015೥11݄ʹ։࠵͞Εͨ

   Chrome Dev Summit 2015ͷΩʔϊʔτͰൃද͞Εͯ࿩୊
   • https://codelabs.developers.google.com/chrome-dev-
   summit/
   

   View Slide

10. ΋͏3೥൒Ҏ্΋ܦ͍ͬͯΔ
    

    View Slide

11. ͍΍ɺ·ͩ3೥൒͔͠ܦ͍ͬͯͳ͍ʁ
    

    View Slide

12. ΋͏গ͠۷ΓԼ͍͛ͯ͘
    

    View Slide

13. • Reliable

    

    ωοτϫʔΫͷঢ়ଶ͕ෆ҆ఆͳ৔߹Ͱ΋ॠ࣌ʹදࣔ͠ɺΦϑϥΠϯͰ
    ΋downasaur͕දࣔ͞Εͳ͍Α͏ͳঢ়ଶɻ

    Service WorkerΛ༻͍ͯɺॏཁͳϦιʔεΛࣄલʹΩϟογϡ͓ͯ͘͠
    ͜ͱͰɺωοτϫʔΫͷঢ়ଶʹؔ܎ͳ͘ଈ࠲ʹಡΈࠐΉ͜ͱ͕Մೳɻ
    PWAͱ͸
    downasaur
    

    View Slide

14. PWAͱ͸
    • Integrated

    

    ମݧΛΑΓσόΠεɺOSʹ߹Θͤͨܗʹ͠ɺWebΛҙࣝͤ͞ͳ͍ͱ͍͏
    ͜ͱɻ

    ͢ͳΘͪϒϥ΢βΛىಈ͠ͳͯ͘΋WebαΠτΛ։͚ΔɺΈ͍ͨͳঢ়ଶɻ
    • ϗʔϜը໘ʹ௥Ճ
    • ϑϧεΫϦʔϯදࣔ
    ͳͲͳͲ
    

    View Slide

15. PWAͱ͸
    • Fast

    

    ΞχϝʔγϣϯͰ͕׈Β͔Ͱɺૢ࡞ʹ͢͹΍͘൓Ԡͯ͘͠Ε
    ΔΑ͏ͳঢ়ଶɻ

    ϩʔυʹ3ඵҎ্͔͔Δͱɺ53ˋͷϢʔβʔ͕αΠτΛ཭୤
    ͢ΔΒ͍͠ɻ
    

    View Slide

16. PWAͱ͸
    • Engaging

    

    ΞϓϦͷΑ͏ʹײ͡ΒΕͯɺͷΊΓࠐ·ΕΔΑ͏ͳUX͕͋Δঢ়ଶɻ
    • ΞϓϦετΞΛඞཁͱͤͣʹϢʔβʔͷϗʔϜը໘ʹ௥Ճ͞ΕΔɻ
    • ϓογϡ௨஌ͰϢʔβʔʹ௨஌Λಧ͚Δ͜ͱ͕Ͱ͖Δɻ
    ͳͲͳͲ
    

    View Slide

17. ࠷ۙͷPWA
    

    View Slide

18. ࠷ۙͷ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
    

    View Slide

19. ࠷ۙͷ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ʹରԠ
    

    View Slide

20. ओཁσεΫτοϓOS͢΂ͯͰ

    PWAͷ࣮ߦ؀ڥ͕੔ͬͨ
    

    View Slide

21. ໰୊͸iOS
    

    View Slide

22. ࠷ۙͷPWAʢiOSʣ
    • iOS11.3ʢ2018೥1݄ʣ
    • iOS͕PWAʹରԠ
    • Service Worker ͕࢖͑ΔΑ͏ʹͳͬͨ
    • ʮϗʔϜը໘ʹ௥Ճʯ͔ΒΠϯετʔϧՄೳ
    • OauthϩάΠϯ࣌ʹSafariʹඈ͹͞ΕΔ
    ͳͲͳͲ
    ͜͜ΑΓઌʹਐΊͳͯ͘ࢮ๢
    

    View Slide

23. ͜Ε͸ݫ͍͠…
    

    View Slide

24. ࠷ۙͷPWAʢiOSʣ
    • iOS12.2ʢ2019೥3݄ʣ
    • Web Share API ʹରԠ
    • δΣενϟʔʹΑΔφϏήʔγϣϯ

    ʢεϫΠϓͰਐΉɺ໭ΔͳͲʣ
    • ϚϧνλεΫ࣌ʹ΋ঢ়ଶΛҡ࣋ʢOauthϩάΠϯ͕Մೳʹͳͬͨʣ
    ϩάΠϯͰ͖ΔΑ͏ʹͳͬͨʂ
    ͳͲͳͲ
    

    View Slide

25. ͋ͱ͸Push௨஌…
    

    View Slide

26. ͱ͸͍͑
    

    View Slide

27. ͜͜1೥Ͱ͍ͩͿΞπ͍ಈ͖͕དྷ͍ͯΔ
    

    View Slide

28. Ͱ͸ɺ࣮ࡍͷPWA͸ͲΜͳײ͡ͳͷ͔
    

    View Slide

29. ࣮ࡍͷPWA͸ͲΜͳײ͡ͳͷ͔
    • Progressive Web App Checklist
    • https://developers.google.com/web/progressive-web-apps/checklist
    • جຊతͳཁ݅͸͜͜ʹॻ͔Ε͍ͯΔ
    • HTTPSඞਢͩͱ͔ɺϞόΠϧϑϨϯυϦʔͩͱ͔ɺϗʔϜը
    ໘௥Ճͩͱ͔ɺΩϟογϯάͩͱ͔ɺ݁ߏͨ͘͞Μ͋Δɻ
    

    View Slide

30. ࣮ࡍͷPWA͸ͲΜͳײ͡ͳͷ͔
    • PWAͷඞཁ৚݅Ͱ͸ͳ͍͚ͲWebͰग़དྷΔ͜ͱ
    • Push௨஌
    • Web Share
    • Payment Request
    • Web Bluetooth
    • Χϝϥ΍ϚΠΫͷىಈ
    ͳͲͳͲ
    • Ґஔ৘ใΛऔಘ
    • ΦʔσΟΦ΍ϏσΦͷ࠶ੜ੍ޚ
    • Ճ଎౓ηϯαʔɾδϟΠϩηϯαʔ
    • ωΠςΟϒΞϓϦͷΠϯετʔϧ֬ೝ

    (getInstalledRelatedApps)
    

    View Slide

31. View Slide

32. ͜͜Ͱ1ͭAPIΛ঺հ
    

    View Slide

33. Web Share Target API
    • https://developers.google.com/web/updates/2018/12/web-share-target
    • ࠓ·Ͱ͸ωΠςΟϒΞϓϦͷΈ͕ڞ༗λʔήοτͱͯ͠ొ࿥Ͱ͖ͨͷͩ
    ͕ɺWebͰ΋Մೳʹͳͬͨɻ
    

    View Slide

34. ΋ͬͱͨ͘͞Μ૿͑ͯ΄͍͠Ͱ͢Ͷʂʂ
    

    View Slide

35. PWAαʔϏεΛϦϦʔεͨ͠ॴײ
    

    View Slide

36. PWAαʔϏεΛϦϦʔεͨ͠ॴײ
    • ͺͪͺͪʮpachipachi.funʯΛ2018೥10݄ʹϦϦʔεͨ͠ɻ
    • https://github.com/minakawa-daiki/pachipachi.fun-gottani-
    bon
    • PWAͱ࣮ͯ͠૷ͨ͠෦෼
    • ΦϑϥΠϯΩϟογϡɺPush௨஌
    

    View Slide

37. PWAαʔϏεΛϦϦʔεͨ͠ॴײ
    • ͺͪͺͪʮpachipachi.funʯΛ2018೥10݄ʹϦϦʔεͨ͠ɻ
    ഥख͢Δ
    ௨஌͕ಧ͘
    

    View Slide

38. PWAαʔϏεΛϦϦʔεͨ͠ॴײ
    • ͺͪͺͪʮpachipachi.funʯΛ2018೥10݄ʹϦϦʔεͨ͠ɻ
    • ٕज़ॻయ5Ͱͷຊͷ಺༰Ͱ΋͋ΔɻʢαʔΫϧࢀՃۦಈ։ൃ
    • ৄ͘͠͸ͪ͜Β -> https://note.mu/oliver0521/n/n14ca5c7aa830
    • TwitterͰϩάΠϯͯ͠ʮ૬खʹഥखͨ͠Β௨஌͕ඈͿʯͱ͍͏
    γϯϓϧͳPWA
    

    View Slide

39. PWAαʔϏεΛϦϦʔεͨ͠ॴײ
    • ͺͪͺͪʮpachipachi.funʯΛ2018೥10݄ʹϦϦʔεͨ͠ɻ
    • ٕज़ॻయ5Ͱͷຊͷ಺༰Ͱ΋͋ΔɻʢαʔΫϧࢀՃۦಈ։ൃ
    • ৄ͘͠͸ͪ͜Β -> https://note.mu/oliver0521/n/n14ca5c7aa830
    • TwitterͰϩάΠϯͯ͠ʮ૬खʹഥखͨ͠Β௨஌͕ඈͿʯͱ͍͏
    γϯϓϧͳPWA
    

    View Slide

40. 2018೥10݄ʁ
    

    View Slide

41. iOS…
    

    View Slide

42. PWAαʔϏεΛϦϦʔεͨ͠ॴײ
    • ౰࣌͸ຊ౰ʹઈ๬͍ͯͯ͠෼͔͍ͬͯΔͷʹԿ౓΋PWA͔Β
    ʮTwitterϩάΠϯʯΛԡͯ͠Safariʹඈ͹͞ΕΔ༷ΛோΊͨɻ
    • ͦͯ͠ḷΓண͍ͨ issue ͕ʮmanifestΛऔΓআ͜͏ʯ
    • https://github.com/GoogleChromeLabs/pwacompat/issues/
    15
    

    View Slide

43. ͦͯ͠2019೥3݄…
    

    View Slide

44. View Slide

45. PWAαʔϏεΛϦϦʔεͨ͠ॴײ
    • iOS12.2͕ϦϦʔε
    • ʮԿ΋ͯ͠ͳ͍ͷʹյΕͨʯͳΒ͵

    ʮԿ΋ͯ͠ͳ͍ͷʹϩάΠϯͰ͖ΔʯΑ͏ʹͳͬͨɻ
    • iOSͰͷPush௨஌͸·ͩ Safari ͕ରԠ͍ͯ͠ͳ͍΋ͷͷɺͩ
    ͍Ϳઓ͑ΔΑ͏ʹͳ͖ͬͯͨͱײͨ͡ɻ
    

    View Slide

46. PWAΛ໨ࢦ্͢Ͱେࣄͩͱײ͍ͯ͡Δ͜ͱ
    

    View Slide

47. PWAΛ໨ࢦ্͢Ͱେࣄͩͱײ͍ͯ͡Δ͜ͱ
    • ͲͷΑ͏ʹͯ͠Ϣʔβʹʮ௨஌ΛڐՄʯͤ͞Δ͔
    • ॳΊͯ๚ΕͨαΠτͰ௨஌ΛڐՄͨ͜͠ͱ͋Δʁ
    • Ϣʔβʹ௨஌ΛڐՄͤ͞Δͷ͸ɺͱͯ΋೉͍͠
    • Ұ౓ڋ൱ͨ͠ϒϥ΢βΛڐՄʹ͢Δͷ΋ɺͱͯ΋೉͍͠
    

    View Slide

48. PWAΛ໨ࢦ্͢Ͱେࣄͩͱײ͍ͯ͡Δ͜ͱ
    • ͲͷΑ͏ʹͯ͠Ϣʔβʹʮ௨஌ΛڐՄʯͤ͞Δ͔
    • ॳΊͯ๚ΕͨαΠτͰ௨஌ΛڐՄͨ͜͠ͱ͋Δʁ
    • Ϣʔβʹ௨஌ΛڐՄͤ͞Δͷ͸ɺͱͯ΋೉͍͠
    • Ұ౓ڋ൱ͨ͠ϒϥ΢βΛڐՄʹ͢Δͷ΋ɺͱͯ΋೉͍͠
    • ಠࣗͷϞʔμϧ΍ϙοϓΞοϓΛڬΉ͜ͱʹΑͬͯճආ
    

    View Slide

49. PWAΛ໨ࢦ্͢Ͱେࣄͩͱײ͍ͯ͡Δ͜ͱ
    • ίϯςϯπͷΩϟογϡઓུ
    • αʔϏε͝ͱʹਂ͘ߟ͑ͳ͚Ε͹͍͚ͳ͍
    • ྫ͑͹ɺ௥هʢߋ৽ʣ͕ଟ͍ϝσΟΞͷ৔߹ɺίϯςϯπ
    ͷΩϟογϡΛͲ͏͢Δͷ͔
    ➡ ͲͷΑ͏ʹͯ͠ίϯςϯπͷ௥هʢߋ৽ʣΛ఻͑Δͷ͔
    

    View Slide

50. PWAΛ໨ࢦ্͢Ͱେࣄͩͱײ͍ͯ͡Δ͜ͱ
    • ίϯςϯπͷΩϟογϡઓུ
    • ΫΤϦετϦϯάΛ࢖͏ʁ
    

    View Slide

51. PWAΛ໨ࢦ্͢Ͱେࣄͩͱײ͍ͯ͡Δ͜ͱ
    • ίϯςϯπͷΩϟογϡઓུ
    • ΫΤϦετϦϯάΛ࢖͏ʁ
    • SNSͰURL͕ڞ༗͞Ε͍ͯͨ৔߹΍͓ؾʹೖΓʹ௥Ճ͞Ε
    ͍ͯͨ৔߹ʹࠔΔ
    

    View Slide

52. PWAΛ໨ࢦ্͢Ͱେࣄͩͱײ͍ͯ͡Δ͜ͱ
    • ίϯςϯπͷΩϟογϡઓུ
    • ߋ৽֬ೝ༻ͷϦΫΤετΛඈ͹͢ʁ
    

    View Slide

53. PWAΛ໨ࢦ্͢Ͱେࣄͩͱײ͍ͯ͡Δ͜ͱ
    • ίϯςϯπͷΩϟογϡઓུ
    • ߋ৽֬ೝ༻ͷϦΫΤετΛඈ͹͢ʁ
    • ߋ৽͕͋ͬͨ৔߹ʹ̎ճϦΫΤετ͕ൃੜͯ͠͠·͏
    • ͔͠΋ฒྻʹॲཧͰ͖ͳ͍ͨΊωοΫͱͳΔ
    • ڐ༰Ͱ͖ΔͳΒଥڠͯ͠΋͍͍͕
    

    View Slide

54. PWAΛ໨ࢦ্͢Ͱେࣄͩͱײ͍ͯ͡Δ͜ͱ
    • ίϯςϯπͷΩϟογϡઓུ
    • ͜͏͍ͬͨέʔεͷ࣌͸ΩϟογϡͷऔΓѻ͍ʹ஫ҙ͠ͳ͚
    Ε͹ͳΒͳ͍
    

    View Slide

55. PWAΛ໨ࢦ্͢Ͱେࣄͩͱײ͍ͯ͡Δ͜ͱ
    • ίϯςϯπͷΩϟογϡઓུ
    • ͜͏͍ͬͨέʔεͷ࣌͸ΩϟογϡͷऔΓѻ͍ʹ஫ҙ͠ͳ͚
    Ε͹ͳΒͳ͍
    • ௨৴؀ڥ͕୲อ͞Ε͍ͯΔͳΒαʔόʔ͔ΒऔಘɺΦϑϥ
    ΠϯͳΒΩϟογϡ͔Βऔಘʹ͢Δ
    • औಘʹ1ඵҎ্͔͔ͬͨ࣌఺ͰΩϟογϡʹ੾Γସ͑ΔͳͲ
    

    View Slide

56. PWAʹ·ͭΘΔٕज़ͨͪ
    

    View Slide

57. PWAʹ·ͭΘΔٕज़ͨͪ
    • App Shell
    • PWA(Progressive Web App)Λߏங͢Δࡍʹ࢖ΘΕΔϞσϧͷҰͭ
    • UIͳͲͷมΘΒͳ͍෦෼ΛΩϟογϡɺத਎ͷಈతίϯςϯπͩ
    ͚αʔό͔Βऔಘ͢Δ͜ͱͰߴ଎Խ
    • SPA (React, Vue, Angularͱ͔) ͱ૬ੑ͕͍͍
    

    View Slide

58. PWAʹ·ͭΘΔٕज़ͨͪ
    • ཁ݅
    • ಡΈࠐΈ͕ॠ࣌ʹߦΘΕΔ͜ͱ
    • σʔλ͸࠷খݶͰ͋Δ͜ͱ
    • ੩తΞηοτ͸ϩʔΧϧͷΩϟογϡΛ༻͍Δ͜ͱ
    • ίϯςϯπͱφϏήʔγϣϯ͸෼཭͞Ε͍ͯΔ͜ͱ
    • ϖʔδݻ༗ͷίϯςϯπͷऔಘͱද͕࣮ࣔ૷͞Ε͍ͯΔ͜ͱ
    • ඞཁʹԠ͡ɺಈతίϯςϯπͷΩϟογϡΛߦ͏͜ͱ
    

    View Slide

59. PWAʹ·ͭΘΔٕज़ͨͪ
    • Ionic
    • ελʔλʔςϯϓϨʔτϨϕϧͰPWAΛαϙʔτ͍ͯ͠Δ
    • Flutter
    • Google I/O 2019 ͰPWAʹରԠ͍ͯ͘͠ํ਑͕ൃද
    • Nuxt.js
    • ݸਓతʹΦεεϝɻ࠷ۙ͸͍ͭ΋͓ੈ࿩ʹͳ͍ͬͯΔɻ
    • Workbox ͕಺แ͞Ε͍ͯΔͨΊѻ͍΍͍͢ɻOneSignal Λ࢖ͬͨϓογϡ௨஌ʹ΋ରԠɻ
    

    View Slide

60. PWAʹ·ͭΘΔٕज़ͨͪ
    • WorkBox
    • Sevice Workerʹ͓͚ΔɺෳࡶͳϥΠϑαΠΫϧΛϥΠϒϥϦଆͰ΍ͬͯ͘Εɺ
    Ωϟογϡ؅ཧΛศརʹͯ͘͠ΕΔ΋ͷ
    • https://developers.google.com/web/tools/workbox/
    • OneSignal
    • ؆୯ʹPush௨஌ΛՄೳʹ͢ΔαʔϏε
    • https://onesignal.com/
    

    View Slide

61. PWAʹ·ͭΘΔٕज़ͨͪ
    • PWA Builder
    • https://www.pwabuilder.com/
    • ϚΠΫϩιϑτ͕ެ։͍ͯ͠ΔPWAͷ։ൃࢧԉπʔϧ
    • Manifest΍Service Worker༻ͷίʔυͳͲɺ༷ʑͳίʔυ
    Λࣗಈੜ੒ͯ͘͠ΕΔ
    

    View Slide

62. 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
    

    View Slide

63. PWAʹ·ͭΘΔٕज़ͨͪ
    • TWA (Trusted Web Activity)
    • खॱ͸গ͠ଟ͍͕ɺ͜ΕʹΑΓPWAΛGoogle Play Storeʹࡌ͚ͬΒΕΔʂ
    • PWAΛAPKʹ͢Δ͜ͱ͕Ͱ͖Δʂ
    • Chromeͱηογϣϯ΍ετϨʔδɺΩϟογϡͳͲ͸ڞ༗
    • PWA͚ͩͰ͸Χόʔ͖͠Εͳ͘ͳͬͨ෦෼͕ग़͖ͯͨͱ͖ʹɺ·ͨθϩ͔
    Β։ൃ͢Δඞཁੑ͕গͳ͘ͳΔ
    

    View Slide

64. PWAʹ·ͭΘΔٕज़ͨͪ
    • TWA (Trusted Web Activity)
    • ެࣜͷ΍Γํ
    • https://developers.google.com/web/updates/2019/02/using-twa
    • ͜Μͳͷ΋͋Δ
    • https://appmaker.xyz
    • ςετͰαΫοͱࢼ͍ͨ͠ͱ͖ʹΦεεϝ
    

    View Slide

65. PWAʹ·ͭΘΔٕज़ͨͪ
    

    View Slide

66. PWAʹ·ͭΘΔٕज़ͨͪ
    

    View Slide

67. PWAʹ·ͭΘΔٕज़ͨͪ
    

    View Slide

68. PWAʹ·ͭΘΔٕज़ͨͪ
    

    View Slide

69. PWAʹ·ͭΘΔٕज़ͨͪ
    

    View Slide

70. PWA͸ࠓޙͲ͏ͳ͍ͬͯ͘ͷ͔
    

    View Slide

71. ઌ೔ͷ Google I/O 2019 ʹͯ
    

    View Slide

72. ઌ೔ͷ Google I/O 2019 ʹͯ
    • ࠓޙ௥Ճ͞ΕΔ༧ఆͷ༷ʑͳAPI͕ൃද͞Εͨ
    • https://www.youtube.com/watch?v=GSiUzuB-PoI
    • ·ͩग़Δ͔Θ͔Βͳ͍΋ͷ΍ɺະ֬ఆͳ΋ͷ͋Δ͕ɺͱͯ
    ΋ϫΫϫΫ͢Δ΋ͷ͹͔Γ
    

    View Slide

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

    View Slide

74. Badging API
    

    View Slide

75. ઌ೔ͷ Google I/O 2019 ʹͯ
    • Wake Lock API
    • ૢ࡞͍ͯ͠ͳ͍࣌ͷը໘ͷϩοΫΛ๷͙
    • Native File System API
    • ϩʔΧϧͷϑΝΠϧΛΘ͟Θ͟Ξοϓϩʔυͯ͠ɺมߋ͔ͯ͠Βμ΢ϯϩʔυ͢
    Δͱ͍͏खؒΛແͤ͘Δ
    • Serial API
    • ϚΠΫϩίϯτϩʔϥ΍3DϓϦϯλͳͲͱ௨৴Ͱ͖ΔΑ͏ʹͳΔ
    

    View Slide

76. ઌ೔ͷ Google I/O 2019 ʹͯ
    • WebHID
    • ήʔϜύουͳͲͷHIDυϥΠόʹΑ੍ͬͯޚ͞Ε͍ͯͯWebʹΞΫηεͰ͖ͳ͍HID
    ΁ͷ੍ޚ͕Մೳʹ
    • Contacts Picker
    • Ϣʔβͷ࿈བྷઌʹΞΫηεͰ͖ΔΑ͏ʹͳΔ
    • Font Access API
    • ϩʔΧϧʹΠϯετʔϧ͞Ε͍ͯΔϑΥϯτͷऔಘ΍ϑΥϯτͷৄࡉʹΞΫηεͰ͖Δ
    

    View Slide

77. Font Access API
    

    View Slide

78. View Slide

79. View Slide

80. View Slide

81. ·ͱΊ
    • ࣮֬ʹɺணʑͱPWA͸ݱ࣮తͳ΋ͷʹͳ͖͍ͬͯͯΔ
    • SafariͷରԠ࣍ୈͰ͸ɺ͔ͳΓԽ͚Δ
    • PWAΛετΞʹࡌ͚ͬΔͷ͕ओྲྀʹͳΔ࣌୅͕དྷΔͷ͔΋
    • ΑΓ؆୯ʹ։ൃͰ͖ΔϓϥοτϑΥʔϜ͕ग़͖ͯͯ΋͓͔͘͠ͳ͍
    • ༷ʑͳAPI͕ࠓޙ΋ग़ͯ͘ΔͷͰཁ஫໨
    • ΑΓωΠςΟϒʹ͍͍ۙͮͯ͘ɻ։ൃΛWebʹدͤΒΕΔঢ়گ͸ྑ͍͜ͱ
    

    View Slide

82. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide