如何将 Razor 中的参数传递到 PWA 的 service worker 文件中？答案

【问题标题】：How can I pass a parameter from Razor into the service worker file for a PWA?如何将 Razor 中的参数传递到 PWA 的 service worker 文件中？
【发布时间】：2019-02-05 22:53:43
【问题描述】：

我正在创建一个 PWA（渐进式 Web 应用），并在我的视图中注册我的 Service Worker：

    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');
        });
    }

我在 Service Worker 中做的第一件事就是导入 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

然后在我的 Service Worker 中，使用该参数并使用它来获取我的资源？ 像这样：

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

【问题讨论】：

标签： javascript c# razor progressive-web-apps

【解决方案1】：

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

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

【讨论】：