usePWAManager

The usePWAManager hook is a utility hook exported from @remix-pwa/client that allows you to manage and access your PWA application main states like service worker registration and installation. The hook takes no argument and returns an object.

It has a type definition as follows:

type UpdateAvailable = {
  isUpdateAvailable: boolean;
  newWorker: ServiceWorker | null;
};

usePWAManager: () => {
  updateAvailable: boolean;
  swUpdate: UpdateAvailable;
  promptInstall: () => void;
  swRegistration: ServiceWorkerRegistration | null;
  userInstallChoice: "accepted" | "dismissed" | null;
}

​

updateAvailable

This is a boolean value that indicates if there is an update available for the PWA application. It is true if there is an update available to the service worker and false otherwise.

A good use case for this would be to implement a "prompt" to the user to reload the page when an update is available.

​

swUpdate

This is an object that contains information about the update available, think of it as a more verbose updateAvailable property. It has the following properties:

• isUpdateAvailable: A boolean value that indicates if there is an update available for the PWA application. This carries the same value as updateAvailable.
• newWorker: A ServiceWorker object that represents the new service worker that is available for the PWA application (hasn't been activated yet). It is null if there is no update available.

​

promptInstall

This is an asynchronous method that allows you to customise the installation prompt for your PWA application. It is a function that you must call via a user interaction (click, hover, etc.) to trigger the installation prompt.

It takes in an optional callback function that gets invoked if the user accepts the installation prompt

const { promptInstall } = usePWAManager()

<button onClick={promptInstall}>Install without callback</button>
<button onClick={async () => promptInstall(doSmthg)}>Install with callback</button>

​

swRegistration

This is a ServiceWorkerRegistration object that represents the service worker registration for the PWA application. It is null if there is no service worker registered. Can be used to access the service worker registration object which opens up a lot of possibilities to build upon like sync, periodic sync and push notifications.

​

userInstallChoice

This is a string value that represents the user's choice when prompted to install the PWA application. It can be one of the following values:

• accepted: The user accepted the installation prompt.
• dismissed: The user dismissed the installation prompt.
• null: The user has not been prompted to install the PWA application.

This can be used to track the user's choice and provide feedback to the user.

This hook is complete and also a work-in-progress, I am exploring ways to expand the capabilities of the hook to make it more useful and powerful (your PWA swiss knife). If you have any suggestions or ideas, feel free to discuss them in Remix PWA Discussions.