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
   

   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