python与pwa在windows系统上chrome浏览器未出现添加应用的按钮问题

python与pwa在windows系统上chrome浏览器未出现添加应用的按钮问题

用python -m http.server启动文件服务器时

可以在浏览器控制台看到报错

根据报错信息是将js文件类型错返回为text/plain

所以只要将对应的js文件的content-type类型修改为application/javascript就没问题了

这里就不细说了， 关于http.server的修改自行百度

下面讲下flask解决方案

flask部署pwa

简单一点我们可以直接在npm run build后生成的dist文件夹下新建app.py文件

from flask import Flask, send_file

app = Flask(__name__, static_url_path='', static_folder='./')  # 设置静态文件位置和url路径，这样设置是因为manifest.json和service-worker.js需要root路径访问


@app.route('/')
def index():
    return send_file('index.html')

app.run(port=8888, debug=True)

可以发现是和http.server一样的错误， 都是将js文件的content-type类型注册为text/plain

修改app.py代码

from flask import Flask, send_file
from werkzeug.routing import BaseConverter

# 设置静态文件位置和url路径，这样设置是因为manifest.json和service-worker.js需要root路径访问
app = Flask(__name__, static_url_path='', static_folder='./')


@app.route('/')
def index():
    return send_file('index.html')


@app.route('/service-worker.js')
def sw():
    # 修改service-worker.js的content-type类型为text/javascript
    return send_file('service-worker.js', mimetype='text/javascript')

# 注册一个正则路由转换器
class RegexConverter(BaseConverter):
    """
    自定义URL匹配正则表达式
    """

    def __init__(self, map, regex):
        super(RegexConverter, self).__init__(map)
        self.regex = regex


app.url_map.converters['regex'] = RegexConverter

# 同理在修改在dist文件夹下的precache-manifest.xxxxxxxxxxxxxxx.js

# @app.route('/index/<regex("\d+"):nid>')
@app.route('/<regex("precache-manifest\.[\w\d]{32}.js"):file>')
def precache_manifest(file):
    return send_file(file, mimetype='text/javascript')
    
app.run(port=8888, debug=True)

这样就能在浏览器的网址右边看到添加应用的按钮了