Example Wiki

Documentation

Class: serviceWorker

Description: This module provides functions for registering and managing a service worker in a React application, enabling offline capabilities and faster loading times on subsequent visits.

Exports:

• register(config: object): Registers a service worker if the application is running in production mode and the browser supports service workers.
• unregister(): Unregisters the service worker.
• registerValidSW(swUrl: string, config: object): Registers a valid service worker at the specified URL, handling update events and executing optional callbacks.
• checkValidServiceWorker(swUrl: string, config: object): Checks if a service worker exists at the specified URL and reloads the page if not.

Methods

Method: register

Description: Registers a service worker if the application is running in production mode and the browser supports service workers.

Parameters:

• config (object): An object containing optional configuration for service worker updates and success callbacks.
  • onUpdate: A function to execute when a new service worker is installed but not yet active.
  • onSuccess: A function to execute when the service worker has successfully installed and is active.

Returns:

• void

Throws:

• None

Example:

serviceWorker.register({
  onUpdate: (registration) => {
    console.log("New content available. Will be used on next refresh.");
  },
  onSuccess: (registration) => {
    console.log("Service worker successfully installed and ready for offline use.");
  }
});

Method: unregister

Description: Unregisters the service worker if it exists.

Parameters:

• None

Returns:

• void

Throws:

• None

Example:

serviceWorker.unregister();

Method: registerValidSW

Description: Registers a valid service worker at the specified URL, handling update events and executing optional callbacks.

Parameters:

• swUrl (string): The URL of the service worker file.
• config (object): An object containing optional configuration for service worker updates and success callbacks.
  • onUpdate: A function to execute when a new service worker is installed but not yet active.
  • onSuccess: A function to execute when the service worker has successfully installed and is active.

Returns:

• void

Throws:

• None

Example:

serviceWorker.registerValidSW("/service-worker.js", {
  onUpdate: (registration) => {
    console.log("New content available. Will be used on next refresh.");
  },
  onSuccess: (registration) => {
    console.log("Service worker successfully installed and ready for offline use.");
  }
});

Method: checkValidServiceWorker

Description: Checks if a service worker exists at the specified URL and reloads the page if not.

Parameters:

• swUrl (string): The URL of the service worker file.
• config (object): An object containing optional configuration for service worker updates and success callbacks.
  • onUpdate: A function to execute when a new service worker is installed but not yet active.
  • onSuccess: A function to execute when the service worker has successfully installed and is active.

Returns:

• void

Throws:

• None

Example:

serviceWorker.checkValidServiceWorker("/service-worker.js", {
  onUpdate: (registration) => {
    console.log("New content available. Will be used on next refresh.");
  },
  onSuccess: (registration) => {
    console.log("Service worker successfully installed and ready for offline use.");
  }
});

Important Considerations:

• The service worker functionality in this module is only active in production mode.
• The service worker will only serve updated content after all client tabs on the page have been closed.
• If the application is served from a CDN, the PUBLIC_URL environment variable must match the origin of the application.
• If there is no internet connection, the application will run in offline mode.

Potential Pitfalls:

• If the service worker file cannot be found, the page will reload.
• If the service worker file does not have the correct content type (javascript), the page will reload.

Further Information:

For more details on the benefits and implementation of this service worker model, refer to https://bit.ly/CRA-PWA.