├── .editorconfig ├── .eleventy.js ├── .gitignore ├── .prettierrc.yml ├── .travis.yml ├── LICENSE ├── README.md ├── package.json ├── src └── builder.js ├── test ├── builder.test.js └── stub │ └── index.html └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | insert_final_newline = true 7 | indent_style = space 8 | indent_size = 2 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eleventy.js: -------------------------------------------------------------------------------- 1 | const shimmer = require("shimmer"); 2 | 3 | module.exports = { 4 | configFunction: (__, options = {}) => { 5 | function postBuild() { 6 | const Eleventy = require("@11ty/eleventy/src/Eleventy"); 7 | shimmer.wrap(Eleventy.prototype, "finish", function(orig) { 8 | const outputDir = new Eleventy().outputDir; 9 | process.on("unhandledRejection", (reason) => { 10 | console.log("Reason: " + reason); 11 | }); 12 | return function() { 13 | const swBuild = require("./src/builder"); 14 | swBuild(options, outputDir).then((res) => console.log(res)); 15 | return orig.apply(this); 16 | }; 17 | }); 18 | } 19 | setImmediate(postBuild); 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .Trash-* 3 | .nyc* 4 | coverage/ 5 | -------------------------------------------------------------------------------- /.prettierrc.yml: -------------------------------------------------------------------------------- 1 | arrowParens: "always" 2 | endOfLine: "lf" 3 | jsxBracketSameLine: true 4 | semi: true 5 | singleQuote: false 6 | trailingComma: "none" 7 | useTabs: false 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "node" 4 | install: 5 | - yarn 6 | - yarn add codecov 7 | script: 8 | - yarn test 9 | after_success: yarn coverage 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Nanda Okitavera 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # eleventy-plugin-pwa 2 | 3 | [![travis](https://img.shields.io/travis/okitavera/eleventy-plugin-pwa.svg?style=flat-square)](https://travis-ci.org/okitavera/eleventy-plugin-pwa) 4 | [![license: MIT](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](LICENSE) 5 | [![eleventy](https://img.shields.io/badge/staticgen-eleventy-%23707070.svg?style=flat-square)](https://11ty.io) 6 | [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) 7 | [![codecov](https://img.shields.io/codecov/c/github/okitavera/eleventy-plugin-pwa.svg?style=flat-square)](https://codecov.io/gh/okitavera/eleventy-plugin-pwa) 8 | 9 | > An [Eleventy](https://11ty.io) plugin to generate service worker. 10 | > Using Google Workbox to generate service-worker.js based on your `dir.output`. 11 | 12 | ### Note 13 | 14 | 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. 15 | 16 | ## Installation 17 | 18 | ```bash 19 | npm i eleventy-plugin-pwa 20 | ``` 21 | 22 | #### Add to eleventy config file 23 | 24 | ```js 25 | const pluginPWA = require("eleventy-plugin-pwa"); 26 | module.exports = function(eleventyConfig) { 27 | eleventyConfig.addPlugin(pluginPWA); 28 | }; 29 | ``` 30 | 31 | Read more about [Eleventy plugins](https://www.11ty.io/docs/plugins/) 32 | 33 | #### Registering Service Worker 34 | 35 | ```html 36 | // in your header templates 37 | 41 | ``` 42 | 43 | #### Adding Web App Manifest 44 | 45 | Read [The Web App Manifest Guide](https://developers.google.com/web/fundamentals/web-app-manifest/) 46 | 47 | ## Options 48 | 49 | You can also pass workbox generateSW options directly into the plugin. 50 | For example : 51 | 52 | ```js 53 | // overwriting destination file and more 54 | const pluginPWA = require("eleventy-plugin-pwa"); 55 | module.exports = function(eleventyConfig) { 56 | eleventyConfig.addPlugin(pluginPWA, { 57 | swDest: "./build/sw.js", 58 | globDirectory: "./build" 59 | }); 60 | }; 61 | ``` 62 | 63 | Read more about it on [workbox generateSW module page](https://developers.google.com/web/tools/workbox/modules/workbox-build#full_generatesw_config) 64 | 65 | ## License 66 | 67 | This code is available under the [MIT license](LICENSE). 68 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eleventy-plugin-pwa", 3 | "version": "1.0.8", 4 | "description": "An Eleventy plugin to generate service worker for PWA using Google Workbox", 5 | "main": ".eleventy.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/okitavera/eleventy-plugin-pwa.git" 9 | }, 10 | "keywords": [ 11 | "eleventy-plugin", 12 | "eleventy", 13 | "workbox", 14 | "pwa" 15 | ], 16 | "author": { 17 | "name": "Nanda Oktavera", 18 | "email": "codeharuka.yusa@gmail.com", 19 | "url": "https://okitavera.me/" 20 | }, 21 | "license": "MIT", 22 | "dependencies": { 23 | "shimmer": "^1.2.1", 24 | "workbox-build": "^4.3.0" 25 | }, 26 | "devDependencies": { 27 | "@11ty/eleventy": "^0.9.0", 28 | "jest": "^24.9.0", 29 | "rimraf": "^3.0.0" 30 | }, 31 | "scripts": { 32 | "test": "jest", 33 | "coverage": "jest && codecov" 34 | }, 35 | "jest": { 36 | "coverageDirectory": "./coverage/", 37 | "collectCoverage": true 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/builder.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs"); 2 | const workbox = require("workbox-build"); 3 | 4 | module.exports = async (options, outputDir) => { 5 | appId = "eleventy-plugin-pwa"; 6 | defaultOptions = { 7 | importWorkboxFrom: "local", 8 | cacheId: appId, 9 | skipWaiting: true, 10 | clientsClaim: true, 11 | swDest: `${outputDir}/service-worker.js`, 12 | globDirectory: outputDir, 13 | globPatterns: [ 14 | "**/*.{html,css,js,mjs,map,jpg,png,gif,webp,ico,svg,woff2,woff,eot,ttf,otf,ttc,json}" 15 | ], 16 | runtimeCaching: [ 17 | { 18 | urlPattern: /^.*\.(html|jpg|png|gif|webp|ico|svg|woff2|woff|eot|ttf|otf|ttc|json)$/, 19 | handler: `staleWhileRevalidate` 20 | }, 21 | { 22 | urlPattern: /^https?:\/\/fonts\.googleapis\.com\/css/, 23 | handler: `staleWhileRevalidate` 24 | } 25 | ] 26 | }; 27 | 28 | const opts = Object.assign({}, defaultOptions, options); 29 | let files; 30 | try { 31 | files = fs.readdirSync(opts.globDirectory); 32 | if (files && files.length == 0) 33 | throw new Error( 34 | `No files that can be cached on '${opts.globDirectory}', ignoring.` 35 | ); 36 | } catch (e) { 37 | return e.message; 38 | } 39 | const genSW = await workbox.generateSW(opts); 40 | const size = (genSW.size / 1048576).toFixed(2); 41 | return `${genSW.count} files will be precached, totaling ${size} MB.`; 42 | }; 43 | -------------------------------------------------------------------------------- /test/builder.test.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs"); 2 | const rimraf = require("rimraf"); 3 | const path = require("path"); 4 | const buildr = require("../src/builder"); 5 | const stub = "test/stub"; 6 | 7 | afterAll(() => { 8 | let opt = { glob: true }; 9 | fs.readdirSync(stub).forEach((i) => { 10 | if (!i.match(/^index.*/g)) { 11 | rimraf.sync(path.join(stub, i), opt); 12 | } 13 | }); 14 | }); 15 | 16 | it("dir not exist", async () => { 17 | let out = await buildr({}, path.join(stub, "shadow")); 18 | await expect(out).toMatch(/^ENOENT/); 19 | }); 20 | 21 | it("dir exist but no content to index", async () => { 22 | let dir = path.join(stub, "empty"); 23 | fs.mkdirSync(dir); 24 | let out = await buildr({}, dir); 25 | await expect(out).toMatch(/^No/); 26 | }); 27 | 28 | it("dir exist and normal", async () => { 29 | let out = await buildr({}, stub); 30 | await expect(out).toMatch(/precached/); 31 | }); 32 | -------------------------------------------------------------------------------- /test/stub/index.html: -------------------------------------------------------------------------------- 1 | 2 | --------------------------------------------------------------------------------