如何在SFCC中实现serviceworker (Demandware)

Question

我想知道这里是否有人有在SFCC/Demandware中实现服务工作者的经验。

我用sw-precache-webpack-plugin和Webpack一起生成了一个服务工作者

问题是:服务工作者应该从域的根目录中可用。所以site.com/sw.js。JS文件通常会出现在static/文件夹中。谁知道如何在Demandware/SFCC中从项目的根目录中提供这个JS文件？

Answer 1

不幸的是，在比服务工作者文件本身更高的路径中的作用域中注册服务工作者不起作用(如MDN中所述)：

• 服务工作者将只捕获来自该服务工作者作用域下的客户端的请求。
• 服务工作者的最大作用域是该工作者的位置。

(来源：https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers)

解决方案

以下是在Demandware (销售团队)中提供"/sw.js“服务的工作方法的建议：

• 创建一个新的控制器(或管道)，例如"ServiceWorker-GetFile"；响应应该是一个文件内容，可以从任何您希望的源读取：(dw.content.ContentMgr.getContent());
• Library
• 内容资产it);

(dw.content.ContentMgr.getContent() )或者直接读取带有dw.io.File / dw.io.FileReader);

• even站点首选项的文件(尽管我不推荐使用dw.content.ContentMgr.getContent

​

• 在业务经理/商务工具/搜索引擎优化/别名中创建一个条目，将"/sw.js“路由到”ServiceWorker GetFile“，即使用以下内容：

{
  ...
  "your-host" : [
    ...,
    {
      "if-site-path": "/sw.js",
      "pipeline": "ServiceWorker-GetFile"
    }
  ]
}

这看起来似乎是一个不必要的开销，但这是我可以找到的唯一方法，用于在URI中提供根路径的文件。

为其他根文件提供服务

通过扩展控制器(例如，将其重命名为"Content-GetFile“，并添加GET/POST参数，如"name”和/或"source")，这也可以方便地用于其他文件("/manifest.json"，"/.well-known/assetlinks.json“等)。在Business Manager / ... / Aliases的下一个示例中，让Content-GetFile接受两个参数：" name“(可以是内容库中的文件名或内容资产ID)和"source”(可以是" file“或" asset ")：

...
{
  "if-site-path": "/sw.js",
  "pipeline": "Content-GetFile",
  "params": {
    "name": "/ServiceWorker/sw.js",
    "source": "file"
  }
},
{
  "if-site-path": "/manifest.json",
  "pipeline": "Content-GetFile",
  "params": {
    "name": "MANIFEST_JSON",
    "source": "asset"
  }
}

请注意，您的代码应该适当地处理资源的基本路径(例如，上面示例中的"/ServiceWorker/sw.js“没有太多说明；您应该知道这是内容库中的路径还是相对于”cartridges//static/default/js/“的路径)。

动态内容

由于建议的方法使用控制器，因此您可以在将内容提供给用户之前对其进行动态处理(例如，如果您需要在DMW链接中添加/删除"/v12435145145/“部分)。天空是你的极限。:)

Answer 2

我现在也在和DW上的服务人员打交道。在我的例子中，我直接将脚本添加到footer.isml文件中，如下所示：

<script>
  //init service worker
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {     
      navigator.serviceWorker
        .register("${URLUtils.staticURL('/lib/sw/sw.js')}")
        .then(registration => {
          console.log(
            `Service Worker registered! Scope: ${registration.scope}`
          );
        })
        .catch(err => {
          console.log(`Service Worker registration failed: ${err}`);
        });
    });
  }
</script>

这对我来说很有效，至少我可以看到Service Worker registered消息。

我也有一些关于SSL证书的问题，因为我的开发环境没有合适的SSL，但它使用HTTPs路由，所以chrome对此抱怨不已，我需要使用以下命令通过终端运行chrome：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir=/tmp/foo --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=[YOUR DOMAIN]

不幸的是，我不能让service worker文件中的任何代码行工作，即使我在Safari上尝试过，因为它在develop菜单中有一个Service Workers选项，但是它没有显示任何服务worker正在运行。

我希望它能对你有所帮助。