$30 off During Our Annual Pro Sale. View Details »

iOSエンジニアが知るべきProgressive Web Apps開発のエッセンス / PWA Essentials for iOS Developer - iOSDC 2018

laiso
August 31, 2018

iOSエンジニアが知るべきProgressive Web Apps開発のエッセンス / PWA Essentials for iOS Developer - iOSDC 2018

https://blog.lai.so/entry/2018/09/18/iOS%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8C%E7%9F%A5%E3%82%8B%E3%81%B9%E3%81%8DProgressive_Web_Apps%E9%96%8B%E7%99%BA%E3%81%AE%E3%82%A8%E3%83%83%E3%82%BB%E3%83%B3%E3%82%B9_%23iOSDC_2018

PWA - Progressive Web Apps はウェブサイトのショートカットをホーム画面に追加するだけの仕組みではありません。

技術・市場の側面からPWAムーブメントの全容を理解し、適切な活用法を知るとともに。
最新ブラウザAPIを使ったプレゼンテーションパターンやJavaScriptとフロントエンドエコシステムをフル活用した「モダンなUI開発」のためのプログラミング環境が持つ可能性についてお話しします。

https://fortee.jp/iosdc-japan-2018/proposal/7429a5b4-d71c-473e-ae01-c9f1cd0b126d

laiso

August 31, 2018
Tweet

More Decks by laiso

Other Decks in Technology

Transcript

  1. iOSΤϯδχΞ͕஌Δ΂͖
    Progressive Web Apps։ൃͷ
    Τοηϯε
    PWA Essentials for iOS Developer - iOSDC 2018
    id:laiso

    View Slide

  2. Introduction

    View Slide

  3. ㊗PWA is Coming to iOS✨

    View Slide

  4. PWAͷԿ͕૽͕Ε͍ͯͨͷ͔?
    • 2017೥຤ SafariʹService Workers͕࣮૷͞ΕΔ

    • ֤ϝσΟΞͰʮiOSͰPWAαϙʔτ։࢝ʯͱॻ͔ΕΔ

    • ϒϩάͳͲͰʮωΠςΟϒΞϓϦͷ࣌୅͕ऴΘͬͨʯͱॻ͔ΕΔ

    View Slide

  5. PWA on iOSͷ࣮ࡍ
    • Service Workers͕࢖͑ΔΑ͏ʹͳͬͨ

    • Web Clip (ϗʔϜը໘ʹ௥Ճ) ͕ Web Manifest ʹରԠͨ͠

    • ࣮͸͜Ε͚ͩ

    View Slide

  6. Կ͕໰୊ͳͷ͔?
    • ֦େղऍ͞Εͨ࿩୊͕ઌߦͯ͠͠·ͬͨ

    • ਖ਼֬ͳ৘ใͰగਖ਼͞Εͳ͔ͬͨ

    • iOSͱ΢Σϒͷϒϥ΢βٕज़΁ͷᐆດͳཧղ

    View Slide

  7. iOSΤϯδχΞ4ɺ5ਓʹฉ͖·ͨ͠
    ʮPWAʹ͍ͭͯͲ͏ࢥ͏ʁʯ
    • ʮ࢖͍উख(UX)͕Α͘ͳ͍Μ͡Όͳ͍͔ʯ

    • ʮΞϓϦετΞ͕ͳ͍ͱɾɾʯ

    View Slide

  8. iOSͷPWA͸ෆ׬શ
    • AndroidͰͷPWAͱ͸શ͘ผ෺

    • (ผ෺ʹͳΔɻͱ͍͏͜ͱࣗମ͸PWAͷಛੑͷ1ͭ)

    View Slide

  9. ʮPWA͕ωΠςΟϒΞϓϦΛஔ͖׵͑Δʯ

    ͱ͍͏ετʔϦʔ͸ຊ࣭తͰ͸ͳ͍ʂ

    View Slide

  10. τʔΫͷ֓ཁ
    1. PWAʹ͍ͭͯຊ࣭తͳ෦෼Λ஌Δ

    2. iOSΤϯδχΞͷࢹ఺ͰPWAΛݟΔ

    3. iOSΤϯδχΞ͕WebΞϓϦʹ஫໨͓͍ͯͨ͠ํ͕͍͍ཧ༝

    View Slide

  11. ࣗݾ঺հ
    • Web Developer (Node.js, Rails, FirebaseͳͲ)

    • ݉ iOS Engineer (noarcੈ୅)

    • ΞϓϦέʔγϣϯϑϨʔϜϫʔΫͷݚڀ͕झຯ

    View Slide

  12. PWAʹ͍ͭͯຊ࣭తͳ෦෼Λ஌Δ

    View Slide

  13. PWA(Progressive Web Apps)ͱ͸?
    • WebΞϓϦͷUXΛ޲্͢ΔϜʔϒϝϯτ(ӡಈ)ͷ௨শ

    • Google Chrome։ൃऀΒʹΑͬͯఏএ͞Εͨ

    View Slide

  14. PWAͷॏཁੑ͕૿͢എܠ
    • Google(Chrome): WebΛਐԽͤ͞Δ

    • Microsoft:(Edge): WindowsΞϓϦ։ൃऀΛ૿΍͢

    • Mozilla(Firefox): Web as Native

    View Slide

  15. PWAͷॏཁੑ͕૿͢എܠ
    • Google(Chrome): WebΛਐԽͤ͞Δ

    • Microsoft:(Edge): WindowsΞϓϦ։ൃऀΛ૿΍͢

    • Mozilla(Firefox): Web as Native

    • Apple(Safari): ϊʔϙδ

    View Slide

  16. 2007೥ͷʮiOSΞϓϦʯ͸Webͩͬͨ!?

    View Slide

  17. ͳͥPWA͕ඞཁͳͷ͔?
    • ωΠςΟϒΞϓϦͰ͸࣮ݱͰ͖Δ͕WebΞϓϦͰ͸Ͱ͖ͳ͍ମݧ

    • ͦͷҝʹϒϥ΢βଆʹඞཁͳػೳΛ࣮૷

    • ΑΓωΠςΟϒʹ͍ۙ૚ͱͯ͠Service Workers Λ׆༻

    View Slide

  18. Service Workers
    • ϒϥ΢βͷΦϑϥΠϯج൫

    • ϓϩάϥϛϯάՄೳͳωοτϫʔΫϓϩΩγ

    • ΦϑϥΠϯ=ϩʔΧϧϚγϯ

    • WebϖʔδΛද͍ࣔͯ͠Δ࣌Ҏ֎΋ίʔυ͕࣮ߦͰ͖Δ

    View Slide

  19. ͦͷଞͷϒϥ΢βͷ৽ػೳ(API)ͷྫ
    • Add to Home Screen

    • Push Notification

    • Payment API

    View Slide

  20. ʮϗʔϜը໘ʹ௥Ճʯ

    View Slide

  21. ʮϗʔϜը໘ʹ௥Ճʯ ͱ Safari

    View Slide

  22. ੲ͔ΒͰ͖ͨΑʂ(iOS 2Ҏ߱)
    (ipn3g.com ΑΓ)

    View Slide

  23. Safari Web Clip
    • ಠࣗϝλλάΛHTMLϔομʹຒΊࠐΉ

    • ࠷৽൛SafariͰWeb Manifest(JSONܗࣜ)Λαϙʔτ

    • Service Workers࣮૷ͷ෭࡞༻?

    View Slide

  24. Safari Web Clip

    View Slide

  25. Android͞Μ❓❓

    View Slide

  26. Push Notification
    • ϒϥ΢β͔ΒOSͷ௨஌APIΛୟ͚Δ

    • iOSͷSafari͸ඇରԠ

    • macOS্ͷSafari͸ಠࣗ࢓༷Ͱ࣮ݱ

    • Safari Push Notifications

    View Slide

  27. Payment API
    • Apple Pay on the Web͕͜ͷ౓ ඪ४APIʹରԠ

    • In-App Purchaseͱ͸ผͷ࢓૊Έ

    View Slide

  28. ͭ·ΓPWAͱ͸
    • ϒϥ΢βʹ࣮૷͞Εͨ

    • ৽ػೳΛ࢖͏ͱ

    • ैདྷͷWebΞϓϦʹෆ଍͍ͯͨ͠UX͕࣮ݱͰ͖Δ

    View Slide

  29. PWAͱ͸ʮਐԽͨ͠WebΞϓϦʯ

    ͷ͜ͱͩͬͨʂ
    •ωΠςΟϒΞϓϦͱൺֱ͢ΔͷͰ͸ͳ͘

    •ैདྷͷWebΞϓϦͱൺֱ͢Δ΂͖

    View Slide

  30. WebΞϓϦͱωΠςΟϒΞϓϦͷൺֱ

    View Slide

  31. WebΞϓϦͷར఺
    • ॊೈͳ഑෍ํ๏

    • ಈ࡞؀ڥ͕ଟ༻

    View Slide

  32. ഑෍ํ๏ͷҧ͍
    • iOS: όΠφϦϑΝΠϧͷμ΢ϯϩʔυͱΠϯετʔϧ

    • AppStore΁༠ಋ

    • Web: ΠϯΫϦϝϯλϧͳΞοϓσʔτ

    • Ωϟογϡ+Service Workers

    • ΦϑϥΠϯϑΝʔετ+ߋ৽ͷࣗಈݕ஌

    View Slide

  33. ΦϑϥΠϯϑΝʔετͱ͸
    • σʔλΛऔಘ͠ͳͯ͘΋UIΛߏ੒Ͱ͖Δ

    • Ωϟογϡ͞ΕͨϨεϙϯε͔ΒಡΈࠐΉ

    View Slide

  34. App Shell Ϟσϧ
    https://developers.google.com/web/fundamentals/architecture/app-shell
    • UIͷϕʔεΛΩϟογϡ͔Βߏ੒͠

    • ίϯςϯπΛಈతʹऔಘ

    • ωΠςΟϒΞϓϦͷϝϯλϧϝσϧʹ
    ͍ۙ

    View Slide

  35. iOS։ൃͱΦϑϥΠϯϑΝʔετ
    • UIͷඳը͸ΦϑϥΠϯԽ͞Ε͍ͯΔ

    • ωοτϫʔΫͷϦτϥΠॲཧ❓

    • ΩϟογϡͷϋϯυϦϯά❓

    View Slide

  36. WebΞϓϦ͕ࠜຊతʹ๊͑Δ໰୊
    • OS͕ఏڙ͢Δίϯϙʔωϯτͷ׆༻

    • ඇػೳతͳUXཁ݅

    • ྫ: UIτϥϯδγϣϯ(ը໘ભҠͷΞχϝʔγϣϯ)

    View Slide

  37. Safariͷ՝୊
    • macOS/iOSͱ݁߹ͨ͠ػೳ

    • Safari Push Notifications

    View Slide

  38. PWA on iOSͷ՝୊
    • SafariҎ֎ͷϒϥ΢βΛσϑΥϧτʹͰ͖ͳ͍

    • WebKitΛڧ੍͞ΕΔ

    View Slide

  39. ݸਓత༧૝ͱئ๬
    • Apple͸OSͷಠࣗػೳΛWebඪ४ʹد͍ͤͨ

    • Webར༻ऀΛiOS/SafariʹऔΓࠐΈ͍ͨ

    • Service Workers࣮૷͸ͦͷ଍ֻΓ

    View Slide

  40. iOSΤϯδχΞ͕WebΞϓϦٕज़
    ʹ஫໨͓͍ͯͨ͠ํ͕͍͍ཧ༝

    View Slide

  41. ʮϩʔυϚοϓࢦ޲ͱΤίγεςϜࢦ޲ʯ

    (2014 ΞϯΧς)
    • ϩʔυϚοϓ͔ΒΤίγςϜͷ࣌୅΁

    View Slide

  42. ΤίγεςϜࢦ޲
    • ϩʔυϚοϓ͸اۀ͔Β༩͑ΒΕΔ΋ͷ

    • OSSͳͲͷΤίγεςϜͰ͸ࢀՃऀͷҙࢥܾఆ͕ٕज़Λൃలͤ͞Δ

    • தԝͷҙࢥܾఆΛ࣋ͨͣ༧ଌෆೳͳͷͰશମ͕ߴ଎ʹਐԽ͢Δ

    View Slide

  43. Web։ൃٕज़͸·͞ʹΤίγεςϜͷମݱ
    • ࢓༷͕ඪ४Խ͞Εϒϥ΢βϕϯμʔ͕࣮૷

    • αʔυύʔςΟͷϥΠϒϥϦͷҠΓมΘΓ

    • ڊେςΫϊϩδʔاۀ͕ओಋ͢ΔOSSίϛϡχςΟ

    View Slide

  44. ݱࡏͷWeb։ൃ؀ڥ͸

    ΤίγεςϜ͕͏·͘ػೳ͠ɺ

    ͱͯͭ΋ͳ͍଎౓ͰਐԽ͍ͯ͠Δʂ

    View Slide

  45. ͳͥWebٕज़ͷਐԽ͕ૣ͘ͳΔͷ͔
    • WebʹؔΘΔਓޱͷଟ͞

    • ଟ͘ͷϢʔβʔ͕༷ʑͳ؀ڥͰϒϥ΢βΛ࢖͏

    • ଟ͘ͷWeb։ൃऀ͕JavaScriptΛ࢖͏

    View Slide

  46. 2008೥ʹ͸ʮiOSΤϯδχΞʯ
    ͱ͍͏৬ۀ͸ଘࡏ͠ͳ͔ͬͨ

    View Slide

  47. iOSΤϯδχΞ΋ΤίγεςϜΛ৐Γ͜ͳ͢
    • Swift΍OSSϥΠϒϥϦͷΤίγεςϜʹࢀՃ͢Δ

    • WebΞϓϦ։ൃٕज़ΛऔΓࠐΉ

    • Server-side Swift ͷ׆༻ͱ͔!

    View Slide

  48. 10೥ޙͷʮiOSΤϯδχΞʯ

    View Slide

  49. ·ͱΊ
    • PWA͸ਐԽͨ͠WebΞϓϦͷ͜ͱͰ͋Δ

    • ਐԽͷૣ͍Webͷ؀ڥ͔Β஌ࣝΛऔΓೖΕΑ͏

    • iOS։ൃͷΤίγεςϜ΍ίϛϡχςΟʹࢀՃ͠Α͏

    View Slide