Tweet
Tweet

Slide 1

Slide 1 text

Pasta-K [email protected] 2018/09/29 at Ԭࢁ৓ (Y8 in ৓) ΢ΣϒΞϓϦέʔγϣϯ͕ ΦϑϥΠϯͰ΋ಈ࡞͢ΔΑ͏ʹ ΍͍ͬͯͬͨ࿩ v 1.1.0(2018/10/04)

Slide 2

Slide 2 text

Pasta-K / @pastak

Slide 3

Slide 3 text

• ژ౎େֶ޻ֶ෦৘ใֶՊ ܭࢉػՊֶίʔε6ճੜ • KMC ݩ޿ใ • Nota Inc Gyazo։ൃνʔϜ ΞϧόΠτ • JavaScript / React / Ruby on Rails • Browser Extension • גࣜձࣾ͸ͯͳ ΞϧόΠτ • TypeScript

Slide 4

Slide 4 text

• ژ౎େֶ޻ֶ෦৘ใֶՊ ܭࢉػՊֶίʔε6ճੜ • KMC ݩ޿ใ • Nota Inc Gyazo։ൃνʔϜ ΞϧόΠτ • JavaScript / React / Ruby on Rails • Browser Extension • גࣜձࣾ͸ͯͳ ΞϧόΠτ • TypeScript

Slide 5

Slide 5 text

Supported by && We are hiring!!

Slide 6

Slide 6 text

໨࣍ • ΢ΣϒΞϓϦέʔγϣϯΛΦϑϥΠϯରԠ͢ΔͨΊʹඞཁͳ͜ͱ • ServiceWorkerʹ͍ͭͯ • Ωϟογϯάઓུߟʹ͍ͭͯ • ։ൃதʹૺ۰ͨ͠ΞϨϠίϨϠͷ͝঺հ

Slide 7

Slide 7 text

ϚϯΨϏϡʔϫʔΛ࡞͍ͬͯ·͢ • GigaViewerͱ͍͏໊લ • ΢ΣϒαΠτͰͷϚϯΨӾཡʹಛԽ͍ͯ͠Δ • ϚϯΨϏϡʔϫʔҎ֎ʹ΋ϝσΟΞຖͷτοϓϖʔδ΍ίϯςϯπͳͲͷ؅ཧը໘ ΋͍࣋ͬͯΔ • ৄ͘͠͸ id:tkzwtks ͷʮ͸ͯͳͱWebϚϯΨαʔϏεͷาΈʯ* Λ • ʮͱͳΓͷϠϯάδϟϯϓʯͳͲݱࡏ6αΠτͰར༻͞Ε͍ͯΔ *: https://speakerdeck.com/tkzwtks/hatena-engineer-seminar-10

Slide 8

Slide 8 text

GigaViewerͷΦϑϥΠϯରԠ • ʮͱͳΓͷϠϯάδϟϯϓʯͰར༻Ͱ ͖ΔΑ͏ʹͳΓ·ͨ͠ • http://tonarinoyj.hatenablog.com/ entry/2018/09/27/165752 • ࠓ೔͸͜ͷ࿩Λ͠·͢

Slide 9

Slide 9 text

ࠓճͷΦϑϥΠϯରԠཁ݅ • τοϓϖʔδͳͲ͸ݟΕͳͯ͘΋ྑ͍ • ୅ସʹͳΔΦϑϥΠϯͰಡΊΔ࿩ͷҰཡ͕͋Ε͹OK • ϏϡʔϫʔϖʔδΛΩϟογϡͯ͠ಡΊΔΑ͏ʹ͢Δɻ͜ͷͱ͖ը૾ͳͲ΋ҰॹʹΩϟογϡ ʹࡌͤΔɻ • ԿΛಡΊΔΑ͏ʹ͢Δ͔͸Ϣʔβʔ͕બ୒͢Δ • Ұఆͷظ͕ؒ΍ͬͯ͘Δͱফ͑Δʢͣͬͱ୺຤ʹ࢒Γଓ͚Δ͜ͱ͸ͳ͍ʣ • ΞϓϦέʔγϣϯͷಛ௃ͱͯ͠(ࠓճͷର৅ൣғʹ͸)POSTͷΤϯυϙΠϯτ͸ແ͍

Slide 10

Slide 10 text

΢ΣϒΞϓϦέʔγϣϯΛ ΦϑϥΠϯରԠ͢ΔͨΊʹ ඞཁͳ͜ͱ

Slide 11

Slide 11 text

ԿΛ͢Ε͹ྑ͍ͷ͔ • ΍͍ͬͯ͘ؾ࣋ͪΛߴΊΔ • HTTPSରԠ͢Δ • ServiceWorker഑Δ • Ϣʔβʔͷ؀ڥʹΩϟογϡΛஔ͘ • ׬੒

Slide 12

Slide 12 text

ԿΛ͢Ε͹ྑ͍ͷ͔ • ΍͍ͬͯ͘ؾ࣋ͪΛߴΊΔ • HTTPSରԠ͢Δ • ServiceWorker഑Δ • Ϣʔβʔͷ؀ڥʹΩϟογϡΛஔ͘ • ׬੒ ߴ·ͬͯ·͔͢ʁ )5514Ͱ͢ΑͶʁ

Slide 13

Slide 13 text

ԿΛ͢Ε͹ྑ͍ͷ͔ • ΍͍ͬͯ͘ؾ࣋ͪΛߴΊΔ • HTTPSରԠ͢Δ • ServiceWorker഑Δ • Ϣʔβʔͷ؀ڥʹΩϟογϡΛஔ͘ • ׬੒

Slide 14

Slide 14 text

ServiceWorkerʹ͍ͭͯ

Slide 15

Slide 15 text

ServiceWorkerͱ͸ > Service Worker ͸ϒϥ΢β͕ Web ϖʔδͱ͸ผʹόοΫάϥ΢ϯ υͰ࣮ߦ͢ΔεΫϦϓτͰɺWeb ϖʔδ΍ϢʔβͷΠϯλϥΫγϣ ϯΛඞཁͱ͠ͳ͍ػೳΛ Web ʹ΋ͨΒ͠·͢ɻ* > Service Worker ͸ϓϩάϥϜՄೳͳωοτϫʔΫϓϩΩγͰ͢ɻ* *: https://developers.google.com/web/fundamentals/primers/service-workers/

Slide 16

Slide 16 text

ServiceWorkerͱ͸ • JSͰهड़ͯ͠ɺϢʔβʔʹఏڙ͢ΔϓϩΩγͩͱࢥ͑͹ྑ͍ • ͍ͭͰʹPUSH௨஌΍όοΫάϥ΢ϯυಉظͳͲ΋͋Δ • JavaScript Workerͷ1छͳͷͰDOMʹ͸ΞΫηεͰ͖ͳ͍ (postMessageͰ΍ΓͱΓ͢Δ) • HTTPSඞਢ

Slide 17

Slide 17 text

ServiceWorker͕ແ͍ͱ͖ ΞϓϦέʔγϣϯ ωοτϫʔΫ Ωϟογϡ

Slide 18

Slide 18 text

ServiceWorker͕ແ͍ͱ͖ ΞϓϦέʔγϣϯ ωοτϫʔΫ Ωϟογϡ ͲͪΒΛͲ͏࢖͏͔͸ )551ϔομʔͳͲ͔Β ϒϥ΢β͕ܾఆ͢Δ

Slide 19

Slide 19 text

ServiceWorker͕͋Δͱ͖ ΞϓϦέʔγϣϯ Service Worker ωοτϫʔΫ Ωϟογϡ

Slide 20

Slide 20 text

ServiceWorker͕͋Δͱ͖ ΞϓϦέʔγϣϯ Service Worker ωοτϫʔΫ Ωϟογϡ ΞϓϦέʔγϣϯ͸௨৴ͷઌ͕ Ͳ͏ͳ͍ͬͯΔ͔Λҙࣝ͢Δඞཁ͕ͳ͍ ௨৴ΛͲ͏ॲཧ͢Δ͔͸48ʹҠৡ

Slide 21

Slide 21 text

ServiceWorker͕͋Δͱ͖ ΞϓϦέʔγϣϯ Service Worker ωοτϫʔΫ Ωϟογϡ Ͳ͏෼ذͤ͞Δ͔͸ +BWB4DSJQUͰ هड़͓ͯ͘͠

Slide 22

Slide 22 text

ServiceWorkerͰ΍Δ͜ͱ • ΦϑϥΠϯͰΞϓϦέʔγϣϯ͕ಈ࡞͢ΔͨΊʹඞཁͳωοτϫʔ Ϋ௨৴ͷ݁ՌΛฦ͢ඞཁ͕͋Δ • ωοτϫʔΫΛϓϩΩγͯ͠ྑ͍ײ͡ʹΩϟογϡ(·ͨ͸μϛʔ· ͨ͸ϦμΠϨΫτ౳)Λฦ͢ • چདྷͷΩϟογϡςΫχοΫ࢖͑ͳ͍ͷͰɺJSͰؤு͍ͬͯ͘

Slide 23

Slide 23 text

ServiceWorkerΛϢʔβʔͷ؀ڥʹొ࿥͢Δ

Slide 24

Slide 24 text

SWͰΩϟογϡฦͨ͠Γ௥Ճͨ͠Γ͢Δ

Slide 25

Slide 25 text

Ωϟογϯάઓུߟʹ͍ͭͯ

Slide 26

Slide 26 text

ΦϑϥΠϯΞϓϦέʔγϣϯͷΩϟογϡ • ΦϑϥΠϯͷ࣌͸جຊతʹશͯͷϦιʔεΛΩϟογϡ͔Β࣋ͬͯ͘Δ ඞཁ͕͋Δ • ͭ·ΓΞϓϦέʔγϣϯ͕(ΦϑϥΠϯͰ)ಈ࡞͢Δͱ͖ɺৗʹશͯͷඞ ཁͳϦιʔε͸Ωϟογϡ͞Ε͍ͯΔ͜ͱ͕ٻΊΒΕΔ • ඞཁͳϦιʔεΛͲͷλΠϛϯάͰͲ͏΍ͬͯΩϟογϡʹࡌͤΔ͔ɺ ΦϯϥΠϯͷͱ͖ͷSWͷৼΔ෣͍ΛͲ͏͢Δ͔ʹ͍ͭͯݕ౼ɾઃܭ͢ Δඞཁ͕͋Δ

Slide 27

Slide 27 text

Service WorkerͷΩϟογϡ • લఏͱͯ͠SWͷΩϟογϡ͸ඇৗʹڧྗ • HTTP headerΛ࢖ͬͨΩϟογϡϨϕϧͷࢦఆͳͲ͸ޮ͔ͳ͍ • Ұ౓Ωϟογϡͨ͠΋ͷΛฦ͢Α͏ͳঢ়ଶʹͳΔͱαʔϏεଆ͔Β͸खग़͠Λ؆୯ʹ͸ग़དྷͳ͘ͳͬ ͯ͠·͍͔Ͷͳ͍ • CDNͷ৔߹͸CDN্ͷΩϟογϡΛඈ͹ͨ͠Γग़དྷΔ͕ɺҰ౓SW͕Πϯετʔϧ͞ΕΔͱ؆୯ ʹ͸ΞϓϦέʔγϣϯ͔ΒมߋͰ͖ͳ͍ʢSWεΫϦϓτͷߋ৽ͳͲ͕ඞཁʹͳΔʣ • Կ͔͠ΒΞϓϦέʔγϣϯଆ͔ΒϢʔβʔ؀ڥͷCacheStorageΛ;ͬඈ͹͢ํ๏Λ͓࣋ͬͯ͘ͱྑ ͍͔΋ʢcacheStorageʹ͸ΫϥΠΞϯτଆ͔Β΋SW͔Β΋ΞΫηεͰ͖Δ)

Slide 28

Slide 28 text

ϦιʔεΩϟογϡͷར༻࣌ͷઓུ • ΩϟογϡϑΝʔετ • جຊతʹશͯͷΩϟογϡΛ͍࣋ͬͯΔͷͰ଎͍ • ωοτϫʔΫϑΝʔετ • ϦιʔεΛ࠷৽ͷঢ়ଶʹอͪ΍͍͢ͷͰ҆શ • έʔεόΠέʔεͰؤுΔ • ্ͷ2ͭͷΠΠτίυϦΛ͍ͨ͠!!!!!!!!!! JSͰؤுΔ

Slide 29

Slide 29 text

ΠΠτίυϦ͢Δͧ • ಉҰURLͰߋ৽ස౓͕௿͍(or ߋ৽͞ΕΔͱURL͕มΘΔ)΋ͷ͸Φϯ ϥΠϯ࣌Ͱ΋ͲΜͲΜΩϟογϡʹدͤΔ • ߋ৽ස౓ͷߴ͍΋ͷ͸ΦϯϥΠϯ࣌͸ωοτϫʔΫ͔Β࣋ͬͯ͘Δ ํʹدͤΔ • ෆཁʹͳͬͨΩϟογϡ͸ྑ͍ײ͡ʹഁغ͢Δ • ↑Λग़དྷΔΑ͏ʹϧʔϧΛ૊ΜͰ͍͘

Slide 30

Slide 30 text

GigaViewerͷΦϑϥΠϯΩϟογϡ࣮૷ • install / activete࣌ʹ༧ΊΩϟογϡ • ΞΠίϯը૾ͳͲͷΞηοτྨ • JS΍CSSͳͲ • ͜ͷͱ͖ʹݹ͍Ωϟογϡ͸ࣺͯΔ • CacheStorageΛ෼͚͓ͯ͘ ਤ͸ https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ ΑΓ

Slide 31

Slide 31 text

install࣌ʹΩϟογϡΛ༻ҙ activate࣌ʹݹ͍ͷΛഁغ

Slide 32

Slide 32 text

GigaViewerͷΦϑϥΠϯΩϟογϡ࣮૷ • ϚϯΨͷը૾ʹؔͯ͠͸URL͕Ұҙ ͳͷͰɺϢʔβʔ͕ϖʔδΛ࣮ࡍʹ ಡΉͳͲͨ͠৔߹Ͱ΋Ұ౓௨৴ͨ͠ ΒҎޙ͸ΩϟογϡʹࡌͤͯɺͦΕ Λ࢖͏ • ΦϑϥΠϯҎ֎ͷͱ͖Ͱ΋ωοτ ϫʔΫΛޮ཰ԽͰ͖ΔΑ͏ʹ ਤ͸ https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ ΑΓ

Slide 33

Slide 33 text

GigaViewerͷΦϑϥΠϯΩϟογϡ࣮૷ • ϚϯΨͷը૾ʹؔͯ͠͸URL͕Ұҙ ͳͷͰɺϢʔβʔ͕ϖʔδΛ࣮ࡍʹ ಡΉͳͲͨ͠৔߹Ͱ΋Ұ౓௨৴ͨ͠ ΒҎޙ͸ΩϟογϡʹࡌͤͯɺͦΕ Λ࢖͏ • ΦϑϥΠϯҎ֎ͷͱ͖Ͱ΋ωοτ ϫʔΫΛޮ཰ԽͰ͖ΔΑ͏ʹ ਤ͸ https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ ΑΓ ༰ྔͷ౎߹ͳͲ͕͋Γ ͜ͷ࡞ઓ͸ࢭΊ·ͨ͠ (ৄࡉޙड़)

Slide 34

Slide 34 text

GigaViewerͷΦϑϥΠϯΩϟογϡ࣮૷ • ωοτϫʔΫ͕ΦϯϥΠϯͷͱ͖͸HTML/ JS/CSS͸ωοτϫʔΫ͔Βऔಘ͢Δ • Ωϟογϡ͸͍ͯ͠Δ΋ͷͷ҆શଆʹ౗ ͍ͯ͠Δ • ಛʹHTML͸ΦϑϥΠϯͰ͋Δͱ͖Ҏ֎ ͸ΩϟογϡΛར༻͠ͳ͍ʢͦ΋ͦ΋ Ωϟογϡ΋͍ͯ͠ͳ͍ʣ ਤ͸ https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ ΑΓ

Slide 35

Slide 35 text

ΦϑϥΠϯΩϟογϡ࡞੒λΠϛϯά • Ξηοτྨ → ServiceWorkerͷinstall࣌ • ͦͷଞ → Ϣʔβʔ͕ΦϑϥΠϯԽཁٻ࣌ • ϚϯΨͷϖʔδͷը૾ɾϏϡʔϫʔϖʔδͷHTML • ͜ͷͱ͖ʹݖݶ΍Ӿཡظݶɺ༰ྔͷ໰୊͕ແ͍͔ͳͲΛݕূ͢ Δ

Slide 36

Slide 36 text

Cache APIʹ͍ͭͯ • CacheStorageΛѻ͏JSͷAPIʹؔͯ͠͸ServiceWorker্Ͱ ΋ɺΫϥΠΞϯτͷJS͔Β΋ΞΫηεͰ͖Δ • Ϧιʔεͷ௥Ճ΍࡟আͳͲ͕ωοτϫʔΫfetchҎ֎ͷϢʔβʔ ΞΫγϣϯΛىҼ͢Δ৔߹͸ΫϥΠΞϯταΠυͰ΍ͬͯ͠· ͏ͷ΋ख

Slide 37

Slide 37 text

ԿΛ͢Ε͹ྑ͍ͷ͔ • ΍͍ͬͯ͘ؾ࣋ͪΛߴΊΔ • HTTPSରԠ͢Δ • ServiceWorker഑Δ • Ϣʔβʔͷ؀ڥʹΩϟογϡΛஔ͘ • ׬੒

Slide 38

Slide 38 text

ԿΛ͢Ε͹ྑ͍ͷ͔ • ΍͍ͬͯ͘ؾ࣋ͪΛߴΊΔ • HTTPSରԠ͢Δ • ServiceWorker഑Δ • Ϣʔβʔͷ؀ڥʹΩϟογϡΛஔ͘ • ׬੒ օ͞Μग़དྷΔΑ͏ʹ ͳΓ·ͨ͠Ͷʁ

Slide 39

Slide 39 text

ԿΛ͢Ε͹ྑ͍ͷ͔ • ΍͍ͬͯ͘ؾ࣋ͪΛߴΊΔ • HTTPSରԠ͢Δ • ServiceWorker഑Δ • Ϣʔβʔͷ؀ڥʹΩϟογϡΛஔ͘ • ׬੒ વ͏͸໰԰͕ Է͞ͳ͍

Slide 40

Slide 40 text

։ൃதʹૺ۰ͨ͠ ΞϨϠίϨϠͷ͝঺հ

Slide 41

Slide 41 text

ΦϑϥΠϯͰಡΊΔ࿩ͷҰཡΛఏڙ͢Δ • localStorage vs IndexedDB • खܰ͞ͷͨΊʹlocalStorageΛબ୒ • IndexedDBͰ͋Ε͹SWͷίϯςΩετ͔ΒͰ΋ΞΫηεՄೳ • SW͔Β͸ݟΕͳ͍ͷͰɺྫ͑͹ը૾ͱ࿩ͷඥ͚ͮ৘ใΛLS͔ΒಘΔͱ͔͸ग़དྷͳ͍ • ಡΊΔظݶͳͲ΋͜͜ʹೖ͍ͬͯΔ • ΦϯϥΠϯ࣌ʹJSONΛऔಘͯ͠ಉظͤͯ͞ݕূ͍ͯ͠Δ

Slide 42

Slide 42 text

ΦϑϥΠϯͰݟΕͳ͍ϖʔδରࡦ • Response.redirect()Λฦͯ͠ϦμΠϨΫτ͢Δ • ྫ͑͹ΦϑϥΠϯ༻ͷτοϓϖʔδͳͲΛ༻ҙͯ͠ࣄલʹΩϟο γϡ͓͍ͯͯ͠ɺͦͷURLʹϦμΠϨΫτ • طଘͷϖʔδΛ࢖ͬͨΓͯ͠΋ྑ͍Ͱ͢Ͷ

Slide 43

Slide 43 text

ΦϑϥΠϯͷ৔߹͸ϦμΠϨΫτ͢Δ

Slide 44

Slide 44 text

ΦϑϥΠϯ൑ఆʹ͍ͭͯ • ΦϑϥΠϯͷͱ͖͚ͩredirect͢Δͱ͔΍Γ͍ͨͰ͢ΑͶ • navigator.onLineͰϒϥ΢β͕ΦϯϥΠϯ͔Ͳ͏͔औΕΔ • iOSͷSafari͸͜Ε͕ৗʹtrue • https://bugs.webkit.org/show_bug.cgi?id=171277 • ΦϑϥΠϯͰ͋Δ͜ͱΛ஌Δ͜ͱ͕ग़དྷͳ͍ • ௨৴ͯ͠ΈΔ͔͠ແ͍

Slide 45

Slide 45 text

อଘՄೳ༰ྔʹ͍ͭͯ • Safari͚ͩۃ୺ʹগͳ͍(ଞͷϒϥ΢β͸΄΅ແ੍ݶͳͷʹରͯ͠ɺ Safari͸໿50MBఔ౓ʹݟ͑Δ) • navigator.storage.estimate ར༻Մೳ༰ྔͱར༻தͷ༰ྔΛ֬ೝՄೳ • ͜ͷAPIΛSafari͸ະ࣮૷ͳͷͰɺΩϟογϡΛอଘͯ͠Έͯ༰ྔ௒ ա͍ͯ͠ΔͱɺQuotaExceededError͕ฦͬͯ͘ΔͷͰྑ͠ͳʹ͢Δ

Slide 46

Slide 46 text

։ൃ؀ڥ • MS EdgeͰ͸WorkerεΫϦϓτΛऔಘ͢Δͱ͖ʹcredential͕෇ ༩Ͱ͖ͳ͍ͷͰؾΛ͚ͭ·͠ΐ͏ • https://developer.microsoft.com/en-us/microsoft-edge/ platform/issues/17360912/ • ྫ͑͹ɺBasicೝূ΍cookieೝূͳͲͰक͍ͬͯΔ؀ڥ্Ͱͷݕ ূͳͲ͕ࠔ೉ʹͳΔ

Slide 47

Slide 47 text

։ൃ؀ڥ • ։ൃ༻ͷhostͷͱ͖౳͚ͩBasicೝূ΍cookieೝূͷͨΊʹɺcredentialΛޙ෇͚ ͢Δ৔߹ • fetchΠϕϯτͰऔͬͨRequestΦϒδΣΫτ͸࢖͍ճͤͳ͍ • Request.clone()Ͱෳ੡͢Δͱ࢖͑Δ • Request.credentials͸readonlyͳͷͰखͰΦϒδΣΫτΛ࡞Γ௚͍ͯ͠Δ… • ͜ΕͬͯͳΜͱ্͔ख͘ग़དྷͨΓ͠·ͤΜ͔Ͷ

Slide 48

Slide 48 text

ΩϟογϡετϨʔδ΁ͷΞΫηε଎౓໰୊ • ૉ๿ʹ࣮૷͢Δͱ1ͭͷΩϟογϡετϨʔδΛ࢖͍ճ͢͜ͱʹͳ Δ • ओʹChromeͰɺΩϟογϡετϨʔδ಺ͷϦιʔε਺͕૿͑Δͱɺ Ϧιʔε਺ͷ2৐ఔ౓Ϩεϙϯε͕஗͘ͳΔݱ৅͕͋Δ • https://bugs.chromium.org/p/chromium/issues/detail? id=682677

Slide 49

Slide 49 text

ΩϟογϡετϨʔδ΁ͷΞΫηε଎౓໰୊ • ΩϟογϡετϨʔδʹ400݅΄ͲϦιʔε͕ೖ͍ͬͯΔঢ়ଶ

Slide 50

Slide 50 text

ΩϟογϡετϨʔδ΁ͷΞΫηε଎౓໰୊ • ΩϟογϡετϨʔδʹ400݅΄ͲϦιʔε͕ೖ͍ͬͯΔঢ়ଶ Ϧιʔεͷऔಘʹҟ༷ʹ࣌ؒ ͕͔͔͍ͬͯΔ

Slide 51

Slide 51 text

ΩϟογϡετϨʔδ΁ͷΞΫηε଎౓໰୊ • ΩϟογϡετϨʔδʹ400݅΄ͲϦιʔε͕ೖ͍ͬͯΔঢ়ଶ 4FSWJDF8PSLFS͔Βͷ ϨεϙϯεΛ଴ͪଓ͚͍ͯΔ

Slide 52

Slide 52 text

ΩϟογϡετϨʔδ΁ͷΞΫηε଎౓໰୊ • ରࡦͱͯ͠͸ͳΜΒ͔ͷنଇͰΩϟογϡετϨʔδΛ෼͚Δ • ΞηοτͱͦΕҎ֎(ΩϟογϡλΠϛϯάͰ෼͚Δ) • ֤࿩ͷմͳͲͰ෼͚Δ(CSຖ·ͱΊͯ࡟আͰ͖ͯศར) • ͜ͷͱ͖ʹLSʹ৘ใΛೖΕ͍ͯͨͷͰɺ࿩ͱը૾ͷରԠΛSWͰଈ࠲ʹ஌ Εͳ͔ͬͨͷͰɺURL͔Βద౰ʹετϨʔδ໊Λੜ੒ͯ͠ৼΓ෼͚Δ͜ͱ ʹͳͬͨ…

Slide 53

Slide 53 text

ΩϟογϡετϨʔδ΁ͷΞΫηε଎౓໰୊ • CacheStorageͷόοΫΤϯυΛ࡞Γ௚͢ܭը͕͋ΔΑ͏ͳͷͰকདྷ తʹ͸վળ͞Εͦ͏ʁ • https://bugs.chromium.org/p/chromium/issues/detail?id=886861 • ෆ֬ఆ͚ͩͲChrome73ʹ͸ೖΕ͍ͨͱ͍͏ײ͡Β͍͠ • Varyϔομʔ΁ͷରԠͷͨΊͰ΋͋ΔΒ͍͠

Slide 54

Slide 54 text

PWA? SPA? • ΢ΣϒΞϓϦέʔγϣϯΛΦϑϥΠϯରԠͤ͞ΔͨΊʹPWA΍SPA ʹରԠ͢Δඞཁ͸ͳ͍ • ΦϑϥΠϯରԠͳͲΛਐΊ͍ͯ͘ͱॴҦ"PWA"ʹͳ͍ͬͯ͘ • SPAʹͳ͍ͬͯΔͱViewͷΩϟογϡͳͲ͕खܰʹͳΔ • ϧʔςΟϯά΋JSͰ΍͍ͬͯΔͷͰίϯτϩʔϧָ͕

Slide 55

Slide 55 text

·ͱΊ • ΢ΣϒΞϓϦέʔγϣϯΛΦϑϥΠϯରԠͤ͞Δํ๏ʹ͍ͭͯɺGigaViewerʢϚϯΨ ϏϡʔϫʔʣΛྫʹ঺հ͠·ͨ͠ • ͪΐͬͱͷServiceWorkerͱϦιʔεͷΩϟογϡ഑৴ઓུ͑͋͞Ε͹ΦϑϥΠϯͰ΋ Ϣʔβʔʹಧ͚ΒΕ·͢ • ؼΓͷ৽װઢͳͲͰʰ໌೔ͪΌΜͷηʔϥʔ෰ʱ(*1)ͳͲΦϑϥΠϯͰಡΜͰΈͯͩ͘ ͍͞ɻ๻͸དྷ͠ͳͷ৽װઢͰʰੜͱࢮͷΩϣ΢ΧΠʱ(*2)ΛಡΈ·ͨ͠ɻ • *1: https://tonarinoyj.jp/episode/13932016480028986061 • *2: https://tonarinoyj.jp/episode/13932016480029095338

Slide 56

Slide 56 text

ϒϥ΢βٕज़ͰϚϯΨϏϡʔϫʔ Λྑ͍ͨ͘͠ਓ͓଴͍ͪͯ͠·͢!!!!!! ͜͜ʹʁͷϩΰೖΔ ͪͳΈʹࣗ෼͸͜ͷTweetͷ1ϲ݄ޙʹΞϧόΠτͰϚϯΨϏϡʔϫʔॻ͘͜ͱʹͳͬͨͷͰ͋ͬͨ