How do I use other js files in a service worker?

Question

How do I use other js files in a service worker? I don't know the right way to include my local js files into my service worker.

message handler in index.html

messaging.onMessage(function (payload){
            console.log("new message: " +payload);
            //Push.create(payload.data.title);
             console.log(payload.data.title);
             console.log(payload.data.message);

              var notifTitle = payload.data.title;
              var notifMessage = payload.data.message;
              console.log(notifTitle);
              console.log(notifMessage);


                Push.create(notifTitle, {
                    body: notifMessage,
                });
             

          });

background message handler in firebase-messaging-sw.js

messaging.setBackgroundMessageHandler(function(payload){
    console.log(payload);

                //Push.create(notifTitle, {
                //    body: notifMessage,
                //});
                // I would want to also use this here


     
})

user_157247 · Answer

Two answers for you:

These days, in modern environments, I think you can make your service worker a module by including the options object in your call to register with type: "module", which means you can useimport.
```
import { something } from "./somewhere.js";
```
The global scope of a service worker is a ServiceWorkerGlobalScope which implements WorkerGlobalScope, which has an importScripts function you can use to load scripts into the worker. Here's the example from that last link:
```
self.importScripts('foo.js');
self.importScripts('foo.js', 'bar.js', ...);
```

user_7080548 · Answer

In order to load a script into the SW scope, you need to use importScripts():

importScripts('https://yourdomain.com/push.min.js');

How do I use other js files in a service worker?

2 Answers