Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Service Workerͱ͸ʁ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Service Worker ಛ௃ɾͰ͖Δ͜ͱ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

END