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)
这样就能在浏览器的网址右边看到添加应用的按钮了