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

by laiso

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 Notiﬁcation • 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 Notiﬁcation • ϒϥ΢β͔ΒOSͷ௨஌APIΛୟ͚Δ • iOSͷSafari͸ඇରԠ • macOS্ͷSafari͸ಠࣗ࢓༷Ͱ࣮ݱ • Safari Push Notiﬁcations

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 Notiﬁcations

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

ݸਓత༧૝ͱئ๬ • Apple͸OSͷಠࣗػೳΛ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ΤϯδχΞ΋ΤίγεςϜΛ৐Γ͜ͳ͢ • Swift΍OSSϥΠϒϥϦͷΤίγεςϜʹࢀՃ͢Δ • WebΞϓϦ։ൃٕज़ΛऔΓࠐΉ • Server-side Swift ͷ׆༻ͱ͔!

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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