grunt-service-worker-precache
A Grunt task for generating service workers using sw-precache.
Loaded with default settings including runtimeCaching
which automatically uses the correct handlers to cache both the page content and all resources.
Out of the box this will work for dynamic websites without any special configurations!
Obviously all options may be overridden for static sites and apps.
Getting Started
grunt-sw-precache requires Grunt ~1.0.3
.
If you haven't used Grunt before, please view the Getting Started guide. The guide explains how to create a Gruntfile, and how to install and use Grunt plugins.
Installation
Add the following resolution to your package.json
file
yarn add grunt-service-worker-precache
To enable grunt-service-worked-precache, add the following line to your Gruntfile
:
grunt.loadNpmTasks('grunt-service-worker-precache');
Configuration
The options documented here are specific to grunt-service-worker-precache
.
For all other options, please view the options documentation for sw-precache.
object
startURL start_url
specified in PWA manifest. This URL and any provided resources will be precached to make available if app starts up offline.
startURL: {
url : '/',
resources: [ '/dist/img1.png', '/dist/style.css' ]
}
Default is url : '/'
and resources: []
.
Set to false
to disable.
object
offlineFallback A page to load if the we go offline and the current page is not cached. Also specifiy an array of resources like images or stylesheets to preload specifically for this page.
offlineFallback: {
url : '/offline',
resources: [ '/dist/img1.png', '/dist/style.css' ]
}
Default is url : '/'
and resources: []
.
Set to false
to disable.
boolean
cacheGoogleFonts Cache any required Google Webfonts so they will be loaded when site is offline.
Default is true
string
baseDir The base directory for the staticFileGlobs
and workerFileName
options.
Default is "./"
;
string
workerFileName The file name of the generated service worker. This is joined with the baseDir
option.
Default is "service-worker.js"
;
boolean
appendTimestamp If true
, a comment containing a human readable UTC timestamp will be appended to the service worker.
/* @preserve Thu, 01 Jan 1970 00:00:00 GMT */
Default is true
;
string
stripPrefix The same option as stripPrefix
in sw-precache, but has a different default value.
Default is baseDir + '/'
;
Example
grunt.initConfig({
'sw-precache': {
options: {
cacheId: '<%= pkg.name %>'
},
/**
* Don't use cache while developing
*/
default: {
handleFetch: false
},
dist: {
startURL : {
url : '/',
resources : []
},
offlineFallback : {
url : '/offline',
resources : []
}
}
});
runtimeCaching
configuration
Default runtimeCaching: [
{
urlPattern: /\/$/,
handler: 'networkFirst'
},
{
urlPattern: /\/*\.css/,
handler: 'cacheFirst',
options: {
cache: {
maxEntries: 50,
name: 'css-cache'
}
}
},
{
urlPattern: /\/*\.js/,
handler: 'cacheFirst',
options: {
cache: {
maxEntries: 50,
name: 'js-cache'
}
}
},
{
urlPattern: /\/*\.(?:png|jpg|gif|jpeg)/,
handler: 'cacheFirst',
options: {
cache: {
maxEntries: 500,
name: 'img-cache'
}
}
},
{
urlPattern: /\/*\.(?:tff|woff|eot|svg)/,
handler: 'cacheFirst',
options: {
cache: {
maxEntries: 10,
name: 'font-cache'
}
}
}]
License
Released under the MIT license.