Communication With Service Worker With Code Examples

  • Updated
  • Posted in Programming
  • 4 mins read


Communication With Service Worker With Code Examples

Hello guys, on this put up we’ll discover the way to discover the answer to Communication With Service Worker in programming.

//one-way communication


// app.js - Somewhere in your net app
navigator.serviceWorker.controller.postMessage({
  sort: 'MESSAGE_IDENTIFIER',
});
// service-worker.js
// On the Service Worker facet now we have to take heed to the message occasion
self.addEventListener('message', (occasion) => {
  if (occasion.knowledge && occasion.knowledge.sort === 'MESSAGE_IDENTIFIER') {
    // do one thing
  }
});

//two-way communication.


//Using the Broadcast API

// app.js
// Set up channel
const broadcast = new BroadcastChannel('count-channel');

// Listen to the response
broadcast.onmessage = (occasion) => {
  console.log(occasion.knowledge.payload);
};

// Send first request
broadcast.postMessage({
  sort: 'INCREASE_COUNT',
});

// service-worker.js
// Set up channel with identical identify as in app.js
const broadcast = new BroadcastChannel('count-channel');
broadcast.onmessage = (occasion) => {
  if (occasion.knowledge && occasion.knowledge.sort === 'INCREASE_COUNT') {
    broadcast.postMessage({ payload: ++depend });
  }
};

//Using the Client API

// app.js
// Listen to the response
navigator.serviceWorker.onmessage = (occasion) => {
  if (occasion.knowledge && occasion.knowledge.sort === 'REPLY_COUNT_CLIENTS') {
    setCount(occasion.knowledge.depend);
  }
};

// Send first request
navigator.serviceWorker.controller.postMessage({
  sort: 'INCREASE_COUNT_CLIENTS',
});

// service-worker.js
// Listen to the request
self.addEventListener('message', (occasion) => {
  if (occasion.knowledge && occasion.knowledge.sort === 'INCREASE_COUNT') {
    // Select who we wish to reply to
    self.shoppers.matchAll({
      includeUncontrolled: true,
      sort: 'window',
    }).then((shoppers) => {
      if (shoppers && shoppers.size) {
        // Send a response - the shoppers
        // array is ordered by final targeted
        shoppers[0].postMessage({
          sort: 'REPLY_COUNT',
          depend: ++depend,
        });
      }
    });
  }
});

We have defined the way to repair the Communication With Service Worker drawback by utilizing all kinds of examples taken from the actual world.

How do I ship a consumer message to a service employee?

postMessage() The postMessage() methodology of the Client interface permits a service employee to ship a message to a consumer (a Window , Worker , or SharedWorker ). The message is obtained within the ” message ” occasion on navigator. serviceWorker .12-Sept-2022

What is the position of service employee?

Performs such cleansing capabilities as dusting, vacuuming, washing, waxing, and many others.; restock bathroom provides, and many others., wash kitchen services and clear and clear tables. Shovels snow, rakes leaves, maintains recreation areas, and many others. Collects and disposes of rubbish. Picks up and delivers provides or mail.

Does service employee have entry to window?

Web staff and repair staff # Both run in a secondary thread, permitting JavaScript code to execute with out blocking the principle thread and the person interface. They haven’t got entry to the Window and Document objects, to allow them to’t work together with the DOM immediately, they usually have restricted entry to browser APIs.08-Dec-2020

What are the occasions could be listened to in a service employee?

You can hear for the set up occasion; an ordinary motion is to organize your service employee for utilization when this fires, for instance by making a cache utilizing the in-built storage API, and inserting property inside it that you’ll be wanting for working your app offline. There can be an activate occasion.15-Sept-2022

How do I activate a service employee?

How to activate a service employee robotically

  • Refetch the service employee.
  • Install it as a brand new model, that means your set up occasion runs and your caches replace.
  • Skip the ready part so the brand new service employee prompts.
  • Navigate the web page.

How do you utilize a service employee in react?

In React, service staff are robotically added if you create your utility via the create-react-app command, via SWPrecacheWebpackPlugin . Service staff make sure that the community will not be a bottleneck to serve new requests.01-Oct-2020

What are you able to do with service staff?

Service staff are a elementary a part of a PWA. They allow quick loading (whatever the community), offline entry, push notifications, and different capabilities. Users count on apps to start out on gradual or flaky community connections, and even when offline.

What are some examples of service staff?

Examples of non-public service positions embody: Medical assistants and different healthcare help positions; hair- dressers; ushers; and transportation at- tendants. Examples of cleansing service positions embody: Cleaners; janitors; and porters.

What are service staff React?

A short information to service staff in React. React is a Javascript library for constructing person interfaces. It is element based mostly and permits the developer to create person interfaces with far more simplicity than with common vanilla Javascript.

How lengthy do service staff final?

By default service staff expires after 24 hours.06-Dec-2016

Leave a Reply