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

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։ൃͷΤίγεςϜ΍ίϛϡχςΟʹࢀՃ͠Α͏