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

workboxで簡単にオフライン対応しよう_JS祭ver

E63c0cf4a77b1799e02f97689db83d91?s=47 kaidouji85
November 30, 2019

 workboxで簡単にオフライン対応しよう_JS祭ver

E63c0cf4a77b1799e02f97689db83d91?s=128

kaidouji85

November 30, 2019
Tweet

More Decks by kaidouji85

Other Decks in Programming

Transcript

  1. XPSLCPYͰ؆୯ʹ ΦϑϥΠϯରԠ͠Α͏  ౙͷ+BWB4DSJQUࡇJOϝϯόʔζΩϟϦΞ גࣜձࣾΦʔϓϯετϦʔϜ ஛಺ɹ༎հ

  2. ࣗݾ঺հ ஛಺ɹ༎հ ϓϩάϥϚʔ झຯͰήʔϜ࡞ͬͯ·͢ +4େ޷͖

  3. 8&#ΞϓϦ

  4. 8&#ͩͱ ΦϑϥΠϯͰԿ΋ Ͱ͖ͳ͍

  5. ͦͷ໰୊ 8PSLCPYͳΒ ղܾͰ͖Δ

  6. ΞδΣϯμ ΦϑϥΠϯΩϟογϡͱ͸ ඪ४ػೳͰΦϑϥΠϯରԠ XPSLCPYͰΦϑϥΠϯΩϟογϡ͢Δ 4FSWJDF8PSLFSߋ৽໰୊ ·ͱΊ

  7. ΞδΣϯμ ΦϑϥΠϯΩϟογϡͱ͸ ඪ४ػೳͰΦϑϥΠϯରԠ XPSLCPYͰΦϑϥΠϯΩϟογϡ͢Δ 4FSWJDF8PSLFSߋ৽໰୊ ·ͱΊ

  8. ΦϑϥΠϯΩϟογϡ Ұ౓ಡΈࠐΜͩαΠτΛΦϑϥΠϯঢ়ଶ Ͱ΋ݟΔ͜ͱ͕Ͱ͖Δ࢓૊Έ *&Ҏ֎͸Ͳͷϒϥ΢βͰ΋ରԠࡁΈ

  9. αϯϓϧ IUUQTHCSBWFSCVSTUDPN

  10. ղઆ ࣗ࡞ήʔϜͰ͢ Ұ౓ಡΈࠐΊ͹ɺΦϑϥΠϯͰ΋ϓϨΠՄೳ ෭࣍ޮՌͱͯ͠ɺճ໨Ҏ߱ϩʔυ͕ര଎ ίʔυ͸HJUIVCʹެ։͍ͯ͠·͢ IUUQTHJUIVCDPNLBJEPVKJTUVEZUISFFKT

  11. ΞδΣϯμ ΦϑϥΠϯΩϟογϡͱ͸ ඪ४ػೳͰΦϑϥΠϯରԠ XPSLCPYͰΦϑϥΠϯΩϟογϡ͢Δ 4FSWJDF8PSLFSߋ৽໰୊ ·ͱΊ

  12. ඪ४"1*αϯϓϧ XPSLCPYΛ࢖Θͳͯ͘΋ɺ ΦϑϥΠϯΩϟογϡ͸࣮ݱՄೳ αϯϓϧίʔτ͸ҎԼ IUUQTHJUIVCDPNLBJEPVKJDBDIF FYBNQMFCMPCNBTUFSQVCMJDTXKT

  13. None
  14. None
  15. Α͘෼͔Βͳ͍Ͱ͢Ͷ

  16. 4FSWJDF8PSLFSͱ͸ ϒϥ΢βͱ͸ಠཱͯ͠ଘࡏ͢ΔϓϩάϥϜ ϒϥ΢βλϒΛดͯ͡΋ɺ4FSWJDF8PSLFS ͸ಈ͖ଓ͚Δ

  17. 4FSWJF8PSLFSͰग़དྷΔ͜ͱ ΦϑϥΠϯΩϟογϡ 1VTI௨஌ όοΫάϥϯυಉظ

  18. ϒϥ΢β Πϯλʔωοτ

  19. ϒϥ΢β Πϯλʔωοτ 4FSWJDF 8PSLFS $BDIF 4UPSBHF

  20. ඪ४"1*ͷ໰୊ ΩϟογϡɺωοτϫʔΫͷ༏ઌॱҐ͕ ෼͔ΓͮΒ͍ ෆཁͳ΋ͷΛΩϟογϡͯ͠ɺ ༧ظͤ͵ಈ͖Λ͢ΔՄೳੑ͕͋Δ

  21. ΞδΣϯμ ΦϑϥΠϯΩϟογϡͱ͸ ඪ४ػೳͰΦϑϥΠϯରԠ XPSLCPYͰΦϑϥΠϯΩϟογϡ͢Δ 4FSWJDF8PSLFSߋ৽໰୊ ·ͱΊ

  22. 8PSLCPYͱ͸ ΦϑϥΠϯΩϟογϡൺֱత༻ҙʹ ࣮ݱͰ͖ΔϥΠϒϥϦ ΦϑϥΠϯΩϟογϡͷ σϑΝΫτελϯμʔυ ࢦఆͨ͠ϦΫΤετΛΩϟογϡ͢Δ

  23. ίʔυྫ IUUQTHJUIVCDPNLBJEPVKJTUVEZUISFF KTCMPCNBTUFSTSDKTTXKT ઌ΄Ͳৄࡉͨࣗ͠࡞ήʔϜͷҰ෦

  24. None
  25. 1SF$BDIF 3VOUJNF$BDIF /FUXPSL'JSTU $BDIF'JSTU 4UBMF8IJMF3FWBMJEBUF 8PSL#PYΩϟογϡ ͦͷଞॾʑʜ

  26. 4FSWJDF8PSLFSϥΠϑαΠΫϧ */45"-- 8"*5*/( "$5*7"5&

  27. 1SF$BDIF 3VOUJNF$BDIF /FUXPSL'JSTU $BDIF'JSTU 4UBMF8IJMF3FWBMJEBUF 8PSL#PYΩϟογϡ ͦͷଞॾʑʜ

  28. 1SF$BDIF */45"--࣌ʹɺҰ౓͚ͩΩϟογϡ͢Δ Ҏ߱͸ৗʹΩϟογϡ͔ΒऔΓଓ͚Δ Ωϟογϡର৅͸ϑϧύεͰࢦఆ͢Δ ඞཁ࠷௿ݶͷIUNMɺKTɺDTTΛ Ωϟογϡ͢ΔͨΊʹ͋Δ

  29. ϒϥ΢β Πϯλʔωοτ 4FSWJDF 8PSLFS $BDIF 4UPSBHF ͣͬͱ͜͜ʂ $BDIFʹηοτ

  30. None
  31. 1SF$BDIF 3VOUJNF$BDIF /FUXPSL'JSTU $BDIF'JSTU 4UBMF8IJMF3FWBMJEBUF 8PSL#PYΩϟογϡ ͦͷଞॾʑʜ

  32. 3VOUJNF$BDIF ϒϥ΢βͷϦΫΤετʹԠͯ͡ɺ ಈతͰΩϟογϡ͢Δ Ωϟογϡର৅͸ਖ਼نදݱͰࢦఆ͢Δ ωοτϫʔΫɺΩϟογϡͷ༏ઌ౓͸ɺ ΩϟογϡઓུʹΑͬͯมΘΔ

  33. None
  34. 1SF$BDIF 3VOUJNF$BDIF /FUXPSL'JSTU $BDIF'JSTU 4UBMF8IJMF3FWBMJEBUF 8PSL#PYΩϟογϡ ͦͷଞॾʑʜ

  35. /FUXPSL'JSTU جຊతʹωοτϫʔΫ͔Β৘ใΛऔಘ͢Δ ωοτϫʔΫͷϨεϙϯε͕੒ޭͨ͠Βɺ ͦΕΛΩϟογϡʹͭΊΔ ωοτʹͭͳ͕Βͳ͍͚࣌ͩΩϟογϡΛ࢖͏

  36. ϒϥ΢β Πϯλʔωοτ 4FSWJDF 8PSLFS $BDIF 4UPSBHF ୈҰ༏ઌ ͩΊͳΒͬͪ͜ 614&35

  37. 1SF$BDIF 3VOUJNF$BDIF /FUXPSL'JSTU $BDIF'JSTU 4UBMF8IJMF3FWBMJEBUF 8PSL#PYΩϟογϡ ͦͷଞॾʑʜ

  38. $BDIF'JSTU ݪଇͱͯ͠ɺΩϟογϡ͔Β৘ใΛऔಘ͢Δ Ωϟογϡ͕ͳ͍৔߹ɺωοτϫʔΫ͔Β ৘ใΛऔಘ͢Δ ωοτϫʔΫͷϨεϙϯε͕੒ޭͨ͠৔߹ɺ ͦΕΛΩϟογϡʹͭΊΔ Ҏ߱͸ɺωοτϫʔΫͷ৘ใ͕৽͘͠ͳΖ͏͕ɺ ΩϟογϡΛ࢖͍ଓ͚Δ

  39. ϒϥ΢β Πϯλʔωοτ 4FSWJDF 8PSLFS $BDIF 4UPSBHF ͳ͚Ε͹ίον ୈҰ༏ઌ */4&35

  40. 1SF$BDIF 3VOUJNF$BDIF /FUXPSL'JSTU $BDIF'JSTU 4UBMF8IJMF3FWBMJEBUF 8PSL#PYΩϟογϡ ͦͷଞॾʑʜ

  41. 4UBMF8IJMF3FWBMJEBUF ݪଇͱͯ͠ɺΩϟογϡ͔Β৘ใΛฦ͢ ಉ࣌ʹωοτϫʔΫΞΫηεΛͯ͠ɺ ৘ใ͕ߋ৽͞Ε͍ͯͨΒΩϟογϡ΋ߋ৽͢Δ /FUXPSL'JSTUɺ$BDIF'JSTUͷ͍͍ͱ͜औΓͷ Πϝʔδ

  42. ϒϥ΢β Πϯλʔωοτ 4FSWJDF 8PSLFS $BDIF 4UPSBHF ୈҰ༏ઌ 614&35 ͳ͚Ε͹ίον

  43. 8PSLCPYͰղܾͰ͖ͳ͍໰୊ ෆཁͳΩϟογϡΛ͢Δ໰୊͸ղܾͰ͖ͳ͍ "1*ͷ63-Λࢦఆͨ͠Βɺ໰౴ແ༻Ͱ Ωϟογϡ͞ΕΔ ࡞ΓࠐΈόά͸େ෯ʹݮΔ͕ɺ ઃܭόά͸ফ͑ͳ͍

  44. ΞδΣϯμ ΦϑϥΠϯΩϟογϡͱ͸ ඪ४ػೳͰΦϑϥΠϯରԠ XPSLCPYͰΦϑϥΠϯΩϟογϡ͢Δ 4FSWJDF8PSLFSߋ৽໰୊ ·ͱΊ

  45. 48ߋ৽໰୊ͱ͸ 4FSWJDF8PSLFSߋ৽ͨ͠ࡍʹɺ ॳճ͸ੲͷ4FSWJDF8PSLFS͕Քಇ͢Δ໰୊ 4FSWJDF8PSLFSશൠͷ໰୊

  46. 48ߋ৽໰୊ͷৄࡉ લఏ 4FSWJDF8PSLFSΛొ࿥͍ͯͨ͠ͱ͢Δ 4FSWJDF8PSLFSΛߋ৽ͨ͠ ࣄ৅ ॳճʹҎԼ໰୊͕ൃੜ͢Δ ݹ͍4FSWJDF8PSLFS͕ಈ࡞͢Δ ߋ৽લͷ1SF$BDIF͕දࣔ͞ΕΔ

  47. ओͳղܾํ਑ ڧ੍తʹ"DUJWBUFͤ͞Δ ͳΔ΂͘$BDIFΛ࢖Θͳ͍ 4FSWJDF8PSLFS͕ߋ৽͞ΕͨΒɺ ܯࠂը໘ʹڧ੍తʹભҠͤ͞Δ

  48. ओͳղܾํ਑ ڧ੍తʹ"DUJWBUFͤ͞Δ ͳΔ΂͘$BDIFΛ࢖Θͳ͍ 4FSWJDF8PSLFS͕ߋ৽͞ΕͨΒɺ ܯࠂը໘ʹڧ੍తʹભҠͤ͞Δ

  49. ڧ੍తʹ"DUJWBUF ݹ͍4FSWJDF8PSLFS͕Քಇ͍ͯͯ͠΋ɺ ແཧ΍Γ৽͍͠΋ͷʹ੾Γସ͑Δํ๏͸͋Δ ੔߹ੑΛอͭͨΊʹɺϥΠϑαΠΫϧʹ 8"*5*/(͕͋Δ ͦΕΛແࢹ͢Δ৔߹ɺͪΌΜͱઃܭ͠ͳ͍ͱ ഁ୼͢Δ

  50. ओͳղܾํ਑ ڧ੍తʹ"DUJWBUFͤ͞Δ ͳΔ΂͘$BDIFΛ࢖Θͳ͍ 4FSWJDF8PSLFS͕ߋ৽͞ΕͨΒɺ ܯࠂը໘ʹڧ੍తʹભҠͤ͞Δ

  51. ͳΔ΂͘$BDIFΛ࢖Θͳ͍ /FUXPSL'JSUΛͳΔ΂͘༻͍Δ $BDIFʹΑΔߴ଎Խ͸ݟࠐΊͳ͍ ݹ͍4FSWJDF8PSLFS͕Քಇ͢Δ໰୊ ͸ղܾͰ͖ͳ͍

  52. ओͳղܾํ਑ ڧ੍తʹ"DUJWBUFͤ͞Δ ͳΔ΂͘$BDIFΛ࢖Θͳ͍ 4FSWJDF8PSLFS͕ߋ৽͞ΕͨΒɺ ܯࠂը໘ʹڧ੍తʹભҠͤ͞Δ

  53. POVQEBUFGPVOE ͦΕͬΆ͍ίʔϧόοΫؔ਺͕༻ҙ͞Ε͍ͯΔ 4FSWJDF8PSLFS3FHJTUSBUJPOPOVQEBUFGPVOE ݁࿦͔Βݴ͏ͱ࢖͑ͳ͍ ཧ༝͸ɺ4FSWJDF8PSLFSະొ࿥Ͱ΋ ݺ͹ΕΔ͔Β

  54. 4FSWJDF8PSLFSϥΠϑαΠΫϧ */45"-- 8"*5*/( "$5*7"5& ݺ͹ΕΔ ͜͜Ͱ΋ݺ͹ΕΔ

  55. */45"-- 8"*5*/( "$5*7"5& 0/61%"5&'06/%ൃՐ  "$5*7"5&ͳ48͋Γ ϒϥ΢βىಈ࣌  8"*5*/(ͳ48͋Γ 4FSWJDF8PSLFSߋ৽൑ఆ

  56. "$5*7"5&ͳ48ଘࡏ൑ఆ 4FSWJDF8PSLFS3FHJTUSBUJPOBDUJWF OVMM "$5*7"5&ͳ48͕ͳ͍ OVMMҎ֎ "$5*7"5&ͳ48͕͋Δ

  57. ىಈ࣌൑ఆ͕ඞཁͳཧ༝ ͍͖ͳΓ8"*5*/(͔Β࢝·Δέʔε͕͋Δ͔Β */45"--׬ྃޙʹɺλϒΛด͡ͳ͍ͰҎԼΛ ࣮ߦ͢Δ ৽͍͠λϒΛ։͘ ϒϥ΢βϦϩʔυ͢Δ

  58. */45"-- 8"*5*/( "$5*7"5& λϒด͡ͳ͍ ৽نλϒ 03 ϒϥ΢βϦϩʔυ

  59. 8"*5*/(ͳ48ଘࡏ൑ఆ 4FSWJDF8PSLFS3FHJTUSBUJPOXBJUJOH OVMM 8"*5*/(ͳ48͕ͳ͍ OVMMҎ֎ 8"*5*/(ͳ48͕͋Δ

  60. 48ߋ৽൑ఆίʔυྫ IUUQTHJUIVCDPNLBJEPVKJTUVEZUISFF KTCMPCNBTUFSTSDKTBDUJPOTFSWJDF XPSLFSDSFBUFMJTUFOFSKT ྫͷ͝ͱࣗ͘࡞ήʔϜͷҰ෦Ͱ͢ ΞϓϦͷॳظԽ෦෼Ͱݺ͹Ε͍ͯ·͢

  61. None
  62. ΞδΣϯμ ΦϑϥΠϯΩϟογϡͱ͸ ඪ४ػೳͰΦϑϥΠϯରԠ XPSLCPYͰΦϑϥΠϯΩϟογϡ͢Δ 4FSWJDF8PSLFSߋ৽໰୊ ·ͱΊ

  63. ·ͱΊ 8PSLCPYͳΒൺֱత༰қʹ ΦϑϥΠϯΩϟογϡΛ࣮૷Ͱ͖Δ ༻్ʹԠͨ͡ΩϟογϡઓུΛબ΅͏ 4FSWJDF8PSLFSߋ৽໰୊ʹ͍ͭͯ΋ ߟ͓͑ͯ͜͏

  64. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠