如何在SFCC(需求软件)中实现serviceworker



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

我用带有sw-precache Webpack插件的Webpack生成了一个服务工作者

问题是:服务工作者应该可以从域的根目录中获得。因此CCD_ 1。JS文件通常会出现在static/文件夹中。有人知道如何在Demandware/SFCC中从项目根提供这个JS文件吗?

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

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

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

解决方案

以下是在Demandware(Sales Force(中为"/sw.js"提供服务的工作方法建议:

  • 创建一个新的控制器(或管道(,例如"ServiceWorker GetFile";响应应该是一个文件内容,可以从任何您想要的来源读取:
    • 内容资产(dw.Content.ContentMgr.getContent(((
    • 库文件(dw.content.ContentMgr.getContent((或使用dw.io.file/dw.io.FileReader直接读取文件(
    • 甚至网站偏好(尽管我不推荐(
  • 在Business Manager/MMerchant 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"、"/.assominous/assetlinks.json"等(别名,让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"没有太多内容;您应该知道这是内容库中的路径还是相对于"carboxes//static/default/js/"的路径(。

动态内容

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

我目前也在与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上尝试过,我也无法在服务工作者文件中使用任何一行代码,因为它在开发菜单中有一个服务工作者选项,但它没有显示任何服务工作者正在运行。

我希望它能帮助你。

相关内容

  • 没有找到相关文章

最新更新