Question

我正在创建PWA（渐进式Web应用程序），并在我的视图中注册服务工作者：

    if('serviceWorker' in navigator) {
        navigator.serviceWorker.register('@Url.Content("~/sw.js")', { scope: '@Url.Content("~/")' })
          .then(function(registration) {
            console.log('G081 Service Worker Registered');
          });
        navigator.serviceWorker.ready.then(function(registration) {
            console.log('G081 Service Worker Ready');
        });
    }

我在服务工作者中要做的第一件事就是导入idb-keyval库，如下所示：

(function () {
    "use strict";
    self.importScripts("/3971/lib/idb-keyval/idb-keyval-iife.min.js");
}());

一切都很好。它已注册并正在运行。但是，您会注意到在我的self.importScripts函数中（在我的服务工作者中），我正在硬编码路径（"3971/"）的一部分。我这样做是因为我们在工作中使用了分支策略。每个分支在我们的测试服务器上都有自己的站点（在我的情况下是3971）。结果，我需要能够告诉我的服务人员在子文件夹3971中查找idb-keyval javascript文件。如果我不告诉您，它会在父文件夹中查找，但找不到。当我们投入生产时，这将再次改变。然后，该应用程序将位于站点根目录，并且需要查找不带“ 3971”子文件夹的javascript文件。

我将其称为我的范围文件夹。本质上，我需要一种方法来告诉我的服务工作者哪个作用域文件夹用于资源。我在视图页面中正在执行类似的操作，如您在上面所看到的，在该页面中，我使用Razor序列化我的作用域文件夹以注册我的服务工作者：

navigator.serviceWorker.register('@Url.Content("~/sw.js")', { scope: '@Url.Content("~/")' })

渲染至：

navigator.serviceWorker.register('/3971/sw.js', { scope: '/3971/' }) // MY DYNAMIC BRANCH
// and ...
navigator.serviceWorker.register('/sw.js', { scope: '/' }) // PRODUCTION

有没有一种方法可以将参数传递给我的服务工作者，以便它知道它正在使用哪个作用域文件夹？例如，我可以执行以下操作：

navigator.serviceWorker.register('/3971/sw.js?scope=%2F3971%2F', { scope: '/3971/' }) // MY DYNAMIC BRANCH

然后在我的服务工作者中使用该参数并使用它来获取我的资源？这样的事情：

(function () {
    "use strict";
    self.importScripts(param['scope'] + "lib/idb-keyval/idb-keyval-iife.min.js");
}());

Answer 1

您可以获取服务工作者路径的查询参数。

const scope = (new URLSearchParams(location.search)).get('scope');

如何将参数从Razor传递到PWA的服务工作者文件中？

1 个答案: