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. ΍͍ͬͯ͜͏ɻ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