javascript - 如何使用 webpack encore 设置服务工作者？

Question

关于标题中的所有内容，我想知道如何使用 Webpack Encore 设置我的服务工作者。

我尝试使用.addEntry('sw', './assets/js/sw.js')inside webpack.config.js，但是，
在navigator.serviceWorker.register("/build/sw.js")dev env 中工作时，
prod 中的编译文件被重命名/build/sw.8346cedc.js，这与调用不再匹配。

我应该怎么做才能打电话给我的服务人员？

标签： javascriptsymfonywebpackservice-workerwebpack-encore

Answer 1

{{ encore_entry_js_files('sw') }}您可以使用twig 函数获取服务工作者脚本路径。

在 html 中创建一个全局变量，如下所示。

<script>
var swPath = "{{ encore_entry_js_files('sw') | first }}";
</script>

如果您的 webpack.config.js 具有.splitEntryChunks()功能，您仍然会遇到麻烦，因为 runtime.js 将被分离。