Access localStorage from service worker

29,654

Solution 1

You cannot access localStorage (and also sessionStorage) from a webworker process, they result will be undefined, this is for security reasons.

You need to use postMessage() back to the Worker's originating code, and have that code store the data in localStorage.

You should use localStorage.setItem() and localStorage.getItem() to save and get data from local storage.

More info:

Worker.postMessage()

Window.localStorage

Pseudo code below, hoping it gets you started:

 // include your worker
 var myWorker = new Worker('YourWorker.js'),
   data,
   changeData = function() {
     // save data to local storage
     localStorage.setItem('data', (new Date).getTime().toString());
     // get data from local storage
     data = localStorage.getItem('data');
     sendToWorker();
   },
   sendToWorker = function() {
     // send data to your worker
     myWorker.postMessage({
       data: data
     });
   };
 setInterval(changeData, 1000)

Solution 2

I've been using this package called localforage that provides a localStorage-like interface that wraps around IndexedDB. https://github.com/localForage/localForage

You can then import it by placing it in your public directory, so it is served by your webserver, and then calling: self.importScripts('localforage.js'); within your service worker.

Solution 3

Broadcast Channel API is easier

There are several ways to communicate between the client and the controlling service worker, but localStorage is not one of them. IndexedDB is, but this might be an overkill for a PWA that by all means should remain slim.

Of all means, the Broadcast Channel API results the easiest. It is by far much easier to implement than above-mentioned postMessage() with the MessageChannel API.

Here is how broadcasting works

Define a new broadcasting channel in both the service worker and the client.

const channel4Broadcast = new BroadcastChannel('channel4');

To send a broadcast message in either the worker or the client:

channel4Broadcast.postMessage({key: value});

To receive a broadcast message in either the worker or the client:

channel4Broadcast.onmessage = (event) => {
    value = event.data.key;
}

Solution 4

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers says

Note: localStorage works in a similar way to service worker cache, but it is synchronous, so not allowed in service workers.

Note: IndexedDB can be used inside a service worker for data storage if you require it.

Also there is a bit of discussion here: How do I access the local storage using service workers in angular?

Share:
29,654
Faiz
Author by

Faiz

Updated on July 09, 2022

Comments

  • Faiz
    Faiz over 1 year

    I want to periodically call an API from my service worker to send data stored in the localStorage. This data will be produced and saved in localStorage when a user browses my website. Consider it something like saving stats in localStorage and sending it periodically through the service worker. How should I do this? I understand that I can't access localStorage from the service worker and will have to use the postMessage API. Any help would be highly appreciated.