# @power-elements/service-worker > Custom Element for declaratively adding a service worker with optional auto-install. Latest version **6.0.0** (published 2023-01-01) · ISC license · 0 weekly downloads ## Install ```sh npm install @power-elements/service-worker pnpm add @power-elements/service-worker yarn add @power-elements/service-worker bun add @power-elements/service-worker ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 6.0.0 | | Published | 2023-01-01 | | First published | 2018-03-14 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 25.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | bennyp | ## Links - npm: https://www.npmjs.com/package/@power-elements/service-worker - npm.io page: https://npm.io/package/@power-elements/service-worker ## Recent versions - 6.0.0 (latest) — 2023-01-01 - 5.0.0 — 2020-07-20 - 4.0.4 — 2020-02-15 - 4.0.3 — 2020-02-15 - 4.0.2 — 2020-02-15 - 4.0.1 — 2020-02-15 - 4.0.0 — 2020-02-06 - 3.2.0 — 2019-02-27 - 3.1.5 — 2019-02-27 - 3.1.4 — 2019-02-27 - 3.1.3 — 2019-02-27 - 3.1.2 — 2019-02-24 - 3.1.0 — 2018-10-26 - 3.0.0 — 2018-06-10 - 2.0.0 — 2018-05-17 - … 4 more at https://npm.io/package/@power-elements/service-worker/versions ## README [![Published on npm](https://img.shields.io/npm/v/@power-elements/service-worker)](https://npm.im/@power-elements/service-worker) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/bennypowers/service-worker) [![Test Status](https://github.com/bennypowers/service-worker/workflows/test/badge.svg)](https://github.com/bennypowers/service-worker/actions?query=workflow%3Atest) [![Test Coverage](https://api.codeclimate.com/v1/badges/512ba168f108821c0be1/test_coverage)](https://codeclimate.com/github/bennypowers/service-worker/test_coverage) [![Maintainability](https://api.codeclimate.com/v1/badges/512ba168f108821c0be1/maintainability)](https://codeclimate.com/github/bennypowers/service-worker/maintainability) [![Contact me on Codementor](https://cdn.codementor.io/badges/contact_me_github.svg)](https://www.codementor.io/bennyp?utm_source=github&utm_medium=button&utm_term=bennyp&utm_campaign=github) 💕 Proudly built using [open-wc](https://open-wc.org) and [Modern Web](https://github.com/modernweb-dev/web) Tools. # service-worker Custom Element for declaratively adding a service worker with optional auto-update. ## Example ```html ``` ## Properties | Property | Attribute | Type | Default | Description | |-----------------|-----------------|-------------------------|----------------------|--------------------------------------------------| | `autoReload` | `auto-reload` | `boolean` | false | If true, when updates are found, the page will automatically
reload, so long as the user has not yet interacted with it. | | `channelName` | `channel-name` | `string \| null` | "service-worker" | Channel name for communicating with the service worker. | | `error` | `error` | `Error` | | Error state of the service-worker registration | | `installed` | `installed` | `boolean` | false | True when the service worker is installed. | | `path` | `path` | `string` | "/service-worker.js" | Path to the service worker script. | | `scope` | `scope` | `string` | "/" | Scope for the service worker. | | `serviceWorker` | | `ServiceWorker \| null` | null | A reference to the service worker instance. | | `updateAction` | `update-action` | `string \| null` | "skipWaiting" | String passed to serviceWorker which triggers self.skipWaiting().
String will be passed in message.action. | ## Methods | Method | Type | Description | |-------------------------|--------------------------------------------------|--------------------------------------------------| | `#onError` | `(error: Error): Error` | Sets the error property | | `#onRegistration` | `(reg: ServiceWorkerRegistration): ServiceWorkerRegistration` | | | `#refresh` | `(): void` | | | `#track` | `(serviceWorker: ServiceWorker): ServiceWorker` | Listen for changes on a new worker, notify when installed. 🍞 | | `#update` | `(serviceWorker: ServiceWorker): ServiceWorker` | When an update is found, if user has not yet interacted with the page,
reload it for them, otherwise, prompt them to reload 🍩. | | `#updateChannelName` | `(): void` | | | `#updateConfig` | `(): void` | | | `registerServiceWorker` | `(options?: Partial> \| undefined): Promise` | Registers a service worker, and prompts to update as needed | ## Events | Event | Type | Description | |-----------|-----------------------------|--------------------------------------------------| | `change` | `ServiceWorkerChangeEvent` | When the service worker changes | | `error` | `ServiceWorkerErrorEvent` | When an error occurs | | `message` | `ServiceWorkerMessageEvent` | When a message is received on the broadcast channel | ## Updating the Service Worker. When an updated service worker is detected, `` will post a message to the service worker with the contents `{ action: this.updateAction }`. You can customize the name of the passed action by setting the `updateAction` property or the `update-action` attribute (they will sync with each other). `updateAction` is by `'skipWaiting'` by default. You can then handle that message in your service worker by running `self.skipWaiting()`: ```js self.addEventListener('message', event => { switch (event.data.action) { case 'skipWaiting': return self.skipWaiting(); } }); ``` If `auto-reload` is set, `` will check if the user has not yet interacted with the app, and if she hasn't, refresh the page by calling `location.reload()` when the new service-worker is installed. Listen for the `service-worker-changed` event to display a message to the user when the service worker updates. ```js const dialogTemplate = document.createElement('template'); dialogTemplate.innerHTML = `

New Version Available!

Reload the Page?

 `; document.querySelector('service-worker') .addEventListener('service-worker-changed', event => { const dialog = dialogTemplate.content.cloneNode(true); dialog.addEventListener('close', function({ returnValue }) { if (returnValue === 'confirm') location.reload(); }); document.body.append(dialog); dialog.showModal(); }) ``` ### sw-precache If you are using [sw-precache](https://github.com/GoogleChromeLabs/sw-precache#skipwaiting-boolean) to generate your SW, it will automatically skip waiting on reload, unless you specify otherwise in `sw-precache-config.js` ### Workbox [Workbox](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-sw.WorkboxSW) offers a similar feature, although you must opt in when constructing the workbox instance. #### Directly in service-worker.js ```js // service-worker.js const workboxSW = new WorkboxSW({ skipWaiting: true, }); ``` #### Workbox CLI ```js // workbox-config.js module.exports = { // ... skipWaiting: true, }; ``` #### Rollup ```js // rollup.config.js import { generateSW } from 'rollup-plugin-workbox'; export default { // ... // use workbox-config.js as above plugins: [generateSW(require('./workbox-config.js'))] } ``` #### Webpack ```js // webpack.config.js const workboxPlugin = require('workbox-webpack-plugin'); plugins: [ new workboxPlugin({ skipWaiting: true, }), ]; ``` #### Gulp ```js // gulpfile.js const workbox = require('workbox-build'); gulp.task('generate-service-worker', () => { workbox.generateSW({ skipWaiting: true, }); }); ``` --- _Source: https://npm.io/package/@power-elements/service-worker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._