');mask-image:url('data:image/svg+xml;utf8, ');-webkit-mask-position:center 1.75em;mask-position:center 1.75em;-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;position:absolute;top:0;width:1.75em}}.landing-section--ordered.landing-section--top-3 .item,.landing-section--ordered.landing-section--top-4 .item{margin-top:1.75em}@media (max-width:591px){.landing-section--ordered.landing-section--top-3 .item,.landing-section--ordered.landing-section--top-4 .item{margin:1.75em 0;padding:0 0 0 3.125rem;position:relative}}.landing-section--ordered.landing-section--top-3 .item__outer,.landing-section--ordered.landing-section--top-4 .item__outer{border:0}@media (min-width:592px){.landing-section--ordered.landing-section--top-3 .item__outer::before,.landing-section--ordered.landing-section--top-4 .item__outer::before{background-color:var(--dot-color);content:"";display:block;height:1.75em;left:0;margin-bottom:1.75em;-webkit-mask-image:url('data:image/svg+xml;utf8, ');mask-image:url('data:image/svg+xml;utf8, ');-webkit-mask-position:1.75em center;mask-position:1.75em center;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;position:absolute;top:0;width:100%}}.landing-section--boxes{grid-template-columns:1fr;padding:0}@media (min-width:592px){.landing-section--boxes{grid-template-columns:1fr 1fr 1fr}}.landing-section--boxes .landing-deco{grid-area:1/-2/3/-1}@media (min-width:592px){.landing-section--left{grid-auto-flow:dense;grid-template-columns:1fr 2fr}.landing-section--left div:first-child{grid-column:2}.landing-section--left div:last-child{grid-column:1}}.landing-section--left .item__title{font-size:1.2em}.landing-section--left .item::before{font-size:1.1em}@media (min-width:592px){.landing-section--right{grid-auto-flow:dense;grid-template-columns:1fr 2fr}}.landing-section--right .item__title{font-weight:600}@media (min-width:592px){.landing-section--top-3 .landing-section__links{grid-template-columns:1fr 1fr 1fr}.landing-section--top-4 .landing-section__links{grid-template-columns:1fr 1fr 1fr 1fr}}.landing-section--top-3 .landing-deco__inner,.landing-section--top-4 .landing-deco__inner{display:grid;grid-template-columns:1fr}@media (min-width:592px){.landing-section--top-3 .landing-deco__inner,.landing-section--top-4 .landing-deco__inner{grid-template-columns:2fr 1fr}}.landing-section--top-3 .item__title,.landing-section--top-4 .item__title{font-size:1.2em}.landing-section--top-3 .landing-section__links,.landing-section--top-4 .landing-section__links{display:grid}.landing-section--top-3 .item__outer,.landing-section--top-4 .item__outer{position:relative}@media (min-width:592px){.landing-section--top-3 .item__outer,.landing-section--top-4 .item__outer{border-bottom:0}}.landing-section--top-3 .item__outer:not(:last-child),.landing-section--top-4 .item__outer:not(:last-child){border-bottom:1px solid var(--color-hairline)}.landing-section--top-3 .item,.landing-section--top-4 .item{padding:1em 3em 1em 0}@media (min-width:592px){.landing-section--top-3 .item,.landing-section--top-4 .item{padding:1em 3em 3em 0}}.landing-section--top-3 .item::before,.landing-section--top-4 .item::before{margin-top:-1.75em}@media (max-width:591px){.landing-section--top-3 .item::before,.landing-section--top-4 .item::before{margin-top:0}}.landing-section .icon{height:auto;width:auto}.landing-section--ordered .landing-section__links h3{background:#fff;line-height:2em;padding:6px 0}.landing-section--top-3 .landing-deco__inner,.landing-section--top-4 .landing-deco__inner{align-items:center}.landing-container{max-width:1200px}.load-more__button{align-items:center;background:var(--color-secondary);border:0;border-radius:10000px;color:var(--color-blue-medium);display:flex;padding:.5em 1.12em;text-decoration:none}.load-more__button svg{fill:var(--color-blue-medium);height:1.2em}.load-more__button:hover{text-decoration:underline}.load-more__button:not([disabled]){cursor:pointer}.load-more__button[disabled]{opacity:.5}.load-more__button[hidden]{display:none}.fugu-showcase .search-box{align-items:center;gap:1rem}.fugu-showcase .search-box__input{background:var(--color-bg-shade);border:0;border-radius:6.25rem;display:block;margin:0;padding:.5rem 3rem}.fugu-showcase .search-box__input::placeholder{color:var(--color-secondary-text)}.fugu-showcase .enhanced-select__wrapper{border:0;color:var(--color-primary)}.fugu-showcase .web-share{appearance:none;background:0 0;border:0;cursor:pointer}.enhanced-select__wrapper{border:1px solid var(--color-hairline);height:100%}.enhanced-select label{cursor:pointer;height:100%;min-width:80px;padding:0 .8em}.enhanced-select label svg{margin-left:.75rem;width:.625rem}.enhanced-select__options{background:#fff;bottom:0;box-shadow:0 1px 2px rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15);display:none;left:calc(50% - .75rem);list-style:none;margin:0;max-height:24.5rem;min-width:18rem;overflow-y:auto;padding:1.125rem 0;position:absolute;transform:translateY(100%);z-index:10}.enhanced-select__options::-webkit-scrollbar-thumb{background:#e8eaed}.enhanced-select__options::-webkit-scrollbar{width:.375rem}.enhanced-select__options li{border-radius:0 100px 100px 0;font-family:"Google Sans",sans-serif;font-size:.875rem;font-weight:500;line-height:1.2rem;padding:1rem 2.75rem;text-align:left}.enhanced-select__options li[selected]{background:#f8f9fa;color:#bdc1c6}.enhanced-select__options li:hover:not([selected]){background:#e8f0fe;color:#1967d2}.enhanced-select__options li:first-child{margin-top:0}.enhanced-select__options li:last-child{margin-bottom:0}.enhanced-select[open] .enhanced-select__options{display:block}.enhanced-select[multiple] li[selected] svg{fill:#9aa0a6;margin-right:calc(-2.75rem/2)}.enhanced-select[multiple] li[selected]:hover{color:#80868b}.enhanced-select[multiple] li[selected]:hover svg{fill:#80868b}enhanced-select{align-items:center;display:none;height:2.5rem;position:relative}enhanced-select:defined{display:inline-flex}enhanced-select select{max-height:100%}.hairline{border:1px solid var(--color-hairline)}.hairline-top{border-top:1px solid var(--color-hairline)}.hairline-bottom{border-bottom:1px solid var(--color-hairline)}.bg-blue-lightest{background-color:var(--color-blue-lightest)}.color-blue-medium{color:var(--color-blue-medium)}.color-blue-darkest{color:var(--color-blue-darkest)}.bg-yellow-lightest{background-color:var(--color-yellow-lightest)}.bg-yellow-medium{background-color:var(--color-yellow-medium)}.color-yellow-darkest{color:var(--color-yellow-darkest)}.color-red-medium{color:var(--color-red-medium)}.bg-green-lightest{background-color:var(--color-green-lightest)}.color-green-darkest{color:var(--color-green-darkest)}.color-bg{color:var(--color-bg)}.color-text{color:var(--color-text)}.color-secondary-text{color:var(--color-secondary-text)}.color-primary{color:var(--color-primary)}.bg-primary{background-color:var(--color-primary)}.footer__link,.surface{text-decoration:none}.footer__link:focus,.footer__link:hover,.surface:focus,.surface:hover{text-decoration:underline}.visually-hidden,.w-visually-hidden{border:0;clip:rect(0 0 0 0);height:auto;margin:0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
Skip to content The Chrome team is back at Google I/O on May 10!
Workbox
Production-ready service worker libraries and tooling.
Documentation # Introduction to service workers
Learn how service workers can progressively enhance your website and how Workbox makes it easy.
An overview of service workers.
Understanding the way that service workers behave to make offline applications possible.
An overview of caching in service workers.
Introducing Workbox, a set of modules that simplify common service worker routing and caching.
# How to use Workbox
There's more than one way to use Workbox so you can use the right integration for your project
Get familiar with some of the ways you can use Workbox.
Learn how to precache assets in a service worker with Workbox.
How to build a service worker in Workbox without workbox-build.
A quick reference of frameworks and plugins that integrate with Workbox
# What you need to know
Guidance to consider when building a service worker
Understanding the effect a service worker has on a website once deployed.
How to fix a service worker that is causing problems.
How to solve some of the local development issues you may encounter when using service workers.
A look at Workbox's logging features, and in-browser service worker debugging tools.
Introduction to the two different website architectures.
How to pair the application shell model with a service worker in your SPA.
What Navigation Preload is, how it can make navigations faster, and how to use it in Workbox.
Learn how you can use workbox-streams to create multipage applications that use partial markup from the service worker cache and partial content from the network to create fast experiences that render almost instantaneously.
Learn the do's and don'ts of precaching.
A guide on configuring Workbox to avoid storage quota issues.
# Use cases and recipes
Learn how to handle different use cases to get the most out of workbox
Sometimes users go offline. Learn how to adapt, and help them resume requests when they eventually go back online.
Learn how to handle caching resources during runtime, including cross-origin resources.
Learn how to force a network timeout in the presence of a slow network connection, and how to get the timing right.
Accessing Cache instances isn't just restricted to the service worker scope. You can also access them from the window context, and in this article, you'll learn how.
Dealing with audio and video resource requests in a service worker is hard. Learn how to use workbox-range-request to deal with such requests in a predictable way.
Sometimes users encounter network failures or go offline. Learn how to adapt to those situations and provide a fallback response.
Sometimes when you update a service worker, it's good to let users know. Here, you'll learn how to do just that.
Sometimes users go offline. Learn how to adapt, and help them resume requests when they eventually go back online.
While Workbox offers a lot of off-the-shelf utility, there may be times when you need to extend it to satisfy your application requirements. That's where Workbox's plugin architecture can come in handy.
# Additional resources
Dive deeper into Workbox modules, source code, and more
Dig deeper into specific Workbox modules.
Browse the API reference to get information on available methods in the Workbox API, broken down by module.
How-to guides on migrating from older versions of Workbox.
File issues, read release notes, and browse the source code.
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.