[{"data":1,"prerenderedAt":240},["ShallowReactive",2],{"term-s\u002Fservice-worker":3,"related-s\u002Fservice-worker":228},{"id":4,"title":5,"acronym":6,"body":7,"category":209,"description":210,"difficulty":211,"extension":212,"letter":213,"meta":214,"navigation":215,"path":216,"related":217,"seo":222,"sitemap":223,"stem":226,"subcategory":6,"__hash__":227},"terms\u002Fterms\u002Fs\u002Fservice-worker.md","Service Worker",null,{"type":8,"value":9,"toc":203},"minimark",[10,15,19,23,26,30,192,196,199],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"A Service Worker is a JavaScript script that runs in the background, separate from your web page. It intercepts network requests and can serve cached responses, making your app work offline. Think of it as a personal assistant that intercepts your mail and can deliver old copies when the post office is closed.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"A Service Worker is a JavaScript Worker that runs in a separate thread from the main browser thread, acting as a programmable network proxy. It can intercept and handle fetch requests, manage caches via the Cache API, and enable offline functionality, background sync, and push notifications. It requires HTTPS.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F service-worker.js\nself.addEventListener('fetch', event => {\n  event.respondWith(\n    caches.match(event.request).then(cached => {\n      return cached || fetch(event.request)\n    })\n  )\n})\n","javascript","",[38,39,40,49,90,105,143,170,178,184],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F service-worker.js\n",[41,50,52,56,60,64,67,70,74,76,79,83,87],{"class":43,"line":51},2,[41,53,55],{"class":54},"sTEyZ","self",[41,57,59],{"class":58},"sMK4o",".",[41,61,63],{"class":62},"s2Zo4","addEventListener",[41,65,66],{"class":54},"(",[41,68,69],{"class":58},"'",[41,71,73],{"class":72},"sfazB","fetch",[41,75,69],{"class":58},[41,77,78],{"class":58},",",[41,80,82],{"class":81},"sHdIc"," event",[41,84,86],{"class":85},"spNyl"," =>",[41,88,89],{"class":58}," {\n",[41,91,93,96,98,101],{"class":43,"line":92},3,[41,94,95],{"class":54},"  event",[41,97,59],{"class":58},[41,99,100],{"class":62},"respondWith",[41,102,104],{"class":103},"swJcz","(\n",[41,106,108,111,113,116,118,121,123,126,129,131,134,136,139,141],{"class":43,"line":107},4,[41,109,110],{"class":54},"    caches",[41,112,59],{"class":58},[41,114,115],{"class":62},"match",[41,117,66],{"class":103},[41,119,120],{"class":54},"event",[41,122,59],{"class":58},[41,124,125],{"class":54},"request",[41,127,128],{"class":103},")",[41,130,59],{"class":58},[41,132,133],{"class":62},"then",[41,135,66],{"class":103},[41,137,138],{"class":81},"cached",[41,140,86],{"class":85},[41,142,89],{"class":58},[41,144,146,150,153,156,159,161,163,165,167],{"class":43,"line":145},5,[41,147,149],{"class":148},"s7zQu","      return",[41,151,152],{"class":54}," cached",[41,154,155],{"class":58}," ||",[41,157,158],{"class":62}," fetch",[41,160,66],{"class":103},[41,162,120],{"class":54},[41,164,59],{"class":58},[41,166,125],{"class":54},[41,168,169],{"class":103},")\n",[41,171,173,176],{"class":43,"line":172},6,[41,174,175],{"class":58},"    }",[41,177,169],{"class":103},[41,179,181],{"class":43,"line":180},7,[41,182,183],{"class":103},"  )\n",[41,185,187,190],{"class":43,"line":186},8,[41,188,189],{"class":58},"}",[41,191,169],{"class":54},[11,193,195],{"id":194},"when-youll-hear-this","When You'll Hear This",[16,197,198],{},"The Service Worker caches assets so the app works offline.,Service Workers only run on HTTPS (or localhost).,Workbox is a library that simplifies Service Worker caching strategies.",[200,201,202],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":51,"depth":51,"links":204},[205,206,207,208],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":194,"depth":51,"text":195},"frontend","A Service Worker is a JavaScript script that runs in the background, separate from your web page.","advanced","md","s",{},true,"\u002Fterms\u002Fs\u002Fservice-worker",[218,219,220,221],"PWA","Web Worker","Fetch","Cache",{"title":5,"description":210},{"changefreq":224,"priority":225},"weekly",0.7,"terms\u002Fs\u002Fservice-worker","rWznQUE915a7ZV-2Vpvgy54CrN-l6ZACGErm_PUHK4Y",[229,233,237],{"title":220,"path":230,"acronym":6,"category":209,"difficulty":231,"description":232},"\u002Fterms\u002Ff\u002Ffetch","beginner","Fetch is the modern, built-in JavaScript way to make HTTP requests to APIs. You tell it a URL, it goes and gets the data, and you handle the response.",{"title":218,"path":234,"acronym":218,"category":209,"difficulty":235,"description":236},"\u002Fterms\u002Fp\u002Fpwa","intermediate","A PWA is a website that pretends to be an app.",{"title":219,"path":238,"acronym":6,"category":209,"difficulty":211,"description":239},"\u002Fterms\u002Fw\u002Fweb-worker","JavaScript normally runs on one thread, which means heavy computation freezes your UI.",1776518312706]