如何从远程来源重新安装服务工作者.js文件

Question

我在Shopify平台中有一个应用程序，并且我正在使用脚本标签将功能性添加到Merchant的店面，在脚本标签文件中，我正在尝试注册服务工作者，但我得到了流浪的错误：

未能（在承诺中）domexception：未能注册服务工作人员：提供的Scripturl的起源（'https：//fea3-5-219-49-49-49-37.ngrok.io'）与当前的原点不匹配（ 'https://pouyas-store.myshopify.com'）

这是我在嵌入式javascript文件中的代码：

const baseURL = "https://fea3-5-219-49-37.ngrok.io";
(function (){
      navigator.serviceWorker.register(baseURL+"/static/shopify_app/ServiceWorker.js")
          .then((reg) => {
            console.log("reg",reg);
              if (Notification.permission === "granted") {
                  getSubscription(reg);
              } else if (Notification.permission === "blocked") {
              } else {

                  $("#GiveAccess").show();
                  $("#PromptForAccessBtn").click(() => requestNotificationAccess(reg));
              }
          });
})()

Answer 1

是的，Shopify不要通过第三方访问来访问本地根文件。

因此，您验证脚本无法访问根文件夹中的SW.JS文件。

这项解决方法可以在Shopify中使用App-Proxy。您需要将SW.JS文件放在任何域的在线服务器中。

并将该服务器添加到代理-URL中。

像在前缀中一样，您可以选择应用程序，在子路上您可以给任何名称。

现在，在navigate.register.serviceworker（）参数中提供相对路径，例如/apps/your-subpath/sw.js。

现在，每当此功能工作时，它都会访问此URL（您的shopify-domain/apps/source）。

由于代理-URL上方的代理 - 将其重定向到代理-URL。

请记住，在代理URL中不要仅提供服务器的入口点。

就像导航函数访问/apps/source/sw.js时一样。

它用代理-URL剥离sopifu domain/apps/sub-path
而且新的URL变成了代理-URL/SW.JS，

但响应域仍然是您的购物域。很好。

因为注册服务工作者导航。注册函数比较
请求和响应域。

因此，如果您的文件来自另一个域，则不会注册服务工作者。

希望它有帮助。

Answer 2

您的顶级服务工作者脚本URL需要与调用navigator.serviceworker.register（）的客户页面相同的来源。此脚本URL用于确定服务工作者注册的默认范围。因为相同 - 原始服务工作者脚本的位置 scope 服务工作者注册的内容，通常您需要从顶级路径上为您的服务工作者提供服务，例如/local-sw.js。

在服务工作脚本的内部，您可以使用importScripts（）在任何任意交叉脚本脚本URL中包含逻辑，只要使用CORS提供脚本即可。

因此允许以下内容：

// Inside your web app's client JavaScript:

navigator.serviceWorker.register('/local-sw.js');

// Inside /local-sw.js:

importScripts('https://cross-origin.com/sw-logic.sw');

// Inside https://cross-origin.com/sw-logic.sw:

// Your service worker logic goes here.