https://github.com/okitavera/eleventy-plugin-pwa

An eleventy plugin to generate service-worker for PWA. Powered by Google Workbox
https://github.com/okitavera/eleventy-plugin-pwa

eleventy eleventy-plugin service-worker workbox-generatesw

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/okitavera/eleventy-plugin-pwa
• Owner: okitavera
• License: mit
• Archived: true
• Created: 2019-01-05T04:06:02.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-09T22:28:05.000Z (almost 2 years ago)
• Last Synced: 2024-09-18T16:04:43.959Z (about 2 months ago)
• Topics: eleventy, eleventy-plugin, service-worker, workbox-generatesw
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/eleventy-plugin-pwa
• Size: 461 KB
• Stars: 48
• Watchers: 2
• Forks: 7
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# eleventy-plugin-pwa

[![travis](https://img.shields.io/travis/okitavera/eleventy-plugin-pwa.svg?style=flat-square)](https://travis-ci.org/okitavera/eleventy-plugin-pwa)

[![license: MIT](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](LICENSE)

[![eleventy](https://img.shields.io/badge/staticgen-eleventy-%23707070.svg?style=flat-square)](https://11ty.io)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

[![codecov](https://img.shields.io/codecov/c/github/okitavera/eleventy-plugin-pwa.svg?style=flat-square)](https://codecov.io/gh/okitavera/eleventy-plugin-pwa)

> An [Eleventy](https://11ty.io) 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

```bash

npm i eleventy-plugin-pwa

```

#### Add to eleventy config file

```js

const pluginPWA = require("eleventy-plugin-pwa");

module.exports = function(eleventyConfig) {

  eleventyConfig.addPlugin(pluginPWA);

};

```

Read more about [Eleventy plugins](https://www.11ty.io/docs/plugins/)

#### Registering Service Worker

```html

// in your header templates

  if ("serviceWorker" in navigator)

    navigator.serviceWorker.register("/service-worker.js");

```

#### Adding Web App Manifest

Read [The Web App Manifest Guide](https://developers.google.com/web/fundamentals/web-app-manifest/)

## Options

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

For example :

```js

// 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](https://developers.google.com/web/tools/workbox/modules/workbox-build#full_generatesw_config)

## License

This code is available under the [MIT license](LICENSE).