Question

我正在使用Python的微框架Flask创建一个网站。我最近发现了有关Progressive Web Apps的信息，并且我试图尝试使用它。根据我的理解，我必须（除其他外）注册服务工作者。这就是我被困住的原因。我使用的base.html模板扩展到我的其他.html模板，这些模板由Flask呈现。在我的base.html文件中，我已经了解了这段代码：

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register("service-worker.js").then(function(registration) {
    // Registration was successful
    console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
  // registration failed :(
     console.log('ServiceWorker registration failed: ', err);
   });
 });
}
</script>

我知道这不会起作用，因为service-worker.js文件需要与html文件位于同一目录中，但因为它们是由Flask呈现的，所以我不知道我需要放置service-worker.js文件以使其工作的目录。我已经尝试将它放在我的模板所在的同一目录中，也放在根文件夹中（然后指向寄存器脚本中的那个位置），但这不起作用。

Python文件位于网站根文件夹中。包含html文件的模板文件夹也位于根文件夹中 - 以及包含css / js / images的静态文件夹。

所以我的问题是，是否可以使用Flask作为后端注册服务工作者（或者根本创建一个PWA）？如果是这样，我该如何注册？提前谢谢！

修改：

我不确定为什么我的问题被标记为重复。我没有尝试从我的/ static / js文件夹中为服务工作者提供服务。正如我上面所说，据我所知，service-worker.js文件需要与它引用的html文件位于同一位置。除非我遗漏了一些东西，否则我不知道如何使用url_for链接静态文件的问题。

Answer 1

使用Flask，将您的sw.js文件放在静态文件夹中，但在js folder之外，我设法使用{{1} 1}}

我写了以下代码作为到达routes

的路线

make_response

让我知道这是否有帮助

Answer 2

此问题

我知道这是行不通的，因为service-worker.js文件需要与html文件位于同一目录中，但是因为它们是由Flask渲染的

至少在您使用Google的工作箱库（无需在服务工作者js文件中创建名为precacheManifest的特定映射）的情况下，此处https://developers.google.com/web/tools/workbox/modules/workbox-build不需要。

但是，如果您具有在Flask中应用的动态内容呈现服务器端，则无法实现完全脱机模式。根据链接https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures中提供的文档，此方法缩写为SSR，不太适合注册服务人员。下一步，您要迁移到名为app-shell的新体系结构。基本上，您创建一个使用api调用填充的静态html，然后可以逐渐缓存您的网站。

如何使用Python Flask模板注册服务工作者

2 个答案: