如何从服务工作者调用缓存的ManifestEntry Javascript函数?

时间:2018-04-02 11:01:58

标签: javascript node.js vue.js service-worker workbox

我的构建生成一个预先缓存的清单,如下所示:

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"
  }
];

在我的服务人员中,我将其放在顶部:

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

这就在底部:

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

这有效,但现在我想从服务工作者调用/js/vendor.ea92339a.js内的方法,我该如何实现?

额外信息: 我使用的构建过程是vue-cli 3,webpack 4 branch (still in beta)

1 个答案:

答案 0 :(得分:1)

你不能。

Service Worker有自己的范围,它与通常的JS执行范围(global / window object / whatever)不同。您不能从其他JS文件中调用SW.js中定义的函数,反之亦然。

相反,你可以做的是@orangespark在他/她的评论中提出的建议:

您可以通过postMessage API从SW.js向窗口发送消息,或者反过来。您可以在vendor.js和SW.js中附加事件侦听器,然后以您想要的任何方式发送事件侦听器将处理的消息。