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

D107509659b6f023aa60e77aef1db237?s=47 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

D107509659b6f023aa60e77aef1db237?s=128

laiso

August 31, 2018
Tweet

Transcript

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

    - iOSDC 2018 id:laiso
  2. Introduction

  3. ㊗PWA is Coming to iOS✨ ❤

  4. PWAͷԿ͕૽͕Ε͍ͯͨͷ͔? • 2017೥຤ SafariʹService Workers͕࣮૷͞ΕΔ • ֤ϝσΟΞͰʮiOSͰPWAαϙʔτ։࢝ʯͱॻ͔ΕΔ • ϒϩάͳͲͰʮωΠςΟϒΞϓϦͷ࣌୅͕ऴΘͬͨʯͱॻ͔ΕΔ

  5. PWA on iOSͷ࣮ࡍ • Service Workers͕࢖͑ΔΑ͏ʹͳͬͨ • Web Clip (ϗʔϜը໘ʹ௥Ճ)

    ͕ Web Manifest ʹରԠͨ͠ • ࣮͸͜Ε͚ͩ
  6. Կ͕໰୊ͳͷ͔? • ֦େղऍ͞Εͨ࿩୊͕ઌߦͯ͠͠·ͬͨ • ਖ਼֬ͳ৘ใͰగਖ਼͞Εͳ͔ͬͨ • iOSͱ΢Σϒͷϒϥ΢βٕज़΁ͷᐆດͳཧղ

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

  8. iOSͷPWA͸ෆ׬શ • AndroidͰͷPWAͱ͸શ͘ผ෺ • (ผ෺ʹͳΔɻͱ͍͏͜ͱࣗମ͸PWAͷಛੑͷ1ͭ)

  9. ʮPWA͕ωΠςΟϒΞϓϦΛஔ͖׵͑Δʯ
 ͱ͍͏ετʔϦʔ͸ຊ࣭తͰ͸ͳ͍ʂ

  10. τʔΫͷ֓ཁ 1. PWAʹ͍ͭͯຊ࣭తͳ෦෼Λ஌Δ 2. iOSΤϯδχΞͷࢹ఺ͰPWAΛݟΔ 3. iOSΤϯδχΞ͕WebΞϓϦʹ஫໨͓͍ͯͨ͠ํ͕͍͍ཧ༝

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

    Engineer (noarcੈ୅) • ΞϓϦέʔγϣϯϑϨʔϜϫʔΫͷݚڀ͕झຯ
  12. PWAʹ͍ͭͯຊ࣭తͳ෦෼Λ஌Δ

  13. PWA(Progressive Web Apps)ͱ͸? • WebΞϓϦͷUXΛ޲্͢ΔϜʔϒϝϯτ(ӡಈ)ͷ௨শ • Google Chrome։ൃऀΒʹΑͬͯఏএ͞Εͨ

  14. PWAͷॏཁੑ͕૿͢എܠ • Google(Chrome): WebΛਐԽͤ͞Δ • Microsoft:(Edge): WindowsΞϓϦ։ൃऀΛ૿΍͢ • Mozilla(Firefox): Web

    as Native
  15. PWAͷॏཁੑ͕૿͢എܠ • Google(Chrome): WebΛਐԽͤ͞Δ • Microsoft:(Edge): WindowsΞϓϦ։ൃऀΛ૿΍͢ • Mozilla(Firefox): Web

    as Native • Apple(Safari): ϊʔϙδ
  16. 2007೥ͷʮiOSΞϓϦʯ͸Webͩͬͨ!?

  17. ͳͥPWA͕ඞཁͳͷ͔? • ωΠςΟϒΞϓϦͰ͸࣮ݱͰ͖Δ͕WebΞϓϦͰ͸Ͱ͖ͳ͍ମݧ • ͦͷҝʹϒϥ΢βଆʹඞཁͳػೳΛ࣮૷ • ΑΓωΠςΟϒʹ͍ۙ૚ͱͯ͠Service Workers Λ׆༻

  18. Service Workers • ϒϥ΢βͷΦϑϥΠϯج൫ • ϓϩάϥϛϯάՄೳͳωοτϫʔΫϓϩΩγ • ΦϑϥΠϯ=ϩʔΧϧϚγϯ • WebϖʔδΛද͍ࣔͯ͠Δ࣌Ҏ֎΋ίʔυ͕࣮ߦͰ͖Δ

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

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

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

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

  23. Safari Web Clip • ಠࣗϝλλάΛHTMLϔομʹຒΊࠐΉ • ࠷৽൛SafariͰWeb Manifest(JSONܗࣜ)Λαϙʔτ • Service

    Workers࣮૷ͷ෭࡞༻?
  24. Safari Web Clip

  25. Android͞Μ❓❓

  26. Push Notification • ϒϥ΢β͔ΒOSͷ௨஌APIΛୟ͚Δ • iOSͷSafari͸ඇରԠ • macOS্ͷSafari͸ಠࣗ࢓༷Ͱ࣮ݱ • Safari

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

    In-App Purchaseͱ͸ผͷ࢓૊Έ
  28. ͭ·ΓPWAͱ͸ • ϒϥ΢βʹ࣮૷͞Εͨ • ৽ػೳΛ࢖͏ͱ • ैདྷͷWebΞϓϦʹෆ଍͍ͯͨ͠UX͕࣮ݱͰ͖Δ

  29. PWAͱ͸ʮਐԽͨ͠WebΞϓϦʯ
 ͷ͜ͱͩͬͨʂ •ωΠςΟϒΞϓϦͱൺֱ͢ΔͷͰ͸ͳ͘ •ैདྷͷWebΞϓϦͱൺֱ͢Δ΂͖

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

  31. WebΞϓϦͷར఺ • ॊೈͳ഑෍ํ๏ • ಈ࡞؀ڥ͕ଟ༻

  32. ഑෍ํ๏ͷҧ͍ • iOS: όΠφϦϑΝΠϧͷμ΢ϯϩʔυͱΠϯετʔϧ • AppStore΁༠ಋ • Web: ΠϯΫϦϝϯλϧͳΞοϓσʔτ •

    Ωϟογϡ+Service Workers • ΦϑϥΠϯϑΝʔετ+ߋ৽ͷࣗಈݕ஌
  33. ΦϑϥΠϯϑΝʔετͱ͸ • σʔλΛऔಘ͠ͳͯ͘΋UIΛߏ੒Ͱ͖Δ • Ωϟογϡ͞ΕͨϨεϙϯε͔ΒಡΈࠐΉ

  34. App Shell Ϟσϧ https://developers.google.com/web/fundamentals/architecture/app-shell • UIͷϕʔεΛΩϟογϡ͔Βߏ੒͠ • ίϯςϯπΛಈతʹऔಘ • ωΠςΟϒΞϓϦͷϝϯλϧϝσϧʹ

    ͍ۙ
  35. iOS։ൃͱΦϑϥΠϯϑΝʔετ • UIͷඳը͸ΦϑϥΠϯԽ͞Ε͍ͯΔ • ωοτϫʔΫͷϦτϥΠॲཧ❓ • ΩϟογϡͷϋϯυϦϯά❓

  36. WebΞϓϦ͕ࠜຊతʹ๊͑Δ໰୊ • OS͕ఏڙ͢Δίϯϙʔωϯτͷ׆༻ • ඇػೳతͳUXཁ݅ • ྫ: UIτϥϯδγϣϯ(ը໘ભҠͷΞχϝʔγϣϯ)

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

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

  39. ݸਓత༧૝ͱئ๬ • Apple͸OSͷಠࣗػೳΛWebඪ४ʹد͍ͤͨ • Webར༻ऀΛiOS/SafariʹऔΓࠐΈ͍ͨ • Service Workers࣮૷͸ͦͷ଍ֻΓ

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

  41. ʮϩʔυϚοϓࢦ޲ͱΤίγεςϜࢦ޲ʯ
 (2014 ΞϯΧς) • ϩʔυϚοϓ͔ΒΤίγςϜͷ࣌୅΁

  42. ΤίγεςϜࢦ޲ • ϩʔυϚοϓ͸اۀ͔Β༩͑ΒΕΔ΋ͷ • OSSͳͲͷΤίγεςϜͰ͸ࢀՃऀͷҙࢥܾఆ͕ٕज़Λൃలͤ͞Δ • தԝͷҙࢥܾఆΛ࣋ͨͣ༧ଌෆೳͳͷͰશମ͕ߴ଎ʹਐԽ͢Δ

  43. Web։ൃٕज़͸·͞ʹΤίγεςϜͷମݱ • ࢓༷͕ඪ४Խ͞Εϒϥ΢βϕϯμʔ͕࣮૷ • αʔυύʔςΟͷϥΠϒϥϦͷҠΓมΘΓ • ڊେςΫϊϩδʔاۀ͕ओಋ͢ΔOSSίϛϡχςΟ

  44. ݱࡏͷWeb։ൃ؀ڥ͸
 ΤίγεςϜ͕͏·͘ػೳ͠ɺ
 ͱͯͭ΋ͳ͍଎౓ͰਐԽ͍ͯ͠Δʂ

  45. ͳͥWebٕज़ͷਐԽ͕ૣ͘ͳΔͷ͔ • WebʹؔΘΔਓޱͷଟ͞ • ଟ͘ͷϢʔβʔ͕༷ʑͳ؀ڥͰϒϥ΢βΛ࢖͏ • ଟ͘ͷWeb։ൃऀ͕JavaScriptΛ࢖͏

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

  47. iOSΤϯδχΞ΋ΤίγεςϜΛ৐Γ͜ͳ͢ • Swift΍OSSϥΠϒϥϦͷΤίγεςϜʹࢀՃ͢Δ • WebΞϓϦ։ൃٕज़ΛऔΓࠐΉ • Server-side Swift ͷ׆༻ͱ͔!

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

  49. ·ͱΊ • PWA͸ਐԽͨ͠WebΞϓϦͷ͜ͱͰ͋Δ • ਐԽͷૣ͍Webͷ؀ڥ͔Β஌ࣝΛऔΓೖΕΑ͏ • iOS։ൃͷΤίγεςϜ΍ίϛϡχςΟʹࢀՃ͠Α͏