Upgrade to Pro — share decks privately, control downloads, hide ads and more …

これからのウェブの話をしよう – あるいは、ServiceWorkerとPWAで変わるフロントエンドとモバイル開発について

Edward Fox
February 23, 2018

これからのウェブの話をしよう – あるいは、ServiceWorkerとPWAで変わるフロントエンドとモバイル開発について

20180223 @社内LT会

Edward Fox

February 23, 2018
Tweet

More Decks by Edward Fox

Other Decks in Technology

Transcript

  1. ͜Ε͔Βͷ΢Σϒͷ
    ࿩Λ͠Α͏
    ͋Δ͍͸ɺServiceWorkerͱPWAͰมΘΔ
    ϑϩϯτΤϯυͱϞόΠϧ։ൃʹ͍ͭͯ
    Edward Fox 2018/02/23
    @Repro Weekly MTG

    View Slide

  2. @edwardkenfox
    Edward Fox
    ɾΤϯδχΞ@Reproגࣜձࣾ
    ɾ୅ʑ໦ͷํ͔Βདྷ·ͨ͠
    ɾRuby, JavaScript, AWS
    ɾϒϥ΢βٕज़શൠ, PWA, Vue.js

    View Slide

  3. TOC
    1. ServiceWorkerͱ͸
    2. PWAͱ͸
    3. Կ͕ʢ୭͕ʣخ͍͠ͷ͔
    4. ͜Ε͔ΒԿ͕ى͖Δͷ͔

    View Slide

  4. 1. ServiceWorkerͱ͸

    View Slide

  5. ϒϥ΢βͷUIεϨου͔Β
    ಠཱͯ͠ಈ͘
    ϩʔΧϧϓϩΩγ

    View Slide

  6. ɾUIεϨου͔ΒͷωοτϫʔΫϦ
    ΫΤετΛϓϩΩγͰ͖Δ
    ɾlocalStorage΍IndexedDBͱ͸ผͷ
    ΩϟογϡετϨʔδΛར༻Մೳ
    ɾΩϟογϡ͔ΒϨεϙϯεΛ
    ฦͨ͠ΓɺϨεϙϯεΛվ᜵Ͱ͖Δ
    ɾΦϑϥΠϯ࣌΋ಈ࡞͢Δ

    View Slide

  7. σϞ
    http://127.0.0.1:8889/

    View Slide

  8. 2. PWAͱ͸

    View Slide

  9. Progressive
    Web
    Applications

    View Slide

  10. ServiceWorkerͳͲͷ
    ઌਐతͳϒϥ΢βAPIΛ࢖͍
    ༏ΕͨϢʔβʔମݧΛ
    ఏڙ͢ΔΞϓϦέʔγϣϯ

    View Slide

  11. ※ ಛఆͷٕज़΍࢓༷ɺ
    ϑϨʔϜϫʔΫΛࢦ͢
    ༻ޠͰ͸ͳ͍

    View Slide

  12. ɾΦϑϥΠϯରԠ
    ɾϓογϡ௨஌
    ɾϗʔϜεΫϦʔϯʹ௥Ճ
    ͳͲϞόΠϧΞϓϦʹ͸ଘࡏ
    ͍ͯͨ͠UXΛ΢ΣϒͰ΋
    ఏڙ͠Α͏ɺͱ͍͏ಈ͖

    View Slide

  13. ༨ஊ

    View Slide

  14. ΢Σϒϓογϡ
    ݏΘΕ͗͢໰୊

    View Slide

  15. View Slide

  16. 3. Կ͕ʢ୭͕ʣخ͍͠ͷ͔

    View Slide

  17. 3ͭͷొ৔ਓ෺

    View Slide

  18. ɾPWAΛਪਐ͢Δاۀ
    ɾαʔϏεఏڙऀ
    ɾΤϯυϢʔβʔ

    View Slide

  19. ͦΕͧΕͷϝϦοτΛ
    ݟͯΈΔ

    View Slide

  20. PWAΛਪਐ͢Δاۀͷࢹ఺
    ɾ༏ΕͨϢʔβʔମݧ
    ɾΞϓϦˠ΢Σϒͷ༳Γ໭͠
    => ΢Σϒ޿ࠂ૿ʁ

    View Slide

  21. αʔϏεఏڙऀͷࢹ఺
    ɾࣗ༝ʹϦϦʔεͰ͖Δ
    => ϦδΣΫτʹΑΔڪා੓࣏
    ͔Βͷ୤٫
    => PDCAߴ଎Խ

    View Slide

  22. ※๭PWAԽ͞ΕͨαʔϏεͷ
    தͷਓ΋վળ΍hotfix͕
    ͙͢ϦϦʔεͰ͖Δͷ͕
    ΢ϚΈͱݴͬͯ·ͨ͠

    View Slide

  23. ΤϯυϢʔβʔͷࢹ఺
    ɾUXʹมԽ͸ͳ͍ʢ͍·ͷͱ͜Ζʣ
    ɾΠϯετʔϧʗΞοϓσʔτ͕ෆ
    ཁʢ˺ΪΨઅ໿ʁʣ

    View Slide

  24. 4. ͜Ε͔ΒԿ͕ى͖Δͷ͔

    View Slide

  25. 4.1.
    ΢ΣϒͷਐԽͷૅͱͳΔ

    View Slide

  26. ServiceWorker
    + Gamepad API
    + WebAssembly
    => େن໛ϒϥ΢βήʔϜ
    ʢΦϑϥΠϯ΋ରԠʣ

    View Slide

  27. ServiceWorker
    + Geolocation API,
    navigator.bluetooth,
    navigator.getBattery() & etc.
    => ϞόΠϧΛओͱͨ͠
    ৽͍͠λΠϓͷαʔϏε

    View Slide

  28. Web Components
    ES Modules
    Payment Request API
    QUIC
    ͳͲͷ৽͍ٕ͠ज़ͱͷ
    γφδʔ

    View Slide

  29. ϢʔβʔͷՄॲ෼࣌ؒΛ
    ϞόΠϧͷྖҬͷதͰ
    ͍͔ʹୣ͏͔͕େࣄͰ͋Γٕज़
    ΍࣮૷͸ॏཁͰ͸ͳ͍
    => ϞόΠϧΛओͱͨ͠
    ΢ΣϒαʔϏε͕΍ΕΔ͜ͱ͕
    ֨ஈʹ૿͑Δ

    View Slide

  30. 4.2.
    ࠾༻ઓུ͕มΘΔ

    View Slide

  31. ωΠςΟϒΞϓϦ

    ϋΠϒϦουΞϓϦ

    React Native

    PWA

    View Slide

  32. JavaScriptΤϯδχΞͷ
    धཁ⚽⚽

    View Slide

  33. ·ͱΊ

    View Slide

  34. ɾServiceWorker = ϩʔΧϧϓϩΩ
    γ
    ɾPWAͷԸܙ͸UXʹඇͣɺࣗ༝ͳϦ
    Ϧʔεʹͦ͋͜Γ
    ɾاۀͷ։ൃɾվળɾ࠾༻ઓུ͕ม
    ΘΔ
    ɾ΢Σϒ͕Ճ଎౓తʹਐԽ͢Δະདྷ

    View Slide

  35. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide