如何將參數從Razor傳遞到PWA的服務工作者文件中？

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