11ty-plugin-pwa

eleventy-plugin-pwa

An Eleventy plugin to generate service worker. Using Google Workbox to generate service-worker.js based on your dir.output.

Note

Since (at this moment) eleventy doesn't have any API to do a things after build process, this plugin are using monkey patch method to wrap into the finish function in order to run workbox properly.

Installation

npm i eleventy-plugin-pwa

Add to eleventy config file

const pluginPWA = require("eleventy-plugin-pwa");
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(pluginPWA);
};

Read more about Eleventy plugins

Registering Service Worker

// in your header templates
<script>
  if ("serviceWorker" in navigator)
    navigator.serviceWorker.register("/service-worker.js");
</script>

Adding Web App Manifest

Read The Web App Manifest Guide

Options

You can also pass workbox generateSW options directly into the plugin. For example :

// overwriting destination file and more
const pluginPWA = require("eleventy-plugin-pwa");
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(pluginPWA, {
    swDest: "./build/sw.js",
    globDirectory: "./build"
  });
};

Read more about it on workbox generateSW module page

License

This code is available under the MIT license.