PWA基礎_2

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

Transcript

1. PWAೖ໳ߨ࠲ Part2 ʔ PWAͷجૅᶄ ʔ
2. ໨࣍ ▹  Service Workerͱ͸ʁ ▹  Service Workerͷಛ௃ɾͰ͖Δ͜ͱ ▹  ·ͱΊ 2
3. Service Workerͱ͸ʁ
4. “ WebϖʔδͷཪଆͰϓϩΩγ αʔόͱͯ͠ಈ͘εΫϦϓτ 4
5. Service Workerͱ͸ʁ ▹  Web WorkerͷҰछ ▹  Webϖʔδͱ͸ผεϨουʢ=όοΫάϥ ΢ϯυʣͰεΫϦϓτॲཧΛಈ࡞ͤ͞Δ࢓ ૊Έ ▹  ϓϩΩγαʔόͱͯ͠ͷಈ࡞ ▹  Webϖʔδ͔ΒͷϦΫΤετΛίϯτϩʔ ϧͯ͠ɺΦϑϥΠϯମݧΛఏڙ 5
6. 6 Service Worker֓೦ਤ Local Internet Page Service Worker Cache IndexedDB Internet Server Catch Request Background Sync Listen Push Event
7. Service Worker ಛ௃ɾͰ͖Δ͜ͱ
8. ಈ࡞؀ڥ ▹  Chrome46Ҏ߱ ▹  Safari11.1ʢiOS11.3ʣҎ߱ ▹  ཁHTTPS ▹  ઃஔͨ͠֊૚ҎԼͷfetchΠϕϯτΛड͚औ Δ͜ͱ͕Ͱ͖Δ 8
9. Ͱ͖Δ͜ͱ ▹  Ωϟογϡ ▹  Cache API ▹  ϓογϡ௨஌ ▹  PushEvent ▹  όοΫάϥ΢ϯυಉظ ▹  SyncEvent 9
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ΠϕϯτΛϋ ϯυϦϯάͰ͖Δঢ়ଶ
11. ར༻ՄೳͳΠϕϯτ ▹  install ▹  activate ▹  message ▹  fetch ▹  sync ▹  push 11
12. ੍໿ɾ஫ҙ఺ ▹  DOMʹ௚઀ΞΫηεͰ͖ͳ͍ ▹  fetch()ͷσϑΥϧτͰΫϨσϯγϟϧ͕ૹΒΕ ͳ͍ͷͰɺcookieΛؚΊ͍ͨ৔߹͸credentials Λ’include’ͱ͢Δ ▹  ඇCORSͳϦΫΤετ͸σϑΥϧτͰࣦഊ͢Δ ▹  Service Worker͸ඞཁͳͱ͖ͷΈىಈ͢ΔͷͰɺ ϥΠϑαΠΫϧؒͰσʔλΛڞ༗͍ͨ͠৔߹͸ IndexedDBΛ࢖༻͢Δ 12
13. ·ͱΊ ▹  PWAʹ͓͚ΔΦϑϥΠϯΩϟογϡɺϓο γϡ௨஌ɺόοΫάϥ΢ϯυಉظͷػೳ͸ Service WorkerʹΑͬͯఏڙ͞ΕΔ ▹  Installing, Waiting, Activeͷঢ়ଶΛίϯτϩ ʔϧͯ͠ɺద੾ʹػೳΛ࣮૷͢Δ ▹  Service Worker͸Webϖʔδͱ͸ผεϨο υͰಈ࡞͢ΔͨΊɺDOMʹ௚઀ΞΫηεͰ ͖ͳ͍ 13
14. END