{"id":280,"date":"2025-12-24T14:30:00","date_gmt":"2025-12-24T05:30:00","guid":{"rendered":"https:\/\/hed-g.me\/?p=280"},"modified":"2025-11-25T14:43:00","modified_gmt":"2025-11-25T05:43:00","slug":"service-worker-%ea%b7%b8%eb%a6%ac%ea%b3%a0-%ec%ba%90%ec%8b%b1-%ec%a0%84%eb%9e%b5","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=280","title":{"rendered":"Service Worker, \uadf8\ub9ac\uace0 \uce90\uc2f1 \uc804\ub7b5"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Service Worker?<\/h2>\n\n\n\n<p>Service Worker\ub294 \ube0c\ub77c\uc6b0\uc800 \ubc31\uadf8\ub77c\uc6b4\ub4dc \uc2a4\ub808\ub4dc(background thread)\ub85c \ub3d9\uc791\ud55c\ub2e4.<\/p>\n\n\n\n<p>\uc989, \uba54\uc778 \uc2a4\ub808\ub4dc(UI \ub80c\ub354\ub9c1)\uc640\ub294 \ubcc4\ub3c4\ub85c \uc791\ub3d9.<\/p>\n\n\n\n<p>\uc6f9\ud398\uc774\uc9c0\uac00 \ub2eb\ud600 \uc788\uc5b4\ub3c4 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc744 \uac00\ub85c\ucc44\uac70\ub098 \uce90\uc2f1 \uc81c\uc5b4\ub97c \ud560 \uc218 \uc788\ub294 \uad8c\ud55c\uc744 \uac16\ub294\ub2e4.<\/p>\n\n\n\n<p>\ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \ub124\ud2b8\uc6cc\ud06c \uc0ac\uc774\uc5d0\uc11c \ud504\ub85d\uc2dc(Proxy) \uc5ed\ud560\uc744 \uc218\ud589\ud55c\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Service Worker\uc758 \ub3d9\uc791 \uad6c\uc870<\/h2>\n\n\n\n<p>\ub2e4\uc74c 3\ub2e8\uacc4 \uc0dd\uba85\uc8fc\uae30\ub97c \uac16\ub294\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>install \u2192 activate \u2192 fetch<\/p>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>install : \ucc98\uc74c \ub4f1\ub85d\ub420 \ub54c, \ud544\uc694\ud55c \ub9ac\uc18c\uc2a4\ub97c \uce90\uc2dc\uc5d0 \uc800\uc7a5<\/li>\n\n\n\n<li>activate: \uc774\uc804 \ubc84\uc804\uc758 \uce90\uc2dc\ub97c \uc815\ub9ac\ud558\uace0 \uc0c8 \uc6cc\ucee4 \ud65c\uc131\ud654<\/li>\n\n\n\n<li>fetch : \ubaa8\ub4e0 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc744 \uac00\ub85c\ucc44 \uce90\uc2dc \ub610\ub294 \ub124\ud2b8\uc6cc\ud06c\ub85c \uc751\ub2f5<\/li>\n<\/ul>\n\n\n\n<p>\uc774 \uad6c\uc870\ub85c \uc778\ud574 \ud55c \ubc88 \ubc29\ubb38\ud55c \ud398\uc774\uc9c0\ub294 <strong>\uc624\ud504\ub77c\uc778\uc5d0\uc11c\ub3c4 \uc791\ub3d9\ud560 \uc218 \uc788\ub294 \ub85c\uceec \uc571<\/strong>\ucc98\ub7fc \uc791\ub3d9\ud55c\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ub4f1\ub85d(Registration)<\/h3>\n\n\n\n<p>\uba3c\uc800 \ud074\ub77c\uc774\uc5b8\ud2b8 \uce21\uc5d0\uc11c \uc11c\ube44\uc2a4 \uc6cc\ucee4\ub97c \ub4f1\ub85d\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if ('serviceWorker' in navigator) {\n  window.addEventListener('load', () =&gt; {\n    navigator.serviceWorker\n      .register('\/sw.js')\n      .then(() =&gt; console.log('Service Worker registered'))\n      .catch(console.error);\n  });\n}\n<\/code><\/pre>\n\n\n\n<p>\/sw.js \ud30c\uc77c\uc740 \ub8e8\ud2b8 \uacbd\ub85c\uc5d0 \uc704\uce58\ud574\uc57c \uc804\uccb4 \uc0ac\uc774\ud2b8\ub97c \uc81c\uc5b4\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p>(\ud558\uc704 \ud3f4\ub354\uc5d0 \uc788\uc73c\uba74 \ud574\ub2f9 \uc2a4\ucf54\ud504 \ub0b4\uc5d0\uc11c\ub9cc \ub3d9\uc791)<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">install \ub2e8\uacc4 : \uce90\uc2dc \uc900\ube44<\/h3>\n\n\n\n<p>Service Worker\uac00 \ucc98\uc74c \uc124\uce58\ub420 \ub54c, \uc8fc\uc694 \uc815\uc801 \ud30c\uc77c\uc744 \uce90\uc2dc\uc5d0 \ubbf8\ub9ac \uc800\uc7a5\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>self.addEventListener('install', (event) =&gt; {\n  event.waitUntil(\n    caches.open('v1').then((cache) =&gt; {\n      return cache.addAll(&#91;\n        '\/',\n        '\/index.html',\n        '\/styles.css',\n        '\/main.js',\n        '\/logo.png',\n      ]);\n    })\n  );\n});\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>caches.open() : \uce90\uc2dc \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uc0c8\ub85c\uc6b4 \ubc84\uc804 \uc0dd\uc131<\/li>\n\n\n\n<li>cache.addAll() : \uc9c0\uc815\ud55c \uc790\uc6d0\ub4e4\uc744 \ubbf8\ub9ac \ub2e4\uc6b4\ub85c\ub4dc \ud6c4 \uc800\uc7a5<\/li>\n\n\n\n<li>waitUntil() : \uc124\uce58 \uc644\ub8cc \uc804 \uc885\ub8cc\ub418\uc9c0 \uc54a\ub3c4\ub85d \ub300\uae30<\/li>\n<\/ul>\n\n\n\n<p>\uc774 \ub2e8\uacc4\ub294 <strong>\uc571 \uc124\uce58 \uc2dc \ucd08\uae30 \ub9ac\uc18c\uc2a4 \ub2e4\uc6b4\ub85c\ub4dc<\/strong>\uc640 \uac19\uc740 \uacfc\uc815\uc73c\ub85c \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">activate \ub2e8\uacc4 : \ubc84\uc804 \uad00\ub9ac \ubc0f \uc815\ub9ac<\/h3>\n\n\n\n<p>Service Worker\uac00 \uc0c8\ub85c \uc124\uce58\ub418\uba74 \uc774\uc804 \uce90\uc2dc\uc640 \uad50\uccb4\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<p>\uc774\ub54c <strong>activate \uc774\ubca4\ud2b8 \uc2e4\ud589,<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>self.addEventListener('activate', (event) =&gt; {\n  const cacheWhitelist = &#91;'v1'];\n\n  event.waitUntil(\n    caches.keys().then((keys) =&gt;\n      Promise.all(\n        keys\n          .filter((key) =&gt; !cacheWhitelist.includes(key))\n          .map((key) =&gt; caches.delete(key))\n      )\n    )\n  );\n});\n<\/code><\/pre>\n\n\n\n<p>\uc774 \uacfc\uc815\ub4e4\uc744 \ud1b5\ud574 \uc774\uc804 \ubc84\uc804 \uce90\uc2dc\uac00 \uc815\ub9ac\ub418\uace0 \uc5c5\ub370\uc774\ud2b8 \ub41c \ud30c\uc77c\ub9cc \ub0a8\ub294\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">fetch \ub2e8\uacc4 : \uc694\uccad \uac00\ub85c\ucc44\uae30<\/h3>\n\n\n\n<p>fetch \uc774\ubca4\ud2b8\ub294 \uc0ac\uc6a9\uc790\uac00 \ud398\uc774\uc9c0\ub97c \uc694\uccad\ud560 \ub54c\ub9c8\ub2e4 \ud638\ucd9c\ub41c\ub2e4.<\/p>\n\n\n\n<p>Service Worker\ub294 \uc774 \uc694\uccad\uc744 \uac00\ub85c\ucc44 \uce90\uc2dc\ub098 \ub124\ud2b8\uc6cc\ud06c\uc5d0\uc11c \uc751\ub2f5\uc744 \uc120\ud0dd\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p>e.g. Cache First + Network Fallback \uc804\ub7b5<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>self.addEventListener('fetch', (event) =&gt; {\n  event.respondWith(\n    caches.match(event.request).then((cached) =&gt; {\n      return (\n        cached ||\n        fetch(event.request).then((response) =&gt; {\n          return caches.open('v1').then((cache) =&gt; {\n            cache.put(event.request, response.clone());\n            return response;\n          });\n        })\n      );\n    })\n  );\n});\n<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uce90\uc2f1 \uc804\ub7b5<\/h2>\n\n\n\n<p>PWA\uc758 \uc131\ub2a5\uacfc \uc624\ud504\ub77c\uc778 \ub300\uc751\uc744 \uc88c\uc6b0\ud558\ub294 \uac74 \uce90\uc2f1 \uc804\ub7b5\uc774\ub2e4.<\/p>\n\n\n\n<p>\uc804\ub7b5\uc740 \uc0c1\ud669\uc5d0 \ub530\ub77c \ub2e4\ub974\uac8c \uc801\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cache First(\uce90\uc2dc \uc6b0\uc120)<\/h3>\n\n\n\n<p><strong>\ud55c \ubc88 \uc800\uc7a5\ud55c \uac74 \uadf8\ub300\ub85c \uc4f4\ub2e4.<\/strong> \ub124\ud2b8\uc6cc\ud06c\ub294 \ubcf4\uc870, \uc989\uc2dc \ub85c\ub529\uc774 \ucd5c\uc6b0\uc120<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ub3d9\uc791 \ud750\ub984\n<ol class=\"wp-block-list\">\n<li>\uce90\uc2dc\uc5d0 \ud574\ub2f9 \uc694\uccad\uc774 \uc788\ub294\uc9c0 \ud655\uc778<\/li>\n\n\n\n<li>\uc788\uc73c\uba74 \uc989\uc2dc \ubc18\ud658(\ub124\ud2b8\uc6cc\ud06c \uc694\uccad \uc548 \ud568)<\/li>\n\n\n\n<li>\uc5c6\uc73c\uba74 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad \ud6c4 \uce90\uc2dc\uc5d0 \uc800\uc7a5<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li>\uc7a5\uc810\n<ul class=\"wp-block-list\">\n<li>\uac00\uc7a5 \ube60\ub978 \uc751\ub2f5 \uc18d\ub3c4(\ud2b9\ud788 \uc774\ubbf8\uc9c0, \ud3f0\ud2b8, \uc815\uc801 JS\/CSS)<\/li>\n\n\n\n<li>\ub124\ud2b8\uc6cc\ud06c \ubd88\uc548\uc815 \uc2dc \uac15\ub825\ud568<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\uc7a5\uc810\n<ul class=\"wp-block-list\">\n<li>\uce90\uc2dc \uac31\uc2e0\uc774 \uc5b4\ub824\uc6c0(\uc624\ub798\ub41c \ub9ac\uc18c\uc2a4\uac00 \ub0a8\uc744 \uc218 \uc788\ub2e4)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\uc0ac\uc6a9 \uc608\uc2dc\n<ul class=\"wp-block-list\">\n<li>\uc571 \uc178(App Shell) \uad6c\uc870\uc758 JS\/CSS<\/li>\n\n\n\n<li>\ub85c\uace0, \uc544\uc774\ucf58 \ub4f1 \ubcc0\ud558\uc9c0 \uc54a\ub294 \uc815\uc801 \uc790\uc0b0<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Network First(\ub124\ud2b8\uc6cc\ud06c \uc6b0\uc120)<\/h3>\n\n\n\n<p>\ud56d\uc0c1 \ucd5c\uc2e0 \ub370\uc774\ud130\ub97c \uc6d0\ud55c\ub2e4. \ub124\ud2b8\uc6cc\ud06c\uac00 \uc2e4\ud328\ud558\uba74, \uce90\uc2dc\uc5d0\uc11c \ubc31\uc5c5\ud55c\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ub3d9\uc791 \ud750\ub984\n<ol class=\"wp-block-list\">\n<li>\ub124\ud2b8\uc6cc\ud06c\ub85c \uc694\uccad \uc2dc\ub3c4<\/li>\n\n\n\n<li>\uc2e4\ud328 \uc2dc \uce90\uc2dc\uc5d0\uc11c \uac00\uc838\uc628\ub2e4.<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li>\uc7a5\uc810\n<ul class=\"wp-block-list\">\n<li>\ud56d\uc0c1 \ucd5c\uc2e0 \ub370\uc774\ud130 \uc720\uc9c0<\/li>\n\n\n\n<li>API \uc694\uccad, \ub274\uc2a4 \ud53c\ub4dc \ub4f1 \uc2e4\uc2dc\uac04 \ucf58\ud150\uce20\uc5d0 \uc801\ud569<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\ub2e8\uc810\n<ul class=\"wp-block-list\">\n<li>\ub124\ud2b8\uc6cc\ud06c \uc9c0\uc5f0\uc774 \ud06c\uba74 \ub290\ub824\uc9d0<\/li>\n\n\n\n<li>\uc624\ud504\ub77c\uc778\uc5d0\uc11c\ub294 \uccab \ub85c\ub4dc \uc2e4\ud328<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\uc608\uc2dc\n<ul class=\"wp-block-list\">\n<li>REST API, GraphQL \uc694\uccad<\/li>\n\n\n\n<li>JSON \ub370\uc774\ud130, \ub3d9\uc801 \uc694\uccad<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Stale-While-Revalidate(\uce90\uc2dc \uc6b0\uc120 + \ubc31\uadf8\ub77c\uc6b4\ub4dc \uac31\uc2e0)<\/h3>\n\n\n\n<p><strong>\uc0ac\uc6a9\uc790\uc5d0\uac90 \uce90\uc2dc\ub97c \uc989\uc2dc \ubcf4\uc5ec\uc8fc\uace0,<\/strong> <strong>\ub4a4\uc5d0\uc11c\ub294 \ucd5c\uc2e0 \ub370\uc774\ud130\ub97c \ubc1b\uc544 \uc5c5\ub370\uc774\ud2b8.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ub3d9\uc791 \ud750\ub984\n<ol class=\"wp-block-list\">\n<li>\uce90\uc2dc\uc5d0 \uc788\uc73c\uba74 \uc989\uc2dc \ubc18\ud658<\/li>\n\n\n\n<li>\ub3d9\uc2dc\uc5d0 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc73c\ub85c \ucd5c\uc2e0 \ub370\uc774\ud130 \uac00\uc838\uc624\uae30<\/li>\n\n\n\n<li>\uc751\ub2f5\uc744 \uce90\uc2dc\uc5d0 \ub36e\uc5b4\uc4f0\uae30<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li>\uc7a5\uc810\n<ul class=\"wp-block-list\">\n<li>\ube60\ub978 \ub85c\ub529 + \ucd5c\uc2e0\uc131 \ud655\ubcf4<\/li>\n\n\n\n<li>UX\uc801\uc73c\ub85c <strong>\ub85c\ub529 \uc5c6\uc774 \uc989\uc2dc \ub728\ub294 \ud654\uba74.<\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\ub2e8\uc810\n<ul class=\"wp-block-list\">\n<li>\uce90\uc2dc\uc640 \ucd5c\uc2e0 \ub370\uc774\ud130 \ubd88\uc77c\uce58 \uc2dc \uc21c\uac04\uc801 \ucc28\uc774 \ubc1c\uc0dd \uac00\ub2a5.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\uc0ac\uc6a9 \uc608\uc2dc\n<ul class=\"wp-block-list\">\n<li>\ube14\ub85c\uadf8, \uc0c1\ud488 \ub9ac\uc2a4\ud2b8, \ud53c\ub4dc<\/li>\n\n\n\n<li>\uc790\uc8fc \ubc14\ub00c\uc9c0\ub9cc \uc2e4\uc2dc\uac04\uc774 \uc544\ub2cc \ucf58\ud150\uce20<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cache Only(\uce90\uc2dc \uc804\uc6a9)<\/h3>\n\n\n\n<p><strong>\ub124\ud2b8\uc6cc\ud06c\ub294 \ubb34\uc2dc\ud558\uace0, \uc624\uc9c1 \uce90\uc2dc\ub9cc \ubcf8\ub2e4.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ub3d9\uc791 \ud750\ub984\n<ol class=\"wp-block-list\">\n<li>\uce90\uc2dc\uc5d0\uc11c\ub9cc \uc790\uc6d0\uc744 \ucc3e\uc74c<\/li>\n\n\n\n<li>\uc5c6\uc73c\uba74 \uc2e4\ud328 \uc751\ub2f5 \ubc18\ud658<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li>\uc7a5\uc810\n<ul class=\"wp-block-list\">\n<li>\uc644\uc804\ud55c \uc624\ud504\ub77c\uc778 \ub300\uc751 \uac00\ub2a5<\/li>\n\n\n\n<li>\ub124\ud2b8\uc6cc\ud06c \ubd88\ud544\uc694<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\ub2e8\uc810\n<ul class=\"wp-block-list\">\n<li>\uce90\uc2dc \ubbf8\uc2a4 \uc2dc \uc2e4\ud328(\ub370\uc774\ud130 \ubd88\uc77c\uce58 \uac00\ub2a5\uc131 \ub192\uc74c)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\uc0ac\uc6a9 \uc608\uc2dc\n<ul class=\"wp-block-list\">\n<li>\uc644\uc804 \uc624\ud504\ub77c\uc778 \uc571(\uc124\uce58 \ud6c4 \uace0\uc815 \ucf58\ud150\uce20)<\/li>\n\n\n\n<li>\ub0b4\ubd80 \ub3c4\uc6c0\ub9d0, \ud29c\ud1a0\ub9ac\uc5bc \ud398\uc774\uc9c0)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Network Only(\ub124\ud2b8\uc6cc\ud06c \uc804\uc6a9)<\/h3>\n\n\n\n<p>\ud56d\uc0c1 \uc2e4\uc2dc\uac04, \uce90\uc2dc\ub294 \uc804\ud600 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ub3d9\uc791 \ud750\ub984\n<ul class=\"wp-block-list\">\n<li>\uc694\uccad\uc744 \uadf8\ub300\ub85c \ub124\ud2b8\uc6cc\ud06c\ub85c \ubcf4\ub0b8\ub2e4.<\/li>\n\n\n\n<li>\uce90\uc2dc \uad00\ub828 \ub85c\uc9c1 \uc5c6\uc74c<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\uc7a5\uc810\n<ul class=\"wp-block-list\">\n<li>\ud56d\uc0c1 \ucd5c\uc2e0 \ub370\uc774\ud130<\/li>\n\n\n\n<li>\uce90\uc2dc \ub3d9\uae30\ud654 \ubd88\ud544\uc694<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\ub2e8\uc810\n<ul class=\"wp-block-list\">\n<li>\uc624\ud504\ub77c\uc778\/\ub290\ub9b0 \ub124\ud2b8\uc6cc\ud06c \ud658\uacbd\uc5d0 \ub9e4\uc6b0 \ucde8\uc57d<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\uc0ac\uc6a9 \uc608\uc2dc\n<ul class=\"wp-block-list\">\n<li>\ub85c\uadf8\uc778, \uacb0\uc81c \uc778\uc99d \uc694\uccad<\/li>\n\n\n\n<li>\ubbfc\uac10 \ub370\uc774\ud130(POST \uc694\uccad, \ud1a0\ud070 \ub4f1)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uc5b4\ub5a4 \uc804\ub7b5\uc744 \uc5b8\uc81c \uc4f8\uae4c?<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\uc0c1\ud669<\/th><th>\ucd94\ucc9c \uc804\ub7b5<\/th><th>\uc774\uc720<\/th><\/tr><\/thead><tbody><tr><td>\uc815\uc801 \ud30c\uc77c(JS\/CSS\/\ud3f0\ud2b8)<\/td><td>Cache First<\/td><td>\ubcc0\uacbd \uac70\uc758 \uc5c6\uc74c, \uc18d\ub3c4 \ucd5c\uc6b0\uc120<\/td><\/tr><tr><td>API \uc694\uccad, JSON \ub370\uc774\ud130<\/td><td>Network First<\/td><td>\ucd5c\uc2e0\uc131 \uc911\uc694<\/td><\/tr><tr><td>\ucf58\ud150\uce20 \ud398\uc774\uc9c0(\ube14\ub85c\uadf8, \ud53c\ub4dc)<\/td><td>Stale-While-Revalidate<\/td><td>\ube60\ub978 UX + \uc790\ub3d9 \uc5c5\ub370\uc774\ud2b8<\/td><\/tr><tr><td>\uc644\uc804 \uc624\ud504\ub77c\uc778 \uc571<\/td><td>Cache Only<\/td><td>\ub124\ud2b8\uc6cc\ud06c \ubd88\ud544\uc694<\/td><\/tr><tr><td>\ub85c\uadf8\uc778\/\uacb0\uc81c\/POST \uc694\uccad<\/td><td>Network Only<\/td><td>\ud56d\uc0c1 \uc2e4\uc2dc\uac04 \ud1b5\uc2e0 \ud544\uc694<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\ud558\ub098\uc758 \uc804\ub7b5\ub9cc \uc0ac\uc6a9\ud558\uae30 \uc5b4\ub824\uc6b4 \uc0c1\ud669\uc5d0\uc11c\ub294?<\/h3>\n\n\n\n<p>\uc2e4\ubb34\uc5d0\uc11c\ub294 \ud558\ub098\uc758 \uc804\ub7b5\ub9cc\uc744 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n\n\n\n<p>\uc0c1\ud669\uc5d0 \ub530\ub77c\uc11c, \ub610\ub294 \uc790\uc6d0 \uc720\ud615\ubcc4\ub85c \ub2e4\ub974\uac8c \uc801\uc6a9\ud558\ub294 \uac83\uc774 \ud544\uc694\ud558\ub2e4.<\/p>\n\n\n\n<p>\u2192 <strong>\ud63c\ud569 \uc804\ub7b5 \uc0ac\uc6a9.<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uc2e4\ubb34\uc5d0\uc11c\ub294?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\uce90\uc2dc \ubc84\uc804 \uad00\ub9ac<\/h3>\n\n\n\n<p>\uce90\uc2dc \uc774\ub984\uc5d0 \ubc84\uc804\uc744 \ubd99\uc5ec\uc57c \uc5c5\ub370\uc774\ud2b8\uac00 \uba85\ud655\ud788 \uad6c\ubd84\ub418\uace0 \uad00\ub9ac\ud558\uae30 \uc6a9\uc774\ud558\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const CACHE_VERSION = 'v3';\nconst CACHE_NAME = `static-${CACHE_VERSION}`;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\uce90\uc2dc \uccad\uc18c \uc8fc\uae30 \uc124\uc815<\/h3>\n\n\n\n<p>\uc774\uc804 \ubc84\uc804 \uce90\uc2dc\ub294 activate \uc774\ubca4\ud2b8\uc5d0\uc11c \uc815\ub9ac\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>self.addEventListener('activate', (event) =&gt; {\n  event.waitUntil(\n    caches.keys().then((keys) =&gt;\n      Promise.all(keys.filter((k) =&gt; k !== CACHE_NAME).map((k) =&gt; caches.delete(k)))\n    )\n  );\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Workbox \uc801\uadf9 \ud65c\uc6a9<\/h3>\n\n\n\n<p>Google\uc774 \ub9cc\ub4e0 Workbox\ub294 \uce90\uc2f1 \uc804\ub7b5, \ubc84\uc804 \uad00\ub9ac, \ud504\ub9ac\uce90\uc2f1\uc744 \uc790\ub3d9\ud654\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>importScripts('&lt;https:\/\/storage.googleapis.com\/workbox-cdn\/releases\/6.5.3\/workbox-sw.js&gt;');\n<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Service Worker? Service Worker\ub294 \ube0c\ub77c\uc6b0\uc800 \ubc31\uadf8\ub77c\uc6b4\ub4dc \uc2a4\ub808\ub4dc(background thread)\ub85c \ub3d9\uc791\ud55c\ub2e4. \uc989, \uba54\uc778 \uc2a4\ub808\ub4dc(UI \ub80c\ub354\ub9c1)\uc640\ub294 \ubcc4\ub3c4\ub85c \uc791\ub3d9. \uc6f9\ud398\uc774\uc9c0\uac00 \ub2eb\ud600 \uc788\uc5b4\ub3c4 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc744 \uac00\ub85c\ucc44\uac70\ub098 \uce90\uc2f1 \uc81c\uc5b4\ub97c \ud560 \uc218 \uc788\ub294 \uad8c\ud55c\uc744 \uac16\ub294\ub2e4. \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \ub124\ud2b8\uc6cc\ud06c \uc0ac\uc774\uc5d0\uc11c \ud504\ub85d\uc2dc(Proxy) \uc5ed\ud560\uc744 \uc218\ud589\ud55c\ub2e4. Service Worker\uc758 \ub3d9\uc791 \uad6c\uc870 \ub2e4\uc74c 3\ub2e8\uacc4 \uc0dd\uba85\uc8fc\uae30\ub97c \uac16\ub294\ub2e4. install \u2192 activate \u2192 fetch \uc774 \uad6c\uc870\ub85c \uc778\ud574 \ud55c \ubc88 \ubc29\ubb38\ud55c \ud398\uc774\uc9c0\ub294 \uc624\ud504\ub77c\uc778\uc5d0\uc11c\ub3c4 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[44],"tags":[195,197,203,198,181],"class_list":["post-280","post","type-post","status-publish","format-standard","hentry","category-frontend","tag-pwa","tag-service-worker","tag-203","tag-198","tag-181"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=280"}],"version-history":[{"count":2,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/280\/revisions"}],"predecessor-version":[{"id":282,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/280\/revisions\/282"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}