Your first offline web app


Chrome Developer Summit

Nov 17-18, Mountain View, CA - Learn more

In this codelab, you’ll learn how to integrate a service worker into an existing application to make it work offline.

The application is called Air Horner . It uses the Web Audio API to play and manipulate an airhorn sound, and it is probably one of the best air horn apps on the market today (according to the author of this codelab at least). It’s a simple application but it will demonstrate the use of a service worker.

A service worker is a script that is run by your browser in the background, separate from a web page, opening the door to features which don’t need a web page or user interaction. In the future this will include push messages, background sync, and geofencing, but the first feature it will launch with is the ability to intercept and handle network requests, including programmatically managing a cache of responses.

The reason this is such an exciting API is that it allows you to support offline experiences, giving developers complete control over what exactly that experience is.

What you’ll learn How to add a basic Service Worker to an existing project. A brief overview of Service Worker Lifecycle A simple offline caching strategy What you’ll need Chrome 44 or above A basic understanding of Promises The sample code A text editor Python or a simple local web server Topics Get the sample code Run the sample app Test the app Build the starter app Register a Service Worker on the site Install the site assets Intercept the web page requests Congratulations

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License , and code samples are licensed under the Apache 2.0 License . For details, see ourTerms of Service.