PWA基礎_2

Service Workerについてかんたんにまとめてあります。

Transcript

1. PWAೖ໳ߨ࠲
   Part2
   ʔ PWAͷجૅᶄ ʔ
   

   View Slide

2. ໨࣍
   ▹  Service Workerͱ͸ʁ
   ▹  Service Workerͷಛ௃ɾͰ͖Δ͜ͱ
   ▹  ·ͱΊ
   2
   

   View Slide

3. Service Workerͱ͸ʁ
   

   View Slide

4. “
   WebϖʔδͷཪଆͰϓϩΩγ
   αʔόͱͯ͠ಈ͘εΫϦϓτ
   4
   

   View Slide

5. Service Workerͱ͸ʁ
   ▹  Web WorkerͷҰछ
   ▹  Webϖʔδͱ͸ผεϨουʢ=όοΫάϥ
   ΢ϯυʣͰεΫϦϓτॲཧΛಈ࡞ͤ͞Δ࢓
   ૊Έ
   ▹  ϓϩΩγαʔόͱͯ͠ͷಈ࡞
   ▹  Webϖʔδ͔ΒͷϦΫΤετΛίϯτϩʔ
   ϧͯ͠ɺΦϑϥΠϯମݧΛఏڙ
   5
   

   View Slide

6. 6
   Service Worker֓೦ਤ
   Local Internet
   Page Service Worker
   Cache IndexedDB
   Internet
   Server
   Catch Request
   Background Sync
   Listen Push
   Event
   

   View Slide

7. Service Worker
   ಛ௃ɾͰ͖Δ͜ͱ
   

   View Slide

8. ಈ࡞؀ڥ
   ▹  Chrome46Ҏ߱
   ▹  Safari11.1ʢiOS11.3ʣҎ߱
   ▹  ཁHTTPS
   ▹  ઃஔͨ͠֊૚ҎԼͷfetchΠϕϯτΛड͚औ
   Δ͜ͱ͕Ͱ͖Δ
   8
   

   View Slide

9. Ͱ͖Δ͜ͱ
   ▹  Ωϟογϡ
   ▹  Cache API
   ▹  ϓογϡ௨஌
   ▹  PushEvent
   ▹  όοΫάϥ΢ϯυಉظ
   ▹  SyncEvent
   9
   

   View Slide

10. 10
    ϥΠϑαΠΫϧ
    Installing
    Waiting
    Active
    https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers
    •  Service Workerͷొ࿥
    •  ಛఆϦιʔεͷΩϟογϡ
    •  ηοτΞοϓ͕׬ྃͨ͠ঢ়ଶ
    •  ݱࡏΞΫςΟϒͳService Worker
    ͷऴྃ଴ͪ
    •  fetchɺsyncɺpushΠϕϯτΛϋ
    ϯυϦϯάͰ͖Δঢ়ଶ
    

    View Slide

11. ར༻ՄೳͳΠϕϯτ
    ▹  install
    ▹  activate
    ▹  message
    ▹  fetch
    ▹  sync
    ▹  push
    11
    

    View Slide

12. ੍໿ɾ஫ҙ఺
    ▹  DOMʹ௚઀ΞΫηεͰ͖ͳ͍
    ▹  fetch()ͷσϑΥϧτͰΫϨσϯγϟϧ͕ૹΒΕ
    ͳ͍ͷͰɺcookieΛؚΊ͍ͨ৔߹͸credentials
    Λ’include’ͱ͢Δ
    ▹  ඇCORSͳϦΫΤετ͸σϑΥϧτͰࣦഊ͢Δ
    ▹  Service Worker͸ඞཁͳͱ͖ͷΈىಈ͢ΔͷͰɺ
    ϥΠϑαΠΫϧؒͰσʔλΛڞ༗͍ͨ͠৔߹͸
    IndexedDBΛ࢖༻͢Δ
    12
    

    View Slide

13. ·ͱΊ
    ▹  PWAʹ͓͚ΔΦϑϥΠϯΩϟογϡɺϓο
    γϡ௨஌ɺόοΫάϥ΢ϯυಉظͷػೳ͸
    Service WorkerʹΑͬͯఏڙ͞ΕΔ
    ▹  Installing, Waiting, Activeͷঢ়ଶΛίϯτϩ
    ʔϧͯ͠ɺద੾ʹػೳΛ࣮૷͢Δ
    ▹  Service Worker͸Webϖʔδͱ͸ผεϨο
    υͰಈ࡞͢ΔͨΊɺDOMʹ௚઀ΞΫηεͰ
    ͖ͳ͍
    13
    

    View Slide

14. END
    

    View Slide