easy-service-worker
TypeScript icon, indicating that this package has built-in type declarations

1.1.10 • Public • Published

easy-service-worker 🌟

Image John Avatar

The easy-service-worker library provides a straightforward and robust interface for integrating and managing Service Workers in your web applications. It simplifies the process of registering, sending messages to, and handling responses from Service Workers, making it easier to leverage their powerful capabilities for background tasks, push notifications, and offline functionality.

Features


  • Simplified Service Worker Registration: Automate the registration process with customizable options.
  • Message Handling: Send and receive messages to and from the Service Worker with ease.
  • Cancelable Promises: Utilize cancelable promises for better control over asynchronous operations.
  • Reboot and Force Update Options: Easily reboot the worker or force update it based on your application's needs.
  • Await Until Ready: Ensure messages are only sent once the Service Worker is fully ready.
  • Error Handling: Implement custom logic when the worker encounters an error.
  • State Change Callbacks: React to changes in the Service Worker's lifecycle with custom callbacks.

Installation


To install the EasyServiceWorkerClient, run the following command in your project directory:

bashCopy code

npm install easy-service-worker # or yarn add easy-service-worker

Usage

Below is a quick start guide to integrating the easy-service-worker into your application.

Registering a Service Worker

First, ensure your Service Worker file is correctly set up and accessible. Then, you can register the worker with the following code:

javascriptCopy code

import { connectClient } from 'easy-service-worker';

const serviceWorkerClient = connectClient('/path/to/your/service-worker.js');

Sending Messages to the Service Worker

After setting up your Service Worker, you can send messages and handle responses as follows:

serviceWorkerClient.send({ your: 'data' })
  .then(response => console.log('Worker response:', response))
  .catch(error => console.error('Worker error:', error));

serviceWorkerClient.sendToMethod('specific_service_actions', { your: 'data' })
  .then(response => console.log('Worker response:', response))
  .catch(error => console.error('Worker error:', error));

Handling Worker Updates and State Changes

Utilize the provided callbacks in the configuration to handle various worker states and updates:

const workerConfig = {
  // ...
  onActive: (worker) => console.log('Worker active:', worker),
  onWaiting: (worker) => console.log('Worker waiting:', worker),
  // Other callbacks as needed
};

const workerClient = connectClient('/path/to/your/service-worker.js', workerConfig);

Inside the Service Worker

import connectService from 'easy-service-worker/service';

const easyWorker = connectService((message) => {
  console.log('Service message');

  message.resolve();
});

easyWorker.onMessage('specific_service_actions', (message) => {
   console.log('Service message');

   console.log(message.payload) // 'hello from inside the service worker'

    message.resolve(); 
})

Conclusion

EasyServiceWorker simplifies the integration of Service Workers into your web applications, offering a streamlined approach to message handling and script importing. With its intuitive API and powerful features, EasyServiceWorker makes it easy to leverage the full potential of Service Workers in your projects.

Please note that this is the first version of EasyServiceWorker, and the documentation will be updated soon with more detailed information and usage examples. Stay tuned for updates!

Package Sidebar

Install

npm i easy-service-worker

Weekly Downloads

0

Version

1.1.10

License

ISC

Unpacked Size

78.8 kB

Total Files

12

Last publish

Collaborators

  • johnny-qc