Service Worker Precache
Precache specific resources
Service Worker Precache is a module for generating a service worker that
precaches resources. The module is designed for use with
gulp
or grunt
build scripts,
though it also provides a command-line interface. The module's API provides
methods for creating a service worker and saving the resulting code to a file.
Everything you need to get started is in this readme. Those of you who want more
depth can read the background doc.
Install
Local build integration:
$ npm install --save-dev sw-precache
Global command-line interface:
$ npm install --global sw-precache
Usage
Overview
-
Make sure your site is served using HTTPS! Service worker functionality is only available on pages that are accessed via HTTPS. (
http://localhost
will also work, to facilitate testing.) The rationale for this restriction is outlined in the "Prefer Secure Origins For Powerful New Features" document. -
Incorporate
sw-precache
into yournode
-based build script. It should work well with eithergulp
orGrunt
, or other build scripts that run onnode
. In fact, we've provided examples of both in thedemo/
directory. Each build script indemo
has a function calledwriteServiceWorkerFile()
that shows how to use the API. Both scripts generate fully-functional JavaScript code that takes care of precaching and fetching all the resources your site needs to function offline. There is also a command-line interface available, for those using alternate build setups. -
Register the service worker JavaScript. The JavaScript that's generated needs to be registered as the controlling service worker for your pages. This technically only needs to be done from within a top-level "entry" page for your site, since the registration includes a
scope
which will apply to all pages underneath your top-level page.service-worker-registration.js
is a sample script that illustrates the best practices for registering the generated service worker and handling the various lifecycle events.
Example
The project's sample gulpfile.js
illustrates the full use of sw-precache
in context. (Note that the sample gulpfile.js is the one in the demo
folder,
not the one in the root of the project.) You can run the sample by cloning this
repo, using npm install
to pull in the
dependencies, changing to the demo/
directory, running gulp serve-dist
, and
then visiting http://localhost:3000.
There's also a sample Gruntfile.js
that shows service worker generation in
Grunt. Though, it doesn't run a server on localhost.
Here's a simpler gulp example for a basic use case. It assumes your site's resources are located under
app
and that you'd like to cache all your JavaScript, HTML, CSS, and image files.
gulp.task('generate-service-worker', function(callback) {
var path = require('path');
var swPrecache = require('sw-precache');
var rootDir = 'app';
swPrecache.write(path.join(rootDir, 'service-worker.js'), {
staticFileGlobs: [rootDir + '/**/*.{js,html,css,png,jpg,gif}'],
stripPrefix: rootDir
}, callback);
});
This task will create app/service-worker.js
, which your client pages need to
register before it can take control of your site's
pages. service-worker-registration.js
is a ready-to-
use script to handle registration.
Considerations
-
Service worker caching should be considered a progressive enhancement. If you follow the model of conditionally registering a service worker only if it's supported (determined by
if('serviceWorker' in navigator)
), you'll get offline support on browsers with service workers and on browsers that don't support service workers, the offline-specific code will never be called. There's no overhead/breakage for older browsers if you addsw-precache
to your build. -
All resources that are precached will be fetched by a service worker running in a separate thread as soon as the service worker is installed. You should be judicious in what you list in the
dynamicUrlToDependencies
andstaticFileGlobs
options, since listing files that are non-essential (large images that are not shown on every page, for instance) will result in browsers downloading more data then is strictly necessary. -
Precaching doesn't make sense for all types of resources (see the previous point). Other caching strategies, like those outlined in the Offline Cookbook, can be used in conjunction with
sw-precache
to provide the best experience for your users. If you do implement additional caching logic, put the code in a separate JavaScript file and include it using theimportScripts()
method. -
sw-precache
uses a cache-first strategy, which results in a copy of any cached content being returned without consulting the network. A useful pattern to adopt with this strategy is to display a toast/alert to your users when there's new content available, and give them an opportunity to reload the page to pick up that new content (which the service worker will have added to the cache, and will be available at the next page load). The sample service- worker-registration.js file illustrates the service worker lifecycle event you can listen for to trigger this message.
Command-line interface
For those who would prefer not to use sw-precache
as part of a gulp
or
Grunt
build, there's a command-line interface which supports the
options listed in the API, provided via flags. Sensible
defaults are assumed for options that are not provided.
For example, if you are inside the top-level directory that contains your site's contents, and you'd
like to generate a service-worker.js
file that will automatically precache all of the local
files, you can simply run
$ sw-precache
Alternatively, if you'd like to only precache .html
files that live within dist/
, which is a
subdirectory of the current directory, you could run
$ sw-precache --root=dist --static-file-globs='dist/**/*.html'
Note: Be sure to use quotes around parameter values that have special meanings
to your shell (such as the *
characters in the sample command line above,
for example).
API
Methods
The sw-precache
module exposes two methods: generate
and write
.
generate(options, callback)
generate
takes in options, generates a service worker
from them and passes the result to a callback function, which must
have the following interface:
callback(error, serviceWorkerString)
In the 1.x releases of sw-precache
, this was the default and only method
exposed by the module.
Since 2.2.0, generate()
also returns a
Promise
.
write(filePath, options, callback)
write
takes in options, generates a service worker from them,
and writes the service worker to a specified file. This method always
invokes callback(error)
. If no error was found, the error
parameter will
be `null'
Since 2.2.0, write()
also returns a Promise
.
Options Parameter
Both the generate()
and write()
methods take the same options.
cacheId [String]
A string used to distinguish the caches created by different web applications that are served off
of the same origin and path. While serving completely different sites from the same URL is not
likely to be an issue in a production environment, it avoids cache-conflicts when testing various
projects all served off of http://localhost
. You may want to set it to, e.g., the name
property from your package.json
.
Default: ''
directoryIndex [String]
Sets a default filename to return for URL's formatted like directory paths (in
other words, those ending in '/'
). sw-precache
will take that translation
into account and serve the contents a relative directoryIndex
file when
there's no other match for a URL ending in '/'
. To turn off this behavior,
set directoryIndex
to false
or null
. To override this behavior for one
or more URLs, use the dynamicUrlToDependencies
option to explicitly set up
mappings between a directory URL and a corresponding file.
Default: 'index.html'
dynamicUrlToDependencies [Object⟨String,Array⟨String⟩⟩]
Maps a dynamic URL string to an array of all the files that URL's contents
depend on. E.g., if the contents of /pages/home
are generated server-side via
the templates layout.jade
and home.jade
, then specify '/pages/home': ['layout.jade', 'home.jade']
. The MD5 hash is used to determine whether
/pages/home
has changed will depend on the hashes of both layout.jade
and
home.jade
.
Default: {}
handleFetch [boolean]
Determines whether the fetch
event handler is included in the generated
service worker code. It is useful to set this to false
in development builds,
to ensure that features like live reload still work. Otherwise, the content
would always be served from the service worker cache.
Default: true
ignoreUrlParametersMatching [Array⟨Regex⟩]
sw-precache
finds matching cache entries by doing a comparison with the full request URL. It's
common for sites to support URL query parameters that don't affect the site's content and should
be effectively ignored for the purposes of cache matching. One example is the
utm_
-prefixed parameters used for tracking
campaign performance. By default, sw-precache
will ignore key=value
when key
matches any of
the regular expressions provided in this option.
To ignore all parameters, use [/./]
. To take all parameters into account when matching, use []
.
Default: [/^utm_/]
importScripts [Array⟨String⟩]
Writes calls to [importScripts()
]
(https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/basic_usage#Importing_scripts_and_libraries)
to the resulting service worker to import the specified scripts.
Default: []
logger [function]
Specifies a callback function for logging which resources are being precched and
a precache size. Use function() {}
if you'd prefer that nothing is logged.
Within a gulp
script, it's recommended that you use gulp-util
and pass in gutil.log
.
Default: console.log
maximumFileSizeToCacheInBytes [Number]
Sets the maximum allowed size for a file in the precache list.
Default: 2097152
(2 megabytes)
navigateFallback [String]
Sets an HTML document to use as a fallback for URLs not found in the cache. To
be effective, this fallback URL should be already cached via staticFileGlobs
or dynamicUrlToDependencies
.
This comes in handy when used with a web application that performs client-side URL routing using the History API. It allows any arbitrary URL that the client generates to map to a fallback cached HTML entry. This fallback entry ideally should serve as an "application shell" that is able to load the appropriate resources client-side, based on the request URL.
Note: The current implementation searches the request's accept
header and
triggers the fallback when 'text/html'
is found. It does this whether or not
the request is a navigation.
Default: ''
stripPrefix [String]
Removes a specified string from the beginning of path URL's at runtime. Use this
option when there's a discrepancy between a relative path at build time and
the same path at run time. For example, if all your local files are under
dist/app/
and your web root is also at dist/app/
, you'd strip that prefix
from the start of each local file's path in order to get the correct relative
URL.
Default: ''
replacePrefix [String]
Replaces a specified string at the beginning of path URL's at runtime. Use this
option when you are serving static files from a different directory at runtime
than you are at build time. For example, if your local files are under
dist/app/
but your static asset root is at /public/
, you'd strip 'dist/app/'
and replace it with '/public/'.
Default: ''
staticFileGlobs [Array⟨String⟩]
An array of one or more string patterns that will be passed in to
glob
.
All files matching these globs will be automatically precached by the generated service worker.
You'll almost always want to specify something for this.
Default: []
templateFilePath [String]
The path to the (lo-dash) template used to
generate service-worker.js
. If you need to add additional functionality to the
generated service worker code, it's recommended that you use the
importScripts
option to include extra JavaScript rather than
using a different template. But if you do need to change the basic generated
service worker code, please make a copy of the original template,
modify it locally, and use this option to point to your template file.
Default: service-worker.tmpl
(in the directory that this module lives in)
verbose [boolean]
Determines whether there's log output for each individual static/dynamic resource that's precached. Even if this is set to false, there will be a final log entry indicating the total size of all precached resources.
Default: false
Acknowledgements
Thanks to Sindre Sorhus and Addy Osmani for their advice and code reviews. Jake Archibald was kind enough to review the service worker logic.
License
Apache 2.0 © 2015 Google Inc.
Copyright 2015 Google, Inc.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.