如何在SFCC(Demandware)中实现serviceworker

如何在SFCC(Demandware)中实现serviceworker,service,salesforce,progressive-web-apps,worker,demandware,Service,Salesforce,Progressive Web Apps,Worker,Demandware,我想知道这里是否有人有在SFCC/Demandware实施服务人员的经验 我生成了一个带有Web包的服务人员 问题是:服务工作者应该可以从域的根目录访问。所以site.com/sw.js。 JS文件通常位于static/文件夹中。 有人知道如何从Demandware/SFCC中的项目根目录为这个JS文件提供服务吗?我目前也在和DW上的服务人员打交道。 在我的例子中,我直接将脚本添加到footer.isml文件中,如下所示: <script> //init service work

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

我生成了一个带有Web包的服务人员

问题是:服务工作者应该可以从域的根目录访问。所以
site.com/sw.js
。 JS文件通常位于
static/
文件夹中。
有人知道如何从Demandware/SFCC中的项目根目录为这个JS文件提供服务吗?

我目前也在和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>
不幸的是,即使我在Safari上试过,我也无法在该service worker文件中生成任何代码行,因为它在“开发”菜单中有一个service Workers选项,但它没有显示任何正在运行的service worker


我希望它能帮助您。

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

  • 服务工作者将仅捕获来自服务工作者作用域下的客户端的请求
  • 服务工作人员的最大作用域是工作人员的位置
(来源:)

解决方案 以下是在Demandware(销售人员)中为“/sw.js”提供服务的工作方法的建议:

  • 创建新控制器(或管道),例如“ServiceWorker GetFile”;响应应为文件内容,可以从任何来源读取:
    • 内容资产(dw.Content.ContentMgr.getContent())
    • 库文件(dw.content.ContentMgr.getContent()或直接使用dw.io.file/dw.io.FileReader读取文件)
    • 甚至网站偏好(尽管我不推荐)
  • 在Business Manager/Merchant Tools/SEO/Alias中创建一个条目,将“/sw.js”路由到“ServiceWorker GetFile”,即使用以下内容:
这似乎是一种不必要的开销,但这是我在URI中找到根路径文件的唯一方法

也为其他根文件提供服务 通过扩展控制器(例如将其重命名为“Content-GetFile”并添加GET/POST参数,如“name”和/或“source”),这也可以方便地用于其他文件(“/manifest.json”、“/.well-known/assetlinks.json”等)。在业务经理的下一个示例中/…/别名,让Content GetFile接受两个参数:“名称”(将是内容库中的文件名或内容资产ID)和“源”(将是“文件”或“资产”):

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

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

请注意,如果您的服务人员位于“/lib/sw/sw.js”中,则不能有作用域“/”。
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir=/tmp/foo --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=[YOUR DOMAIN]
{
  ...
  "your-host" : [
    ...,
    {
      "if-site-path": "/sw.js",
      "pipeline": "ServiceWorker-GetFile"
    }
  ]
}
...
{
  "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"
  }
}