npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

easy-service-worker

v1.1.10

Published

Communicate with a service worker in a much easier way

Downloads

70

Readme

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!