okitavera/eleventy-plugin-pwa

An eleventy plugin to generate service-worker for PWA. Powered by Google Workbox

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.

eleventy-plugin-pwa's Issues

Add more pages to the cache

Hi,
It's working perfectly but one of my pages is not caching to offline mode.
index.html and CMS pages are working but I have another at the root that is not.

Do I have to add it manually? If true, how can I do it?

Thanks for your work btw

Upgrade workbox-build to v5

Add example site

Adding an example site that uses the plugin would make it easier to evaluate.

Not wotking with Eleventy > 1.0.0

In latest Eleventy builds the finish method was removed from Eleventy class, so this plugin is not working anymore.
Any plan to upgrade it?
Thanks.

Not seeing any service-worker.js

Everything seems to have installed correctly but I'm not seeing my service-worker.js, no matter.
There's also no error in the build process.

disabling workbox logging

According to this page, I think I should be able to disable workbox logging by setting the "mode" option to "production":

https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.generateSW

But when I include this in the function exported by .eleventy.js it says "mode" is not a supported parameter":

  eleventyConfig.addPlugin(pwaPlugin, {
    swDest: './_site/service-worker.js',
    globDirectory: './_site',
    mode: 'production'
  });

Do you know how I can disable the workbox logging that appears in the DevTools console?

builder.js not firing.

I found out that builder.js is not firing, thus I cannot get the service-worker.js. I have made some changes to .eleventy.js, in order to make it works again and easier to read.

const shimmer = require("shimmer");
const swBuild = require("./src/builder.js");

module.exports = {
  configFunction: (__, options = {}) => {
    console.log('PWA running');
    function postBuild() {
      const Eleventy = require("@11ty/eleventy/src/Eleventy");
      shimmer.wrap(Eleventy.prototype, "finish", function(orig) {
        const outputDir = new Eleventy().outputDir;
        process.on("unhandledRejection", (reason) => {
          console.log("Reason: " + reason);
        });
        return swBuild(options, outputDir).then((res) => console.log(res));

      });
    }
    setImmediate(postBuild);
  }
};

It will be great if you can update the code for the next version. Thanks.

network-first strategy

Is there a way to tell workbox that you want it to use the network-first strategy so it always attempts to load files from the network before getting them from the cache? It seems like this would be desirable while making changes to a site.