Question

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

我通过sw-precache-webpack-plugin的Webpack生成了一个服务工作者

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

Answer 1

我目前也在与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]

不幸的是，即使在Safari上，我也无法在该服务工作程序文件中的任何代码行工作，因为它在开发菜单中具有服务工作程序选项，但未显示任何正在运行的服务工作程序。 / p>

我希望它将对您有帮助。

Answer 2

不幸的是，在比服务工作者文件本身更高路径的作用域下注册服务工作者无效（如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（））;
- 库文件（dw.content.ContentMgr.getContent（）或使用dw.io.File / dw.io.FileReader直接读取文件）；
- 甚至网站首选项（尽管我不推荐）；
在业务管理器/商家工具/ SEO /别名中创建一个条目，以将“ /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接受两个参数：“名称”（将是内容库中的文件名或内容资产ID）和“源”（将是“文件”或“资产”）：

...
{
  "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”并不多说；您应该知道这是内容库中的路径还是路径相对于“墨盒// static / default / js /”）。

动态内容

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

如何在SFCC中实现服务人员（需求软件）

2 个答案:

解决方案

也提供其他根文件

动态内容