如何使用 Python Flask 模板注册 Service Worker

Question

我正在使用 Python 的微框架 Flask 创建一个网站。我最近发现了渐进式网络应用程序，并且正在尝试尝试它。据我了解，我必须（除其他外）注册一名服务人员。这就是我所坚持的。我正在使用一个 base.html 模板，该模板扩展到由 Flask 渲染的其他 .html 模板。在我的 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 作为后端来注册 Service Worker（或创建 PWA）？如果是这样，我该如何注册？先感谢您！

编辑：

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

Answer 1

使用 Flask，将sw.js文件放在静态文件夹中但在 之外js folder，我设法解决了routes使用make_responsefromflask

我编写了以下代码作为通往sw.js

from flask import make_response, send_from_directory
@app.route('/sw.js')
def sw():
    response=make_response(
                     send_from_directory('static',filename='sw.js'))
    #change the content header file. Can also omit; flask will handle correctly.
    response.headers['Content-Type'] = 'application/javascript'
    return response

Edit this line from

navigator.serviceWorker.register("service-worker.js").then(function(注册) {

To :

navigator.serviceWorker.register("/sw.js").then(function(注册) {

您还可以指定范围；Service Worker 应该涵盖的范围如下：

navigator.serviceWorker.register("/sw.js", {scope:"/"}).then(function(注册) {

请记住：sw.js指的是您命名的文件service-worker.js

内联 js的完整代码base.html是：

<script>     
if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
        navigator.serviceWorker.register("/sw.js", { scope: '/' })
        .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);
        });
      });
    } 

完整代码app.py与上面的示例相同

并且不要忘记你的路线 @app.route("/sw.js")

让我知道这是否有帮助