iOSエンジニアが知るべきProgressive Web Apps開発のエッセンス / PWA Essentials for iOS Developer - iOSDC 2018
by
laiso
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
iOSΤϯδχΞ͕Δ͖ Progressive Web Apps։ൃͷ Τοηϯε PWA Essentials for iOS Developer - iOSDC 2018 id:laiso
Slide 2
Slide 2 text
Introduction
Slide 3
Slide 3 text
㊗PWA is Coming to iOS✨ ❤
Slide 4
Slide 4 text
PWAͷԿ͕૽͕Ε͍ͯͨͷ͔? • 2017 SafariʹService Workers͕࣮͞ΕΔ • ֤ϝσΟΞͰʮiOSͰPWAαϙʔτ։࢝ʯͱॻ͔ΕΔ • ϒϩάͳͲͰʮωΠςΟϒΞϓϦͷ͕࣌ऴΘͬͨʯͱॻ͔ΕΔ
Slide 5
Slide 5 text
PWA on iOSͷ࣮ࡍ • Service Workers͕͑ΔΑ͏ʹͳͬͨ • Web Clip (ϗʔϜը໘ʹՃ) ͕ Web Manifest ʹରԠͨ͠ • ࣮͜Ε͚ͩ
Slide 6
Slide 6 text
Կ͕ͳͷ͔? • ֦େղऍ͞Ε͕ͨઌߦͯ͠͠·ͬͨ • ਖ਼֬ͳใͰగਖ਼͞Εͳ͔ͬͨ • iOSͱΣϒͷϒϥβٕज़ͷᐆດͳཧղ
Slide 7
Slide 7 text
iOSΤϯδχΞ4ɺ5ਓʹฉ͖·ͨ͠ ʮPWAʹ͍ͭͯͲ͏ࢥ͏ʁʯ • ʮ͍উख(UX)͕Α͘ͳ͍Μ͡Όͳ͍͔ʯ • ʮΞϓϦετΞ͕ͳ͍ͱɾɾʯ
Slide 8
Slide 8 text
iOSͷPWAෆશ • AndroidͰͷPWAͱશ͘ผ • (ผʹͳΔɻͱ͍͏͜ͱࣗମPWAͷಛੑͷ1ͭ)
Slide 9
Slide 9 text
ʮPWA͕ωΠςΟϒΞϓϦΛஔ͖͑Δʯ ͱ͍͏ετʔϦʔຊ࣭తͰͳ͍ʂ
Slide 10
Slide 10 text
τʔΫͷ֓ཁ 1. PWAʹ͍ͭͯຊ࣭తͳ෦ΛΔ 2. iOSΤϯδχΞͷࢹͰPWAΛݟΔ 3. iOSΤϯδχΞ͕WebΞϓϦʹ͓͍ͯͨ͠ํ͕͍͍ཧ༝
Slide 11
Slide 11 text
ࣗݾհ • Web Developer (Node.js, Rails, FirebaseͳͲ) • ݉ iOS Engineer (noarcੈ) • ΞϓϦέʔγϣϯϑϨʔϜϫʔΫͷݚڀ͕झຯ
Slide 12
Slide 12 text
PWAʹ͍ͭͯຊ࣭తͳ෦ΛΔ
Slide 13
Slide 13 text
PWA(Progressive Web Apps)ͱ? • WebΞϓϦͷUXΛ্͢ΔϜʔϒϝϯτ(ӡಈ)ͷ௨শ • Google Chrome։ൃऀΒʹΑͬͯఏএ͞Εͨ
Slide 14
Slide 14 text
PWAͷॏཁੑ͕૿͢എܠ • Google(Chrome): WebΛਐԽͤ͞Δ • Microsoft:(Edge): WindowsΞϓϦ։ൃऀΛ૿͢ • Mozilla(Firefox): Web as Native
Slide 15
Slide 15 text
PWAͷॏཁੑ͕૿͢എܠ • Google(Chrome): WebΛਐԽͤ͞Δ • Microsoft:(Edge): WindowsΞϓϦ։ൃऀΛ૿͢ • Mozilla(Firefox): Web as Native • Apple(Safari): ϊʔϙδ
Slide 16
Slide 16 text
2007ͷʮiOSΞϓϦʯWebͩͬͨ!?
Slide 17
Slide 17 text
ͳͥPWA͕ඞཁͳͷ͔? • ωΠςΟϒΞϓϦͰ࣮ݱͰ͖Δ͕WebΞϓϦͰͰ͖ͳ͍ମݧ • ͦͷҝʹϒϥβଆʹඞཁͳػೳΛ࣮ • ΑΓωΠςΟϒʹ͍ۙͱͯ͠Service Workers Λ׆༻
Slide 18
Slide 18 text
Service Workers • ϒϥβͷΦϑϥΠϯج൫ • ϓϩάϥϛϯάՄೳͳωοτϫʔΫϓϩΩγ • ΦϑϥΠϯ=ϩʔΧϧϚγϯ • WebϖʔδΛද͍ࣔͯ͠Δ࣌Ҏ֎ίʔυ͕࣮ߦͰ͖Δ
Slide 19
Slide 19 text
ͦͷଞͷϒϥβͷ৽ػೳ(API)ͷྫ • Add to Home Screen • Push Notification • Payment API
Slide 20
Slide 20 text
ʮϗʔϜը໘ʹՃʯ
Slide 21
Slide 21 text
ʮϗʔϜը໘ʹՃʯ ͱ Safari
Slide 22
Slide 22 text
ੲ͔ΒͰ͖ͨΑʂ(iOS 2Ҏ߱) (ipn3g.com ΑΓ)
Slide 23
Slide 23 text
Safari Web Clip • ಠࣗϝλλάΛHTMLϔομʹຒΊࠐΉ • ࠷৽൛SafariͰWeb Manifest(JSONܗࣜ)Λαϙʔτ • Service Workers࣮ͷ෭࡞༻?
Slide 24
Slide 24 text
Safari Web Clip
Slide 25
Slide 25 text
Android͞Μ❓❓
Slide 26
Slide 26 text
Push Notification • ϒϥβ͔ΒOSͷ௨APIΛୟ͚Δ • iOSͷSafariඇରԠ • macOS্ͷSafariಠ༷ࣗͰ࣮ݱ • Safari Push Notifications
Slide 27
Slide 27 text
Payment API • Apple Pay on the Web͕͜ͷ ඪ४APIʹରԠ • In-App PurchaseͱผͷΈ
Slide 28
Slide 28 text
ͭ·ΓPWAͱ • ϒϥβʹ࣮͞Εͨ • ৽ػೳΛ͏ͱ • ैདྷͷWebΞϓϦʹෆ͍ͯͨ͠UX͕࣮ݱͰ͖Δ
Slide 29
Slide 29 text
PWAͱʮਐԽͨ͠WebΞϓϦʯ ͷ͜ͱͩͬͨʂ •ωΠςΟϒΞϓϦͱൺֱ͢ΔͷͰͳ͘ •ैདྷͷWebΞϓϦͱൺֱ͢Δ͖
Slide 30
Slide 30 text
WebΞϓϦͱωΠςΟϒΞϓϦͷൺֱ
Slide 31
Slide 31 text
WebΞϓϦͷར • ॊೈͳํ๏ • ಈ࡞ڥ͕ଟ༻
Slide 32
Slide 32 text
ํ๏ͷҧ͍ • iOS: όΠφϦϑΝΠϧͷμϯϩʔυͱΠϯετʔϧ • AppStore༠ಋ • Web: ΠϯΫϦϝϯλϧͳΞοϓσʔτ • Ωϟογϡ+Service Workers • ΦϑϥΠϯϑΝʔετ+ߋ৽ͷࣗಈݕ
Slide 33
Slide 33 text
ΦϑϥΠϯϑΝʔετͱ • σʔλΛऔಘ͠ͳͯ͘UIΛߏͰ͖Δ • Ωϟογϡ͞ΕͨϨεϙϯε͔ΒಡΈࠐΉ
Slide 34
Slide 34 text
App Shell Ϟσϧ https://developers.google.com/web/fundamentals/architecture/app-shell • UIͷϕʔεΛΩϟογϡ͔Βߏ͠ • ίϯςϯπΛಈతʹऔಘ • ωΠςΟϒΞϓϦͷϝϯλϧϝσϧʹ ͍ۙ
Slide 35
Slide 35 text
iOS։ൃͱΦϑϥΠϯϑΝʔετ • UIͷඳըΦϑϥΠϯԽ͞Ε͍ͯΔ • ωοτϫʔΫͷϦτϥΠॲཧ❓ • ΩϟογϡͷϋϯυϦϯά❓
Slide 36
Slide 36 text
WebΞϓϦ͕ࠜຊతʹ๊͑Δ • OS͕ఏڙ͢Δίϯϙʔωϯτͷ׆༻ • ඇػೳతͳUXཁ݅ • ྫ: UIτϥϯδγϣϯ(ը໘ભҠͷΞχϝʔγϣϯ)
Slide 37
Slide 37 text
Safariͷ՝ • macOS/iOSͱ݁߹ͨ͠ػೳ • Safari Push Notifications
Slide 38
Slide 38 text
PWA on iOSͷ՝ • SafariҎ֎ͷϒϥβΛσϑΥϧτʹͰ͖ͳ͍ • WebKitΛڧ੍͞ΕΔ
Slide 39
Slide 39 text
ݸਓత༧ͱئ • AppleOSͷಠࣗػೳΛWebඪ४ʹد͍ͤͨ • Webར༻ऀΛiOS/SafariʹऔΓࠐΈ͍ͨ • Service Workers࣮ͦͷֻΓ
Slide 40
Slide 40 text
iOSΤϯδχΞ͕WebΞϓϦٕज़ ʹ͓͍ͯͨ͠ํ͕͍͍ཧ༝
Slide 41
Slide 41 text
ʮϩʔυϚοϓࢦͱΤίγεςϜࢦʯ (2014 ΞϯΧς) • ϩʔυϚοϓ͔ΒΤίγςϜͷ࣌
Slide 42
Slide 42 text
ΤίγεςϜࢦ • ϩʔυϚοϓاۀ͔Β༩͑ΒΕΔͷ • OSSͳͲͷΤίγεςϜͰࢀՃऀͷҙࢥܾఆ͕ٕज़Λൃలͤ͞Δ • தԝͷҙࢥܾఆΛ࣋ͨͣ༧ଌෆೳͳͷͰશମ͕ߴʹਐԽ͢Δ
Slide 43
Slide 43 text
Web։ൃٕज़·͞ʹΤίγεςϜͷମݱ • ༷͕ඪ४Խ͞Εϒϥβϕϯμʔ͕࣮ • αʔυύʔςΟͷϥΠϒϥϦͷҠΓมΘΓ • ڊେςΫϊϩδʔاۀ͕ओಋ͢ΔOSSίϛϡχςΟ
Slide 44
Slide 44 text
ݱࡏͷWeb։ൃڥ ΤίγεςϜ͕͏·͘ػೳ͠ɺ ͱͯͭͳ͍ͰਐԽ͍ͯ͠Δʂ
Slide 45
Slide 45 text
ͳͥWebٕज़ͷਐԽ͕ૣ͘ͳΔͷ͔ • WebʹؔΘΔਓޱͷଟ͞ • ଟ͘ͷϢʔβʔ͕༷ʑͳڥͰϒϥβΛ͏ • ଟ͘ͷWeb։ൃऀ͕JavaScriptΛ͏
Slide 46
Slide 46 text
2008ʹʮiOSΤϯδχΞʯ ͱ͍͏৬ۀଘࡏ͠ͳ͔ͬͨ
Slide 47
Slide 47 text
iOSΤϯδχΞΤίγεςϜΛΓ͜ͳ͢ • SwiftOSSϥΠϒϥϦͷΤίγεςϜʹࢀՃ͢Δ • WebΞϓϦ։ൃٕज़ΛऔΓࠐΉ • Server-side Swift ͷ׆༻ͱ͔!
Slide 48
Slide 48 text
10ޙͷʮiOSΤϯδχΞʯ
Slide 49
Slide 49 text
·ͱΊ • PWAਐԽͨ͠WebΞϓϦͷ͜ͱͰ͋Δ • ਐԽͷૣ͍Webͷڥ͔ΒࣝΛऔΓೖΕΑ͏ • iOS։ൃͷΤίγεςϜίϛϡχςΟʹࢀՃ͠Α͏