重识 PWA 进阶到 workbox3 (2)

workbox3,Google官方 PWA 框架,解决的就是 Service Worker 编写太过复杂的问题。

// 首先引入workbox框架 importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.3.0/workbox-sw.js'); workbox.precaching([ // 注册成功后要立即缓存的资源列表 ]) // 缓存策略: networkFirst、cacheFirst、staleWhileRevalidate workbox.routing.registerRoute( new RegExp(''.*\.html'), workbox.strategies.networkFirst() ); workbox.routing.registerRoute( new RegExp('.*\.(?:js|css)'), workbox.strategies.cacheFirst() ); workbox.routing.registerRoute( new RegExp('https://your\.cdn\.com/'), workbox.strategies.staleWhileRevalidate() );

生成缓存策略,可以采用workbox-build npm 包或者workbox-webpack-plugin方式自动生成。

缓存策略:

stateWhileRevalidate:当请求的路由有对应的 Cache 缓存结果就直接返回,在返回 Cache 缓存结果的同时会在后台发起网络请求拿到请求结果并更新 Cache 缓存,如果本来就没有 Cache 缓存的话,直接就发起网络请求并返回结果,这对用户来说是一种非常安全的策略

networkFirst:当请求路由是被匹配的,就采用网络优先的策略,也就是优先尝试拿到网络请求的返回结果,如果拿到网络请求的结果,就将结果返回给客户端并且写入 Cache 缓存,如果网络请求失败,那最后被缓存的 Cache 缓存结果就会被返回到客户端,这种策略一般适用于返回结果不太固定或对实时性有要求的请求,为网络请求失败进行兜底。

cacheFirst:当匹配到请求之后直接从 Cache 缓存中取得结果,如果 Cache 缓存中没有结果,那就会发起网络请求,拿到网络请求结果并将结果更新至 Cache 缓存,并将结果返回给客户端。这种策略比较适合结果不怎么变动且对实时性要求不高的请求

networkOnly:强制使用正常的网络请求,并将结果返回给客户端,这种策略比较适合对实时性要求非常高的请求。

cacheOnly:直接使用 Cache 缓存的结果,并将结果返回给客户端,这种策略比较适合一上线就不会变的静态资源请求。

如果以上策略都不满足需求,还可以自定义策略

参考文档

讲讲PWA

背景

What's PWA?

PWA的实现

Manifest实现添加至主屏幕

service worker实现离线缓存

serice worker实现消息推送

总结:PWA的优势和存在的问题

参考文档

Vue笔记九:pwa技术在vue的使用(workbox/sw-precache)

历史背景

sw-precache 和 workbox

缓存机制

安全性

Workbox 3.0 – Web 站点轻松做到离线可访问

概述

用法

precache (预缓存)静态文件

处理/和/index.html

忽略请求参数

生成预缓存列表

workbox 命令行

workbox-build npm 包

workbox-webpack-plugin

路由请求缓存

字符串方式

正则表达式fangs

回调函数方式

路由请求缓存策略

state while revalidate

network first

cache first

network only

cache only

自定义策略

第三方请求的缓存

workbox 配置

配置缓存名称

指定 development 环境

配置日志 level: debug、log、warning、error

workbox 插件

自定义插件

webpack 中使用 workbox 实现 PWA

Workbox3 - ServiceWorker可以如此简单

科普ServiceWorker

一个完整的ServiceWorker

workbox3

经验之谈

Service Worker 生命周期

解析成功(parsed)、正在安装(installing)、安装整个(installed)、正在激活(activating)、激活成功(activated)、废弃(redundant)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zydgxz.html