{"_id":"@alterjs/saber-plugin-pwa","name":"@alterjs/saber-plugin-pwa","dist-tags":{"latest":"0.13.0"},"versions":{"0.13.0":{"name":"@alterjs/saber-plugin-pwa","version":"0.13.0","description":"Add PWA support for your Saber app.","license":"MIT","repository":{"type":"git","url":"git+https://github.com/chawyehsu/saber.git"},"exports":{".":{"import":"./dist/index.min.mjs","require":"./dist/index.min.cjs"}},"main":"./dist/index.min.cjs","module":"./dist/index.min.mjs","scripts":{"build":"rimraf dist && rollup -c && node scripts/build.js","build:example":"saber build example","lint":"eslint src","prepublishOnly":"npm run build"},"peerDependencies":{"@alterjs/saber":"^0.13.0"},"dependencies":{"@snackbar/core":"1.7.0","stringify-attributes":"^4.0.0","workbox-build":"^6.6.0","workbox-window":"^6.6.0"},"publishConfig":{"access":"public"},"_id":"@alterjs/saber-plugin-pwa@0.13.0","gitHead":"df690b0df6c45372cb41b7fa42003f08edc08bf5","bugs":{"url":"https://github.com/chawyehsu/saber/issues"},"homepage":"https://github.com/chawyehsu/saber#readme","_nodeVersion":"18.20.4","_npmVersion":"10.7.0","dist":{"integrity":"sha512-6K23BpVSzQZh2BYNVpG0JQqaZTlBxvQ5U7kYJ+23MLkW7FKZ9TefGsAcLdoUIqkBjHh/fSLwCP+rIgVRFrnjvA==","shasum":"7b1fcbf1417113b8e72e9328546c18073e7b133a","tarball":"https://registry.npmjs.org/@alterjs/saber-plugin-pwa/-/saber-plugin-pwa-0.13.0.tgz","fileCount":7,"unpackedSize":14746,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWmA2X4iCGJm8WHbZszg8sExLC6B+IeC7IES+pgYj4/wIhAJd8W67BdGAc53CiBanZLGxmxqFK9CnU8Dijg6FoG4Vc"}]},"_npmUser":{"name":"chawyehsu","email":"su+npm@chawyehsu.com"},"directories":{},"maintainers":[{"name":"chawyehsu","email":"su+npm@chawyehsu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/saber-plugin-pwa_0.13.0_1737181479029_0.8710841448649429"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-18T06:24:38.929Z","0.13.0":"2025-01-18T06:24:39.192Z","modified":"2025-01-18T06:24:39.502Z"},"maintainers":[{"name":"chawyehsu","email":"su+npm@chawyehsu.com"}],"description":"Add PWA support for your Saber app.","homepage":"https://github.com/chawyehsu/saber#readme","repository":{"type":"git","url":"git+https://github.com/chawyehsu/saber.git"},"bugs":{"url":"https://github.com/chawyehsu/saber/issues"},"license":"MIT","readme":"# @alterjs/saber-plugin-pwa\n\nAdd PWA (progressive web app) support to your Saber app.\n\n## Install\n\n```bash\nyarn add @alterjs/saber-plugin-pwa\n```\n\n## Usage\n\nIn your `saber-config.yml`:\n\n```yml\nplugins:\n  - resolve: '@alterjs/saber-plugin-pwa'\n```\n\nThen you need to create a set of icons in `static` folder to make your app installable, for example:\n\n- `img/icons/icon_128x128.png`\n- `img/icons/icon_256x256.png`\n- `img/icons/icon_512x512.png`\n\nAnd create `static/manifest.json` to include these icons:\n\n```json\n{\n  \"icons\": [\n    {\n      \"src\": \"img/icons/icon_128x128.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"128x128\"\n    },\n    {\n      \"src\": \"img/icons/icon_256x256.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"256x256\"\n    },\n    {\n      \"src\": \"img/icons/icon_512x512.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"512x512\"\n    }\n  ]\n}\n```\n\nYou don't need to worry about other options in `manifest.json`, this plugin will set default values for them.\n\nNow run `saber build` and you will get a PWA-ready web app in `public` folder.\n\n### Configure the Text for the Update Notifier\n\nUse `siteConfig` in your Saber config file to configure the text:\n\n```yaml\nsiteConfig:\n  # Default values:\n  pwaFirstTimeInstallMessage: Ready for offline use\n  pwaUpdateFoundMessage: Downloading app updates in the background..\n  pwaUpdateReadyMessage: A new version of this app is available\n  pwaUpdateButtonMessage: UPDATE\n  pwaDismissMessage: DISMISS\n```\n\n### Remove Service Worker\n\nIf you no longer need this plugin in your website, you should first uninstall this plugin and remove it from your `saber-config.yml`:\n\n```diff\nplugins:\n-  - resolve: saber-plugin-pwa\n```\n\nThen populate a `static/service-worker.js` file as follows:\n\n```js\nself.addEventListener('install', function (e) {\n  self.skipWaiting()\n})\n\nself.addEventListener('activate', function (e) {\n  self.registration\n    .unregister()\n    .then(function () {\n      return self.clients.matchAll()\n    })\n    .then(function (clients) {\n      clients.forEach((client) => client.navigate(client.url))\n    })\n})\n```\n\nThe snippet tells your browser to remove previsously installed service worker and refresh.\n\n## Options\n\n### name\n\n- Type: `string`\n- Default: `siteConfig.title | 'Saber PWA App'`\n\nThe name for your PWA. You can also directly configure the `name` in your `manifest.json` to override this.\n\n### themeColor\n\n- Type: `string`\n- Default: `#ffffff`\n\nThe theme color for your PWA. You can also directly configure the `theme_color` in your `manifest.json` to override this.\n\n### assetsVersion\n\n- Type: `string`\n- Default: `''`\n\nThis option is used if you need to add a version to your `manifest.json`, against browser’s cache. This will append `?v=assetsVersion` to the URL of the manifest.\n\n### appleTouchIcon\n\n- Type: `string`\n\nThe URL to the apple touch icon, for example `img/icons/apple-touch-icon-152x152.png`, used by iOS devices. When this is not set we automatically use `icons` from your `manifest.json`.\n\n### notifyUpdates\n\n- Type: `boolean`\n- Default: `true`\n\nPop up an update notifier when a new update for your app if available.\n\nYou can disable this with `notifyUpdates: false` and use your custom update notifier in `saber-browser.js`:\n\n```js\n// `workbox` is injected by this plugin\nexport default ({ workbox }) => {\n  if (process.browser && workbox) {\n    workbox.addEventListener('installed', (event) => {\n      if (!event.isUpdate) {\n        showUpdateNotifier({\n          message: 'Ready for offline use',\n        })\n      }\n    })\n\n    workbox.addEventListener('waiting', () => {\n      showUpdateNotifier({\n        message: 'An update is ready, click to apply',\n        clicked() {\n          workbox.addEventListener('controlling', (event) => {\n            window.location.reload()\n          })\n\n          workbox.messageSW({ type: 'SKIP_WAITING' })\n        },\n      })\n    })\n  }\n}\n```\n\nThen just implement your own `showUpdateNotifier` function. Check out [workbox-window](https://developers.google.com/web/tools/workbox/modules/workbox-window) for the details of the `workbox` object.\n\n### generateSWOptions\n\n- Type: `object`\n\nOptions for the [generateSW](https://developers.google.com/web/tools/workbox/modules/workbox-build#generatesw_mode) API from workbox-build.\n\n## License\n\nMIT.\n","readmeFilename":"README.md"}