1、一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能。
2、创建HTML文件
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
<meta name="x5-orientation" content="portrait">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="manifest" href="manifest.json" />
<link rel="apple-touch-icon" href="e.png"/>
<title>1v1</title>
</head> <body>
<div id="main">3</div>
<script>
if (navigator.serviceWorker != null) {
navigator.serviceWorker.register('sw.js')
.then(function (registration) {
console.log('Registered events at scope: ', registration.scope);
});
}
</script>
<script src="index.js"></script>
</body> </html>
3、HTML中有引入manifest.json(名字配置项等内容)、apple-touch-icon(ios显示图标)、引入sw.js(增加单机缓存内容等)
4、manifest.json的大致内容
{
"name": "Minimal app to try PWA", \\名字
"short_name": "PWA", \\短名字
"display": "standalone", \\状态
"start_url": "/pwa/index.html", \\入口
"theme_color": "#8888ff", \\预设主题颜色
"background_color": "#aaaaff", \\预设背景颜色
"icons": [ \\安卓的图标
{
"src": "e.png",
"sizes": "256x256",
"type": "image/png"
}
]
}
5、sw.js大致内容
var cacheStorageKey = 'v2' \\版本号，每次根据这个号是否有修改来决定再替换缓存内容 var cacheList = [ \\缓存内容
"index.html",
"index.js",
"e.png"
] self.addEventListener('install', e => { \\添加缓存
e.waitUntil(
caches.open(cacheStorageKey)
.then(cache => cache.addAll(cacheList))
.then(() => self.skipWaiting())
)
}) self.addEventListener('fetch', function (e) { \\再次获取缓存的回调
e.respondWith(
caches.match(e.request).then(function (response) {
if (response != null) {
return response
}
return fetch(e.request.url)
})
)
}) self.addEventListener('activate', function (e) { \\根据缓存名不同获取内容
e.waitUntil(
Promise.all(
caches.keys().then(cacheNames => {
return cacheNames.map(name => {
if (name !== cacheStorageKey) {
return caches.delete(name)
}
})
})
).then(() => {
return self.clients.claim()
})
)
})
6、创建index.js测试
let body = document.getElementsByTagName('body')[0]
body.style.backgroundColor='#333'
7、要在前缀是https或者localhost下才能有缓存的内容，每次更新都要先修改一下版本号，也就是sw.js里的cacheStroageKey的名字