@pwabuilder/pwaupdate
Advanced tools
`pwa-update` is a [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that brings an awesome "update" experience to your Progressive Web App! It will automatically register your service w
Readme
pwa-update is a web component from the PWABuilder team that brings an awesome "update" experience to your Progressive Web App! It will automatically register your service worker and notify the user of when a new update to your PWA is available. Finally, this component will also let the user of your PWA know when your PWA is ready to be used offline, completing the experience.
Live demo: https://pwa-update.glitch.me
Built with lit-element
There are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using npm then we recommend using the npm package.
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate"
></script>
<pwa-update></pwa-update>
npm install @pwabuilder/pwaupdateimport '@pwabuilder/pwaupdate'Then you can use the element <pwa-update></pwa-update> anywhere in your template, JSX, html etc. An example of using this component can be found here: https://pwa-update.glitch.me
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
updatemessage | updatemessage | Message that will be show to the user when there is an update | string | An update for this app is available |
updateevent | updateevent | name of event sent to service worker to start update | string | false |
readyToAsk | readyToAsk | Can be used to show the update prompt, alternative to updateevent | boolean | false |
swpath | swpath | The path to the service worker to be registered | string | pwabuilder-sw.js |
showStorageEstimate | showStorageEstimate | Show the user how much storage has been used by the PWA | boolean | false |
offlineToastDuration | offlineToastDuration | How long the offline toast is displayed | number (milliseconds) | 1300 |
We recommend using our CSS variables to easily tweak the style of this component to fit your project. Here are our current supported CSS variables.
| name | Description |
|---|---|
--toast-background | Changes the background color of the toast |
--button-background | Changes the background color of the update button |
If you need to style this component more comprehensively, you can use Shadow Parts to style both the update toast and the "ready to use offline" toast. To target these two elements you can use pwa-update::part(updateToast) and pwa-update::part(offlineToast) respectively. For example, to make the background of the install button grey, I would need this CSS:
pwa-update::part(updateToast) {
backround: grey;
}
// Types to be found in DefinitelyTyped sometime soon.
import "@pwabuilder/pwaupdate";
class YourClass extends RenderLib {
...
get updateComponent(): PWAUpdate {
return this.shadowRoot?.querySelector("pwa-update");
}
...
}
<template id="example">
<style></style>
...
<pwa-update></pwa-update>
</template>
customElements.define(
"example",
class Example extends HTMLElement {
constructor() {
super();
let template = document.getElementById("example");
let templateContent = template.content;
this.shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
templateContent.cloneNode(true)
);
this.updateComponent = document
.getElementsByTagName("el-example")[0]
.shadowRoot.querySelector("pwa-update");
}
}
);
// Using module import
import { LitElement, html, property, query } from "lit-element";
import "@pwabuilder/pwaupdate";
class Example extends LitElement {
@query("installId") componentRef: HTMLElement;
render() {
return html`
<body>
<pwa-update id="installId"></pwa-update>
</body>
`;
}
interactionWithComponent() {
// See the methods section
this.componentRef.getInstalledStatus();
}
}
const template = html`
<pwa-update ref('updateComponent')></pwa-update>
`
@customElement({ ... })
class Example extends FASTElement {
@observable updateComponent: PWAUpdate | undefined;
@volatile
get updateComponent() {
return this.shadowRoot.querySelector("pwa-update");
}
}
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate"
></script>
</head>
<body>
<pwa-update id="updateComponent"></pwa-update>
<script async defer>
const ref = document.getElementById("updateComponent);
</script>
</body>
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate"
></script>
</head>
<body>
<script async defer>
var updateComponent = document.createElement("pwa-update");
document.body.appendChild(updateComponent);
</script>
</body>
FAQs
`pwa-update` is a [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that brings an awesome "update" experience to your Progressive Web App! It will automatically register your service w
The npm package @pwabuilder/pwaupdate receives a total of 62 weekly downloads. As such, @pwabuilder/pwaupdate popularity was classified as not popular.
We found that @pwabuilder/pwaupdate demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.