2

我想知道这里是否有人有在 SFCC/Demandware 中实施服务人员的经验。

我使用带有sw-precache-webpack-plugin 的 Webpack生成服务工作者

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

4

2 回答 2

2

不幸的是，在比服务工作文件本身更高的路径中注册服务工作人员不起作用（如 MDN 中所述）：

  • Service Worker 只会在 Service Worker 的范围内捕获来自客户端的请求。
  • 服务工作者的最大范围是工作者的位置。

（来源：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读取文件）；
    • 甚至网站偏好（尽管我不推荐）；
  • 在 Business Manager / Merchant Tools / SEO / Aliases 中创建一个条目以将“/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”（可以是“文件”或“资产”）：

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

动态内容

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

于 2019-07-16T08:45:16.860 回答
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 上尝试过，我也无法使该服务工作者文件中的任何代码行工作，因为它在开发菜单中有一个服务工作者选项，但它没有显示任何正在运行的服务工作者。

我希望它会帮助你。

于 2018-11-14T15:15:25.973 回答