一、Manifest配置
- 1、name: Web App的名称
- 2、short_name: Web App的名称,当没有足够空间展示应用的name时,会使用short_name
- 3、start_url: 初始打开Web App时的启动路由
- 4、
display: standalone
独立应用模式,隐藏浏览器地址栏 - 5、icons: 应用的桌面图标
- 6、background_color: 开屏背景色
- 7、theme_color: 状态栏颜色
二、Manifest示例
json
{
"name": "AMS",
"short_name": "AMS",
"start_url": "/",
"theme_color": "#ede5e0",
"background_color": "#fff",
"description": "描述信息",
"display": "standalone",
"lang": "cn",
"orientation": "portrait",
"icons": [
{
"src": "manifest-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "manifest-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "manifest-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "manifest-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "manifest-48x48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "manifest-36x36.png",
"sizes": "36x36",
"type": "image/png"
}
]
}
三、注意事项
- 1、manifest.json中的
icons.<type>
使用 image/png ,即时你的图片是jpg格式 - 2、manifest.json中的
icons.<sizes>
至少存在大于等于144*144的尺寸 - 3、manifest.json中的
icons.<sizes>
必须长宽相等 - 4、html中配置
<meta name="theme-color" content="#EDE5E0">
可设置ios端PWA状态栏的颜色,等价于manifest.json中的theme_color - 5、html中配置
<link rel="apple-touch-icon" href="image.png">
可设置ios端PWA图标图片,等价于manifest.json中144尺寸的icons - 6、beforeinstallprompt事件,仅会在manifest.json中的
start_url
与当前路由一致时才会触发 - 7、appinstalled事件,似乎无法正常工作?
四、可安装应用的前置条件
- 1、拥有一个
manifest.json
配置文件,且该配置文件必须包含name、short_name、start_url、icons - 2、拥有一个注册了的
Service Worker
- 3、网络需要使用
HTTPS
或localhost
服务
五、Workbox的使用
· vue.config.js:
- 1、
const { InjectManifest } = require('workbox-webpack-plugin')
引入插件 - 2、使用插件:
javascript
new InjectManifest({
swSrc: './sw.js',
swDest: 'sw.js',
importWorkboxFrom: 'disabled', // 关闭自动注入workbox-sw.js
})
· sw.js:
- 1、
importScripts('https://yourdomain.com/workbox-v4.3.1/workbox-sw.js')
引入workbox入口文件 - 2、workbox的谷歌官方地址为:https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js ,但最好使用自己的CDN路径,以保证更好的访问
- 3、修改workbox默认设置,以下是将依赖的地址路径做了修改:
javascript
workbox.setConfig({
debug: false,
modulePathPrefix: 'https://yourdomain.com/workbox-v4.3.1'
})
- 4、workbox提供了便利的方法,可直接调用预缓存和路由匹配,若无特殊需求,使用以下方法即可:
javascript
workbox.precaching.precacheAndRoute(self.__precacheManifest, {})
六、个性化路由匹配
- 1、workbox提供了常见的缓存策略,缓存优先:
workbox.strategies.CacheFirst
,网络优先:workbox.strategies.NetworkFirst
,仅使用缓存:workbox.strategies.CacheOnly
,仅使用网络:workbox.strategies.NetworkOnly
,先缓存后网络:workbox.strategies.StaleWhileRevalidate
- 2、以下为图片路由匹配缓存示例:
javascript
var cacheFirstOptions = {
requestWillFetch: function(_ref2) {
var request = _ref2.request
request = new Request(request.url)
return request
},
cachedResponseWillBeUsed: function(e) {
if (e.cachedResponse && e.cachedResponse.type === 'opaque') {
caches.delete(e.cacheName)
return null
}
return e.cachedResponse
}
}
workbox.routing.registerRoute(
new RegExp(eval('/^https?:\/\/' + location.host + '(.*).(png|gif|jpg|webp)$/')),
workbox.strategies.cacheFirst({
cacheName: 'images',
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 365 * 24 * 60 * 60,
maxEntries: 300 // 缓存条数(FIFO)
}),
new workbox.cacheableResponse.Plugin({
statuses: [0, 200] // 可被缓存的状态码
}),
cacheFirstOptions,
]
})
)
References
[2] 深入浅出 PWA
[3] 微博Web App