PWA笔记和简单实例

一、manifest的使用和介绍
1、创建manifest.json文件，并进行配置，常用配置参数有：
{
name:应用名称
short_name:短名称，用于主屏幕显示
start_url:启动时加载的url
icons:[{src"./logo.png",sizes:144x144,type:"image/png"}] :应用图标
background_color:背景色
theme_color:主题色
display:standalone 显示模式
}
2、在index.html中引入manifest.json文件 <link rel="manifest" href="manifest.json">
二、web worker的使用和介绍(无法处理缓存)
介绍:web worker可以脱离主线程之外,做一些复杂的运算,在独立的运行环境,不能操作DOM和BOM.
使用:
1、创建web worker
var worker = new Worker('work.js'); ------ 在js中进行复杂的运算
2、计算结束后给主线程发送消息
self.postMessage(msg);
3、主线程监听消息
worker.addEventListener('message', e => { console.log(e.data) })

三、service worker(离线缓存技术)
1、基本使用
在window.onload中注册service worker，防止与其他资源竞争
window.addEventListener('load', () => { //网页加载完成后执行
if('serviceWorker' in navigator){ //判断浏览器是否支持sw
navigator.serviceWorker.register('./sw.js') //注册sw
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})
}
}
2、生命周期(self和this都可以)

install ----- 注册成功时触发，用于缓存资源
self.addEventListener('install', event => {
console.log(event)
event.waitUntil( //等待skipWaiting结束，才进入activate
self.skipWaiting() //会让sw跳过等待，直接进入到activate状态
)
})
activate ----- 激活时触发，用于删除旧资源
self.addEventListener('activate', event => {
console.log(event)
event.waitUntil( //等待skipWaiting结束，才进入activate
self.clients.claim() //表示sw激活后立即获取控制权
)
})
fetch ----- 发送请求时触发，操作缓存或读取网络资源
self.addEventListener('fetch', event => {
console.log(event)

})
使用fetch()获取json文件数据
fetch('./data.json').then((res) => {
return res.json()
}).then((data) => {
console.log(data)
})
3、cache storage的基本使用
cacheStorage接口表示Cache对象的存储，配合service worker来实现资源的缓存
caches api类似于数据库的操作
caches.open(cacheName).then(function(cache){}) //用于打开缓存，类似于连接数据库
caches.keys() //返回一个promise对象，包括所有缓存的key(数据库名)
caches.delete(key) //根据key删除对象的缓存
caches对象常用的方法(单条数据操作)
cache.put(req,res) //把请求当成key，并且把对应的相应存起来
cache.add(url) //根据url发起请求...
cache.addAll(urls) //抓取url组...
cache.match(req) //获取req对应的response

三、一个简单的PWA实例 sw.js

//创建缓存资源
var cacheName = 'cache_v1'; //缓存名称
var cacheList = [
    './',
    './main.css',
    './script.js',
    './pkq.png',
    './manifest.json',
    './sw.js'
]

// 处理静态缓存
self.addEventListener('install', event => {//进入SW的安装事件
    event.waitUntil(
        caches.open(cacheName)//使用指定的缓存名称来打开缓存
            .then(cache => cache.addAll(cacheList))
            .then(() => self.skipWaiting())
    );
});

//利用fetch事件，读取缓存。fetch事件会监听URL请求，
//如果在SW缓存中，就从SW中取；如果不在，就通过网络从服务器中取。
self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request)//检查传入的请求URL是否匹配当前缓存中存在的任何内容
            .then(function (response) {
                if (response) {
                    return response;//SW有，则返回
                }
                return fetch(event.request.url);//SW没有，通过网络从服务器中取
            })
    );
});

//更新静态资源
self.addEventListener('activate', function (e) {
    e.waitUntil(
        //获取所有cache名称
        caches.keys().then(cacheNames => {
            return Promise.all(
                // 获取所有不同于当前版本名称cache下的内容
                cacheNames.filter(cacheNames => {
                    return cacheNames !== cacheStorageKey
                }).map(cacheNames => {
                    return caches.delete(cacheNames)
                })
            )
        }).then(() => {
            return self.clients.claim()
        })
    )
})