Strategies for service worker caching | Workbox

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Chrome for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#1a73e8"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/chrome/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/touchicon-180.png"><link rel="canonical" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview"><link rel="search" type="application/opensearchdescription+xml" title="Chrome for Developers" href="https://developer.chrome.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview" /><link rel="alternate" hreflang="ar" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=zh-tw" /><link rel="alternate" hreflang="nl" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=nl" /><link rel="alternate" hreflang="fa" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.chrome.com/docs/workbox/caching-strategies-overview?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview" /><link rel="alternate" hreflang="ar-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=zh-tw" /><link rel="alternate" hreflang="nl-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=nl" /><link rel="alternate" hreflang="fa-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://developer.chrome.google.cn/docs/workbox/caching-strategies-overview?hl=vi" /><title>Strategies for service worker caching  |  Workbox  |  Chrome for Developers</title> <meta property="og:title" content="Strategies for service worker caching  |  Workbox  |  Chrome for Developers"><meta name="description" content="An overview of caching in service workers."> <meta property="og:description" content="An overview of caching in service workers."><meta property="og:url" content="https://developer.chrome.com/docs/workbox/caching-strategies-overview"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2021-09-24", "headline": "Strategies for service worker caching" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Docs", "item": "https://developer.chrome.com/docs" },{ "@type": "ListItem", "position": 2, "name": "Workbox", "item": "https://developer.chrome.com/docs/workbox" },{ "@type": "ListItem", "position": 3, "name": "Strategies for service worker caching", "item": "https://developer.chrome.com/docs/workbox/caching-strategies-overview" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="chrome-theme" type="article" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://developer.chrome.com/case-studies" track-metadata-eventdetail="https://developer.chrome.com/case-studies" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - get inspired" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" > Get inspired </a> </tab> <tab > <a href="https://developer.chrome.com/blog" track-metadata-eventdetail="https://developer.chrome.com/blog" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab class="devsite-dropdown devsite-dropdown-full devsite-active "> <a href="https://developer.chrome.com/docs" track-metadata-eventdetail="https://developer.chrome.com/docs" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - docs" track-metadata-module="primary nav" aria-label="Docs, selected" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > Docs </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Build with Chrome</li> <li class="devsite-nav-description">Learn how Chrome works, participate in origin trials, and build with Chrome everywhere. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/web-platform" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/web-platform" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web Platform </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/capabilities" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/capabilities" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Capabilities </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromedriver" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromedriver" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> ChromeDriver </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Extensions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chrome Web Store </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromium" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromium" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chromium </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/aurora" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/aurora" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Aurora </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/android" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/android" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web on Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/origintrials/" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Origin trials </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/release-notes" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/release-notes" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Release notes </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section productivity-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Productivity</li> <li class="devsite-nav-description">Create the best experience for your users with the web's best tools.</li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> DevTools </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/lighthouse" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/lighthouse" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Lighthouse </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/crux" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/crux" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Chrome UX Report </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/accessibility" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/accessibility" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Accessibility </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section dcc-subnav second-column-list"> <li class="devsite-nav-description">Get things done quicker and neater, with our ready-made libraries. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/workbox" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/workbox" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Workbox </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/puppeteer" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/puppeteer" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Puppeteer </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section experience-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Experience</li> <li class="devsite-nav-description">Design a beautiful and performant web with Chrome. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/ai" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/ai" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> AI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/performance" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/performance" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/css-ui" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/css-ui" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> CSS and UI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/identity" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/identity" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Identity </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/payments" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/payments" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Payments </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/privacy-security" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/privacy-security" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Privacy and security </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section resources-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Resources</li> <li class="devsite-nav-description">More from the Chrome team. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> All documentation </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" track-type="nav" track-metadata-eventdetail="https://web.dev/baseline" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> Baseline </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev" track-type="nav" track-metadata-eventdetail="https://web.dev" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> web.dev </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developer.chrome.com/new" track-metadata-eventdetail="https://developer.chrome.com/new" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - new in chrome" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" > New in Chrome </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Workbox" tenant-name="Chrome for Developers" > <form class="devsite-search-form" action="https://developer.chrome.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="nl" >Nederlands</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://developer.chrome.com/docs/workbox" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Workbox" > Workbox </a> </li> </ul> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab class="devsite-active"> <a href="https://developer.chrome.com/docs/workbox" track-metadata-eventdetail="https://developer.chrome.com/docs/workbox" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - overview" track-metadata-module="primary nav" aria-label="Overview, selected" data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview" > Overview </a> </tab> <tab > <a href="https://developer.chrome.com/docs/workbox/modules" track-metadata-eventdetail="https://developer.chrome.com/docs/workbox/modules" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - modules" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Modules" track-name="modules" > Modules </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Get inspired" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Get inspired </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Docs" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Docs </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > <span class="devsite-nav-text" tooltip menu="Docs"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Docs"> </span> </span> </li> </ul> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/docs/workbox" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> Overview </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/workbox/modules" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Modules" track-name="modules" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Modules" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Modules </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/new" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" data-category="Site-Wide Custom Events" data-label="Responsive Tab: New in Chrome" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > New in Chrome </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item"><a href="/docs/workbox/service-worker-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/service-worker-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/service-worker-overview" ><span class="devsite-nav-text" tooltip>Service worker overview</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/service-worker-lifecycle" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/service-worker-lifecycle" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/service-worker-lifecycle" ><span class="devsite-nav-text" tooltip>Service worker lifecycle</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/caching-strategies-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/caching-strategies-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/caching-strategies-overview" ><span class="devsite-nav-text" tooltip>Caching strategies</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/what-is-workbox" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/what-is-workbox" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/what-is-workbox" ><span class="devsite-nav-text" tooltip>Workbox overview</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>What you need to know</span> </div></li> <li class="devsite-nav-item"><a href="/docs/workbox/service-worker-deployment" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/service-worker-deployment" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/service-worker-deployment" ><span class="devsite-nav-text" tooltip>Expectations around service worker deployment</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/remove-buggy-service-workers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/remove-buggy-service-workers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/remove-buggy-service-workers" ><span class="devsite-nav-text" tooltip>Remove buggy service workers</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/improving-development-experience" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/improving-development-experience" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/improving-development-experience" ><span class="devsite-nav-text" tooltip>Improve the service worker development experience</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/troubleshooting-and-logging" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/troubleshooting-and-logging" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/troubleshooting-and-logging" ><span class="devsite-nav-text" tooltip>Troubleshoot and logging</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/different-architectures" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/different-architectures" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/different-architectures" ><span class="devsite-nav-text" tooltip>Strategies for different architectures</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/app-shell-model" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/app-shell-model" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/app-shell-model" ><span class="devsite-nav-text" tooltip>Application shell model</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/navigation-preload" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/navigation-preload" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/navigation-preload" ><span class="devsite-nav-text" tooltip>Navigation Preload for Network-first HTML</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/faster-multipage-applications-with-streams" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/faster-multipage-applications-with-streams" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/faster-multipage-applications-with-streams" ><span class="devsite-nav-text" tooltip>Faster multipage applications with streams</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/precaching-dos-and-donts" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/precaching-dos-and-donts" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/precaching-dos-and-donts" ><span class="devsite-nav-text" tooltip>Pre-caching dos and don'ts</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/understanding-storage-quota" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/understanding-storage-quota" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/understanding-storage-quota" ><span class="devsite-nav-text" tooltip>Storage quota</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Use cases and recipes</span> </div></li> <li class="devsite-nav-item"><a href="/docs/workbox/using-workbox-window" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/using-workbox-window" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/using-workbox-window" ><span class="devsite-nav-text" tooltip>Use workbox-window</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/caching-resources-during-runtime" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/caching-resources-during-runtime" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/caching-resources-during-runtime" ><span class="devsite-nav-text" tooltip>Caching resources during runtime</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/forcing-a-network-timeout" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/forcing-a-network-timeout" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/forcing-a-network-timeout" ><span class="devsite-nav-text" tooltip>Force network timeout</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/access-caches-from-the-window" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/access-caches-from-the-window" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/access-caches-from-the-window" ><span class="devsite-nav-text" tooltip>Access caches from the window</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/serving-cached-audio-and-video" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/serving-cached-audio-and-video" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/serving-cached-audio-and-video" ><span class="devsite-nav-text" tooltip>Serve cached audio and video</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/managing-fallback-responses" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/managing-fallback-responses" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/managing-fallback-responses" ><span class="devsite-nav-text" tooltip>Manage fallback responses</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/handling-service-worker-updates" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/handling-service-worker-updates" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/handling-service-worker-updates" ><span class="devsite-nav-text" tooltip>Handle updates immediately</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/retrying-requests-when-back-online" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/retrying-requests-when-back-online" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/retrying-requests-when-back-online" ><span class="devsite-nav-text" tooltip>Retrying requests when back online</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/using-plugins" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/using-plugins" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/using-plugins" ><span class="devsite-nav-text" tooltip>Workbox plugins</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Migration Guides</span> </div></li> <li class="devsite-nav-item"><a href="/docs/workbox/migration/migrate-from-v4" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/migration/migrate-from-v4" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/migration/migrate-from-v4" ><span class="devsite-nav-text" tooltip>Migrate from Workbox v4 to v5</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/migration/migrate-from-v5" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/migration/migrate-from-v5" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/migration/migrate-from-v5" ><span class="devsite-nav-text" tooltip>Migrate from Workbox v5 to v6</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/migration/migrate-from-v3" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/migration/migrate-from-v3" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/migration/migrate-from-v3" ><span class="devsite-nav-text" tooltip>Migrate from Workbox v3 to v4</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/migration/migrate-from-sw" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/migration/migrate-from-sw" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/migration/migrate-from-sw" ><span class="devsite-nav-text" tooltip>Migrate from sw-precache or sw-toolbox</span></a></li> <li class="devsite-nav-item"><a href="/docs/workbox/migration/migrate-from-v2" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/migration/migrate-from-v2" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/migration/migrate-from-v2" ><span class="devsite-nav-text" tooltip>Migrate from Workbox v2 to v3</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Resources</span> </div></li> <li class="devsite-nav-item"><a href="/docs/workbox/modules" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/workbox/modules" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/workbox/modules" ><span class="devsite-nav-text" tooltip>Workbox modules</span></a></li> <li class="devsite-nav-item devsite-nav-external"><a href="//github.com/GoogleChrome/workbox" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: //github.com/GoogleChrome/workbox" track-type="bookNav" track-name="click" track-metadata-eventdetail="//github.com/GoogleChrome/workbox" ><span class="devsite-nav-text" tooltip>Workbox on GitHub</span><span class="devsite-nav-icon material-icons" data-icon="external" data-title="External" aria-hidden="true"></span></a></li> </ul> <ul class="devsite-nav-list" menu="Docs" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Build with Chrome </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/web-platform" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web Platform" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web Platform </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/capabilities" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Capabilities" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Capabilities </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromedriver" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: ChromeDriver" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > ChromeDriver </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Extensions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Extensions </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/webstore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome Web Store" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome Web Store </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromium" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chromium" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chromium </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/aurora" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Aurora" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Aurora </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/android" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web on Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web on Android </span> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Origin trials" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Origin trials </span> </a> </li> <li class="devsite-nav-item"> <a href="/release-notes" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Release notes" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Release notes </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Productivity </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/devtools" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: DevTools" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > DevTools </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/lighthouse" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Lighthouse" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Lighthouse </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/crux" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome UX Report" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome UX Report </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/workbox" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Workbox" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Workbox </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/puppeteer" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Puppeteer" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Puppeteer </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Experience </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/css-ui" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS and UI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS and UI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/identity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/payments" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Payments" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Payments </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/privacy-security" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy and security" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Privacy and security </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: All documentation" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > All documentation </span> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Baseline" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Baseline </span> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: web.dev" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > web.dev </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-book-nav has-sidebar > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars ></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developer.chrome.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Docs" > Docs </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs/workbox" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="Workbox" > Workbox </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Strategies for service worker caching </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p><devsite-video video-id="ZCVgDKjtgl0"></devsite-video></p> <p>Until now, there have only been mentions and tiny code snippets of the <a href="https://developer.mozilla.org/docs/Web/API/Cache"><code translate="no" dir="ltr">Cache</code> interface</a>. To use service workers effectively, it's necessary to adopt one or more caching strategies, which requires a bit of familiarity with the <code translate="no" dir="ltr">Cache</code> interface.</p> <p>A caching strategy is an interaction between a service worker's <code translate="no" dir="ltr">fetch</code> event and the <code translate="no" dir="ltr">Cache</code> interface. How a caching strategy is written depends; for example, it may be preferable to handle requests for static assets differently than documents, and this affects how a caching strategy is composed.</p> <p>Before we get into the strategies themselves, let's take a second to talk about what the <code translate="no" dir="ltr">Cache</code> interface isn't, what it is, and a quick rundown of some of the methods it offers to manage service worker caches.</p> <h2 id="the_cache_interface_versus_the_http_cache" data-text="The Cache interface versus the HTTP cache" tabindex="-1">The <code translate="no" dir="ltr">Cache</code> interface versus the HTTP cache</h2> <p>If you haven't worked with the <code translate="no" dir="ltr">Cache</code> interface before, it might be tempting to think of it as the same as, or at least related to the HTTP cache. This is not the case.</p> <ul> <li>The <code translate="no" dir="ltr">Cache</code> interface is a caching mechanism entirely separate from the HTTP cache.</li> <li>Whatever <a href="https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control"><code translate="no" dir="ltr">Cache-Control</code></a> configuration you use to influence the HTTP cache has no influence on what assets get stored in the <code translate="no" dir="ltr">Cache</code> interface.</li> </ul> <p>It helps to think of browser caches as layered. The HTTP cache is a low-level cache driven by key-value pairs with directives expressed in HTTP headers.</p> <p>By contrast, the <code translate="no" dir="ltr">Cache</code> interface is a high-level cache driven by a JavaScript API. This offers more flexibility than when using relatively simplistic HTTP key-value pairs, and is one half of what makes caching strategies possible. Some important API methods around service worker caches are:</p> <ul> <li><a href="https://developer.mozilla.org/docs/Web/API/CacheStorage/open"><code translate="no" dir="ltr">CacheStorage.open</code></a> to create a new <code translate="no" dir="ltr">Cache</code> instance.</li> <li><a href="https://developer.mozilla.org/docs/Web/API/Cache/add"><code translate="no" dir="ltr">Cache.add</code></a> and <a href="https://developer.mozilla.org/docs/Web/API/Cache/put"><code translate="no" dir="ltr">Cache.put</code></a> to store network responses in a service worker cache.</li> <li><a href="https://developer.mozilla.org/docs/Web/API/Cache/match"><code translate="no" dir="ltr">Cache.match</code></a> to locate a cached response in a <code translate="no" dir="ltr">Cache</code> instance.</li> <li><a href="https://developer.mozilla.org/docs/Web/API/Cache/delete"><code translate="no" dir="ltr">Cache.delete</code></a> to remove a cached response from a <code translate="no" dir="ltr">Cache</code> instance.</li> </ul> <p>These are just a few. There are other useful methods, but these are the basic ones you'll see used later on in this guide.</p> <h2 id="the_humble_fetch_event" data-text="The humble fetch event" tabindex="-1">The humble <code translate="no" dir="ltr">fetch</code> event</h2> <p>The other half of a caching strategy is the service worker's <a href="https://developer.mozilla.org/docs/Web/API/FetchEvent"><code translate="no" dir="ltr">fetch</code> event</a>. So far in this documentation, you've heard a bit about "intercepting network requests", and the <code translate="no" dir="ltr">fetch</code> event inside of a service worker is where this happens:</p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">// Establish a cache name const cacheName = 'MyFancyCacheName_v1'; self.addEventListener('install', (event) => { event.waitUntil(caches.open(cacheName)); }); self.addEventListener('fetch', async (event) => { // Is this a request for an image? if (event.request.destination === 'image') { // Open the cache event.respondWith(caches.open(cacheName).then((cache) => { // Respond with the image from the cache or from the network return cache.match(event.request).then((cachedResponse) => { return cachedResponse || fetch(event.request.url).then((fetchedResponse) => { // Add the network response to the cache for future visits. // Note: we need to make a copy of the response to save it in // the cache and use the original as the request response. cache.put(event.request, fetchedResponse.clone()); // Return the network response return fetchedResponse; }); }); })); } else { return; } }); </code></pre> <p>This is a toy example—and <a href="https://service-worker-fetch-event-example.glitch.me/">one you can see in action for yourself</a>—but it's one that offers a glimpse into what service workers can do. The above code does the following:</p> <ol> <li>Inspect the request's <code translate="no" dir="ltr">destination</code> property to see if this is an image request.</li> <li>If the image is in the service worker cache, serve it from there. If not, fetch the image from the network, store the response in the cache, and return the network response.</li> <li>All other requests are passed through the service worker with no interaction with the cache.</li> </ol> <p>A fetch's <code translate="no" dir="ltr">event</code> object contains a <a href="https://developer.mozilla.org/docs/Web/API/FetchEvent/request"><code translate="no" dir="ltr">request</code> property</a> which some useful bits of information to help you identify the type of each request:</p> <ul> <li><a href="https://developer.mozilla.org/docs/Web/API/Request/url"><code translate="no" dir="ltr">url</code></a>, which is the URL for the network request currently being handled by the <code translate="no" dir="ltr">fetch</code> event.</li> <li><a href="https://developer.mozilla.org/docs/Web/API/Request/method"><code translate="no" dir="ltr">method</code></a>, which is the request method (e.g., <code translate="no" dir="ltr">GET</code> or <code translate="no" dir="ltr">POST</code>).</li> <li><a href="https://developer.mozilla.org/docs/Web/API/Request/mode"><code translate="no" dir="ltr">mode</code></a>, which describes the request's mode. A value of <code translate="no" dir="ltr">'navigate'</code> is often used to distinguish requests for HTML documents from other requests.</li> <li><a href="https://developer.mozilla.org/docs/Web/API/Request/destination"><code translate="no" dir="ltr">destination</code></a>, which describes the type of content being requested in a way that avoids using the requested asset's file extension.</li> </ul> <p>Once again, asynchrony is the name of the game. You'll recall that the <code translate="no" dir="ltr">install</code> event offers an <a href="https://developer.mozilla.org/docs/Web/API/ExtendableEvent/waitUntil"><code translate="no" dir="ltr">event.waitUntil</code></a> method that takes a promise, and waits for it to resolve before continuing on to activation. The <code translate="no" dir="ltr">fetch</code> event offers a similar <a href="https://developer.mozilla.org/docs/Web/API/FetchEvent/respondWith"><code translate="no" dir="ltr">event.respondWith</code> method</a> that you can use to return the result of an asynchronous <a href="https://developer.mozilla.org/docs/Web/API/Fetch_API"><code translate="no" dir="ltr">fetch</code> request</a> or a response returned by the <code translate="no" dir="ltr">Cache</code> interface's <a href="https://developer.mozilla.org/docs/Web/API/Cache/match"><code translate="no" dir="ltr">match</code> method</a>.</p> <h2 id="caching_strategies" data-text="Caching strategies" tabindex="-1">Caching strategies</h2> <p>Now that you've got a little familiarity with <code translate="no" dir="ltr">Cache</code> instances and the <code translate="no" dir="ltr">fetch</code> event handler, you're ready to dive into some service worker caching strategies. While the possibilities are practically endless, this guide will stick with the strategies that ship with Workbox, so you can get a sense of what goes on in Workbox's internals.</p> <h3 id="cache_only" data-text="Cache only" tabindex="-1">Cache only</h3> <p><img src="/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-18c2865650399.png" alt="Shows flow from page, to service worker, to cache." width="800" height="395" srcset="https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-18c2865650399_36.png 36w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-18c2865650399_48.png 48w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-18c2865650399_72.png 72w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-18c2865650399_96.png 96w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-18c2865650399_480.png 480w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-18c2865650399_720.png 720w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-18c2865650399_856.png 856w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-18c2865650399_960.png 960w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-18c2865650399_1440.png 1440w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-18c2865650399_1920.png 1920w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-18c2865650399_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>Let's start with a simple caching strategy we'll call "Cache Only". It's just that: when the service worker is in control of the page, matching requests will only ever go to the cache. This means that any cached assets will need to be precached in order to be available for the pattern to work, and that those assets will never be updated in the cache until the service worker is updated.</p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">// Establish a cache name const cacheName = 'MyFancyCacheName_v1'; // Assets to precache const precachedAssets = [ '/possum1.jpg', '/possum2.jpg', '/possum3.jpg', '/possum4.jpg' ]; self.addEventListener('install', (event) => { // Precache assets on install event.waitUntil(caches.open(cacheName).then((cache) => { return cache.addAll(precachedAssets); })); }); self.addEventListener('fetch', (event) => { // Is this one of our precached assets? const url = new URL(event.request.url); const isPrecachedRequest = precachedAssets.includes(url.pathname); if (isPrecachedRequest) { // Grab the precached asset from the cache event.respondWith(caches.open(cacheName).then((cache) => { return cache.match(event.request.url); })); } else { // Go to the network return; } }); </code></pre> <p>Above, an array of assets is precached at install time. When the service worker handles fetches, we check if the request URL handled by the <code translate="no" dir="ltr">fetch</code> event is in the array of precached assets. If so, we grab the resource from the cache, and skip the network. Other requests pass through to the network, and only the network. To see this strategy in action, <a href="https://service-worker-cache-only.glitch.me/">check out this demo</a> with your console open.</p> <h3 id="network_only" data-text="Network only" tabindex="-1">Network only</h3> <p><img src="/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-3b48b65632b29.png" alt="Shows flow from page, to service worker, to network." width="800" height="272" srcset="https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-3b48b65632b29_36.png 36w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-3b48b65632b29_48.png 48w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-3b48b65632b29_72.png 72w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-3b48b65632b29_96.png 96w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-3b48b65632b29_480.png 480w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-3b48b65632b29_720.png 720w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-3b48b65632b29_856.png 856w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-3b48b65632b29_960.png 960w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-3b48b65632b29_1440.png 1440w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-3b48b65632b29_1920.png 1920w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-3b48b65632b29_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>The opposite of "Cache Only" is "Network Only", where a request is passed through a service worker to the network without any interaction with the service worker cache. This is a good strategy for ensuring content freshness (think markup), but the tradeoff is that it will never work when the user is offline.</p> <p>Ensuring a request passes through to the network just means you don't call <code translate="no" dir="ltr">event.respondWith</code> for a matching request. If you want to be explicit, you can slap an empty <code translate="no" dir="ltr">return;</code> in your <code translate="no" dir="ltr">fetch</code> event callback for requests you want to pass through to the network. This is what happens in the "Cache Only" strategy demo for requests that aren't precached.</p> <h3 id="cache_first_falling_back_to_network" data-text="Cache first, falling back to network" tabindex="-1">Cache first, falling back to network</h3> <p><img src="/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-a13fd1c656eeb.png" alt="Shows flow from page, to service worker, to cache, then to network if not in the cache." width="800" height="272" srcset="https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-a13fd1c656eeb_36.png 36w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-a13fd1c656eeb_48.png 48w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-a13fd1c656eeb_72.png 72w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-a13fd1c656eeb_96.png 96w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-a13fd1c656eeb_480.png 480w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-a13fd1c656eeb_720.png 720w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-a13fd1c656eeb_856.png 856w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-a13fd1c656eeb_960.png 960w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-a13fd1c656eeb_1440.png 1440w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-a13fd1c656eeb_1920.png 1920w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-a13fd1c656eeb_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>This strategy is where things get a little more involved. For matching requests, the process goes like this:</p> <ol> <li>The request hits the cache. If the asset is in the cache, serve it from there.</li> <li>If the request is <em>not</em> in the cache, go to the network.</li> <li>Once the network request finishes, add it to the cache, then return the response from the network.</li> </ol> <p>Here's an example of this strategy, which you can test out in <a href="https://service-worker-cache-then-network.glitch.me/">a live demo</a>:</p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">// Establish a cache name const cacheName = 'MyFancyCacheName_v1'; self.addEventListener('fetch', (event) => { // Check if this is a request for an image if (event.request.destination === 'image') { event.respondWith(caches.open(cacheName).then((cache) => { // Go to the cache first return cache.match(event.request.url).then((cachedResponse) => { // Return a cached response if we have one if (cachedResponse) { return cachedResponse; } // Otherwise, hit the network return fetch(event.request).then((fetchedResponse) => { // Add the network response to the cache for later visits cache.put(event.request, fetchedResponse.clone()); // Return the network response return fetchedResponse; }); }); })); } else { return; } }); </code></pre> <p>Though this example covers just images, this is a great strategy to apply to all static assets (such as CSS, JavaScript, images, and fonts), especially hash-versioned ones. It offers a speed boost for immutable assets by side-stepping any content freshness checks with the server the HTTP cache may kick off. More importantly, any cached assets will be available offline.</p> <h3 id="network_first_falling_back_to_cache" data-text="Network first, falling back to cache" tabindex="-1">Network first, falling back to cache</h3> <p><img src="/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5aa9ce979ce7c.png" alt="Shows flow from page, to service worker, to network, then to cache if network not available." width="800" height="272" srcset="https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5aa9ce979ce7c_36.png 36w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5aa9ce979ce7c_48.png 48w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5aa9ce979ce7c_72.png 72w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5aa9ce979ce7c_96.png 96w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5aa9ce979ce7c_480.png 480w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5aa9ce979ce7c_720.png 720w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5aa9ce979ce7c_856.png 856w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5aa9ce979ce7c_960.png 960w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5aa9ce979ce7c_1440.png 1440w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5aa9ce979ce7c_1920.png 1920w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5aa9ce979ce7c_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>If you were to flip "Cache first, network second" on its head, you end up with the "Network first, cache second" strategy, which is what it sounds like:</p> <ol> <li>You go to the network first for a request, and place the response in the cache.</li> <li>If you're offline at a later point, you fall back to the latest version of that response in the cache.</li> </ol> <p>This strategy is great for HTML or API requests when, while online, you want the most recent version of a resource, yet want to give offline access to the most recent available version. Here's what that might look like when applied to requests for HTML:</p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">// Establish a cache name const cacheName = 'MyFancyCacheName_v1'; self.addEventListener('fetch', (event) => { // Check if this is a navigation request if (event.request.mode === 'navigate') { // Open the cache event.respondWith(caches.open(cacheName).then((cache) => { // Go to the network first return fetch(event.request.url).then((fetchedResponse) => { cache.put(event.request, fetchedResponse.clone()); return fetchedResponse; }).catch(() => { // If the network is unavailable, get return cache.match(event.request.url); }); })); } else { return; } }); </code></pre> <p>You can try this out <a href="https://service-worker-network-then-cache.glitch.me/">in a demo</a>. First, go to the page. You may need to reload before the HTML response is placed in the cache. Then in your developer tools, <a href="https://developers.google.com/web/ilt/pwa/tools-for-pwa-developers#simulate_offline_behavior">simulate an offline connection</a>, and reload again. The last available version will be served instantly from the cache.</p> <p>In situations where offline capability is important, but you need to balance that capability with access to the most recent version of a bit of markup or API data, "Network first, cache second" is a solid strategy that achieves that goal.</p> <h3 id="stale-while-revalidate" data-text="Stale-while-revalidate" tabindex="-1">Stale-while-revalidate</h3> <p><img src="/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5b2c0ea03f4f3.png" alt="Shows flow from page, to service worker, to cache, then from network to cache." width="800" height="272" srcset="https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5b2c0ea03f4f3_36.png 36w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5b2c0ea03f4f3_48.png 48w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5b2c0ea03f4f3_72.png 72w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5b2c0ea03f4f3_96.png 96w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5b2c0ea03f4f3_480.png 480w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5b2c0ea03f4f3_720.png 720w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5b2c0ea03f4f3_856.png 856w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5b2c0ea03f4f3_960.png 960w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5b2c0ea03f4f3_1440.png 1440w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5b2c0ea03f4f3_1920.png 1920w,https://developer.chrome.com/static/docs/workbox/caching-strategies-overview/image/shows-flow-page-servic-5b2c0ea03f4f3_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>Of the strategies we've covered so far, "Stale-while-revalidate" is the most complex. It's similar to the last two strategies in some ways, but the procedure prioritizes speed of access for a resource, while also keeping it up to date in the background. This strategy goes something like:</p> <ol> <li>On the first request for an asset, fetch it from the network, place it in the cache, and return the network response.</li> <li>On subsequent requests, serve the asset from the cache first, then "in the background," re-request it from the network and update the asset's cache entry.</li> <li>For requests after that, you'll receive the last version fetched from the network that was placed in the cache in the prior step.</li> </ol> <p>This is an excellent strategy for things that are <em>sort</em> of important to keep up to date, but are not crucial. Think of stuff like avatars for a social media site. They get updated when users get around to doing so, but the latest version isn't strictly necessary on every request.</p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">// Establish a cache name const cacheName = 'MyFancyCacheName_v1'; self.addEventListener('fetch', (event) => { if (event.request.destination === 'image') { event.respondWith(caches.open(cacheName).then((cache) => { return cache.match(event.request).then((cachedResponse) => { const fetchedResponse = fetch(event.request).then((networkResponse) => { cache.put(event.request, networkResponse.clone()); return networkResponse; }); return cachedResponse || fetchedResponse; }); })); } else { return; } }); </code></pre> <p>You can see this in action in <a href="https://service-worker-stale-while-revalidate.glitch.me/">yet another live demo</a>, particularly if you pay attention to the network tab in your browser's developer tools, and its <code translate="no" dir="ltr">CacheStorage</code> viewer (if your browser's developer tools has such a tool).</p> <h2 id="onward_to_workbox" data-text="Onward to Workbox!" tabindex="-1">Onward to Workbox!</h2> <p>This document wraps up our review of service worker's API, as well as related APIs, which means you've learned enough about how to directly use service workers to start tinkering with Workbox!</p> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2021-09-24 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2021-09-24 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400036&template=1897236" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400036&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/deprecated" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Archive </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://web.dev/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="nl" >Nederlands</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-5QF3RT2", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Workbox", "signedIn": "False", "tenant": "chrome", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="BTPyYOe6+QtJU8NtlHgSU/GU+0oEZH"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/js/app_loader.js', '[53,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome","https://chrome-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/chrome/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","developer.chrome.com","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Profiles__enable_developer_profiles_callout","MiscFeatureFlags__enable_variable_operator","DevPro__enable_cloud_innovators_plus","Profiles__enable_page_saving","MiscFeatureFlags__enable_explain_this_code","Cloud__enable_cloud_dlp_service","MiscFeatureFlags__enable_view_transitions","Cloud__enable_llm_concierge_chat","Cloud__enable_cloud_facet_chat","EngEduTelemetry__enable_engedu_telemetry","MiscFeatureFlags__emergency_css","BookNav__enable_tenant_cache_key","Profiles__enable_recognition_badges","Concierge__enable_pushui","Cloud__enable_free_trial_server_call","MiscFeatureFlags__developers_footer_image","Profiles__enable_awarding_url","Cloud__enable_cloudx_ping","Search__enable_ai_eligibility_checks","Profiles__enable_public_developer_profiles","Search__enable_dynamic_content_confidential_banner","Cloud__enable_cloud_shell","Profiles__enable_completecodelab_endpoint","DevPro__enable_developer_subscriptions","Cloud__enable_cloud_shell_fte_user_flow","Experiments__reqs_query_experiments","Profiles__enable_complete_playlist_endpoint","MiscFeatureFlags__enable_firebase_utm","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_profile_collections","CloudShell__cloud_code_overflow_menu","Cloud__enable_cloudx_experiment_ids","CloudShell__cloud_shell_button","Profiles__require_profile_eligibility_for_signin","Cloud__enable_legacy_calculator_redirect","Profiles__enable_release_notes_notifications","MiscFeatureFlags__enable_project_variables","Search__enable_suggestions_from_borg","OnSwitch__enable","TpcFeatures__enable_required_headers","Search__enable_page_map","Analytics__enable_clearcut_logging","Profiles__enable_dashboard_curated_recommendations","MiscFeatureFlags__developers_footer_dark_image"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[53,"chrome","Chrome for Developers","developer.chrome.com",null,"chrome-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[69,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-5QF3RT2"],null,null,null,null,null,[["GTM-5QF3RT2",1]],1]],null,4]]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Strategies for service worker caching | Workbox | Chrome for Developers