PWA全称是Progressive Web App,意为“渐进式web应用”,刚看到这名字感觉很高级,接触了才知道,它是很亲民的。
PWA的核心是Service Worker。Service Worker是后台运行的worker脚本,需要浏览器提供支持。
PWA的配置很简单,在项目根目录下创建两个文件即可,manifest.json(添加主页首屏用到的配置文件)和sw.js(service worker的配置文件)。
manifest.json
{
// 应用全名
"name": "Progressive Times web app",
// 添加到主屏幕的应用名称
"short_name": "hihj.cn",
// 主屏幕点击后进入的页面路径
"start_url": "/",
// 显示模式
"display": "fullscreen",
// 皮肤主题颜色
"theme_color": "#FFDF00",
// 北京颜色
"background_color": "#FFDF00",
// 主屏幕显示的图标
"icons": [
{
"src": "./static/images/homescreen.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./static/images/homescreen-144.png",
"sizes": "144x144",
"type": "image/png"
}
]
}
sw.js
// 缓存名称
var cacheName = 'helloWorld'
// '安装'service worker服务
self.addEventListener('install', event => {
event.waitUntil(
caches.open(cacheName)
.then(cache => cache.addAll([
'/js/script.js',
'/images/hello.png'
)]
)
})
// 监听请求
self.addEventListener('fetch', function(event) {
event.respondWith(
// 当前请求是否匹配缓存中存在的内容
caches.match(event.request)
.then(function (response) {
if (response) {
return response
}
// return fetch(event.request)
// 复制请求,请求是一个流,只能使用一次
var requestToCache = event.request.clone()
return fetch(requestToCache).then(
function (response) {
if (!response || response.status !== 200) {
return response
}
var requestToCache = response.clone()
caches.open(cacheName)
.then(function (cache) {
cache.put(requestToCache, responseToCache)
})
return response
})
}
)
})
以上两步完成后,我们只要在首页index.html文件中引入service-worker.js就可以了。
<script>
// 判断浏览器支持service worker 的情况
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./sw.js')
})
}
</script>
网友评论