How can I call cached ManifestEntry Javascript functions from the service worker?

Question

My build generates a precache manifest that looks like this:

self.__precacheManifest = [
  {
    "revision": "ea92339a72de73748c35",
    "url": "/js/vendor.ea92339a.js"
  },
  {
    "revision": "ce28c628eea246b643c9",
    "url": "/js/manifest.ce28c628.js"
  },
  {
    "revision": "f6fb0d3455c4d454bfc9",
    "url": "/js/app.f6fb0d34.js"
  },
  {
    "revision": "dc4521ffd102851e081b02ac893f4981",
    "url": "/index.html"
  },
  {
    "revision": "f6fb0d3455c4d454bfc9",
    "url": "/css/app.69e433b0.css"
  }
];

In my service worker I have this at the top:

importScripts("/precache-manifest.14324d3ff39abcb589e6152671cf34d2.js", "https://storage.googleapis.com/workbox-cdn/releases/3.0.1/workbox-sw.js");

And this at the bottom:

self.__precacheManifest = [].concat(self.__precacheManifest || []) workbox.precaching.precacheAndRoute(self.__precacheManifest, {})

This works, but now I want to call a method that is inside /js/vendor.ea92339a.js from the service worker, how can I accomplish this?

extra info: The build process that I use is vue-cli 3, webpack 4 branch (still in beta)

Answer 1

You cannot.

Service Worker has its own scope which is different from the usual JS execution scope (global / window object / whatever). You cannot call functions defined in SW.js from other JS files and vice versa.

What you can do, instead, is what @orangespark suggests in his/her comment:

You can send messages via the postMessage API from the SW.js to the window or the other way around. You can attach event listeners both in vendor.js and SW.js and then send messages which your event listeners will handle in any way you want.