开启网站渐进式增强体验(PWA)

Neosey2024-02-012024-04-10

什么是 PWA Progressive Web Apps

谷歌给以 Service Worker API 为核心实现的 web 应用取了个高大上的名字：Progressive Web Apps （PWA，渐进式增强 WEB 应用），并且在其主要产品上进行了深入的实践。那么，符合 PWA 的应用特点是什么？以下为来自谷歌工程师的解答。

Progressive Web Apps 是:

渐进增强 – 能够让每一位用户使用，无论用户使用什么浏览器，因为它是始终以渐进增强为原则
响应式用户界面 – 适应任何环境：桌面电脑，智能手机，笔记本电脑，或者其他设备
不依赖网络连接 – 通过 Service Workers 可以在离线或者网速极差的环境下工作
类原生应用 – 有像原生应用般的交互和导航给用户原生应用般的体验，因为它是建立在 app shell model 上的
持续更新 – 受益于 Service Worker 的更新进程，应用能够始终保持更新
安全 – 通过 HTTPS 来提供服务来防止网络窥探，保证内容不被篡改
可发现 – 得益于 W3C manifests 元数据和 Service Worker 的登记，让搜索引擎能够找到 web 应用
再次访问 – 通过消息推送等特性让用户再次访问变得容易
可安装 – 允许用户保留对他们有用的应用在主屏幕上，不需要通过应用商店
可连接性 – 通过 URL 可以轻松分享应用，不用复杂的安装即可运行

Progressive Web Apps 优势:

PWA 是一种理念，使用多种技术来增强 Web Apps 的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验。它比原生应用更轻量，但是却比现有的 Web Apps 的功能更加丰富。最大也是最关键的区别是它能够脱离浏览器的「束缚」（虽然依然是基于浏览器的技术），能够把 PWA 网站添加到你的桌面上，不管是 PC 操作系统还是手机操作系统，类似于一个原生应用一样，并且拥有媲美原生应用的体验。而微信支付宝等小程序更封闭，是 Web 的子集。

生命周期：

Parsed （解析成功）：首次注册 Service Worker (SW) 时，浏览器解决脚本并获得入口点，如果解析成功，就可以访问到 SW 注册对象，在这一点中我们需要在 HTML 页面中添加一个判断，判断该浏览器是否支持 SW
Installing （正在安装）： SW 脚本解析完成之后，浏览器会尝试进行安装，installing 中 install 事件被执行，如果其中有 event.waitUntil () 方法，则 installing 事件会一直等到该方法中的 Promise 完成之后才会成功，如果 Promise 被拒绝，则安装失败，SW会进入 Redundant（废弃）状态
Installed / Waiting （安装成功/等待中）：如果安装成功，SW 将会进入这个状态
Activating （正在激活）：处于 waiting 状态的 SW 发生以下情况，将会进入 activating 状态中：当前已无激活状态的 worker 、 SW脚本中的 self.skipWaiting() 方法被调用、用户已关闭 SW 作用域下的所有页面，从而释放了当前处于激活状态的 worker、超出指定时间，从而释放当前处于激活状态的 worker
Activated （激活成功）：该状态，其成功接收了 document 全面控制的激活态 worker
Redundant （废弃）：这个状态的出现时有原因的，如果 installing 事件失败或者 activating 事件失败或者新的 SW 替换其成为激活态 worker 。installing 事件失败和 activating 事件失败的信息我们可以在 Chrome 浏览器的 DevTools 中查看

PWA 关键技术

Service Worker
Service Worker 是 Chrome 团队提出和力推的一个 WEB API，用于给 web 应用提供高级的可持续的后台处理能力。该 WEB API 标准起草于 2013 年，于 2014 年纳入 W3C WEB 标准草案，当前还在草案阶段
Service Worker 最主要的特点是：在页面中注册并安装成功后，运行于浏览器后台，不受页面刷新的影响，可以监听和截拦作用域范围内所有页面的 HTTP 请求，它的特点：
- 网站必须使用 HTTPS。除了使用本地开发环境调试时(如域名使用 localhost)
- 运行于浏览器后台，可以控制打开的作用域范围下所有的页面请求
- 单独的作用域范围，单独的运行环境和执行线程
- 不能操作页面 DOM。但可以通过事件机制来处理
Manifest
Web App Manifest 是一个 W3C 规范，它定义了一个基于 JSON 的 List 。Manifest 在 PWA 中的作用有：
能够将你浏览的网页添加到你的手机屏幕上
在 Android 上能够全屏启动，不显示地址栏（由于 Iphone 手机的浏览器是 Safari ，所以不支持哦）
控制屏幕横屏 / 竖屏展示
定义启动画面
可以设置你的应用启动是从主屏幕启动还是从 URL 启动
可以设置你添加屏幕上的应用程序图标、名字、图标大小
Push Notification
Push 和 Notification 是两个不同的功能，涉及到两个 API 。
Notification 是浏览器发出的通知消息。
Push 和 Notification 的关系，Push：服务器端将更新的信息传递给 SW ，Notification： SW 将更新的信息推送给用户。

PWA 技术的实现

添加注册事件
在网页中添加注册JS：

<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/sw.js', {scope: '/'})
.then(function (registration) {
// 注册成功
console.log('ServiceWorker registration successful');
})
.catch(function (err) {
// 注册失败:(
console.log('ServiceWorker registration failed');
});
});
}
</script>

添加 PWA 应用清单信息
在网站根目录下新建 manifest.json

{
"name": "无垠鲲",
"short_name": "无垠鲲",
"description": "鲲之大，无垠...",
"icons": [
{
"src": "https://www.neosey.com/favicon.ico",
"sizes": "64x64",
"type": "image/png"
},
{
"src": "https://www.neosey.com/favicon.ico",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "https://www.neosey.com/favicon.ico",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "https://www.neosey.com/favicon.ico",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"background_color": "#E0E3DA",
"theme_color": "#E0E3DA"
}

注：name 和 short_name 为网站标题，description 为网站描述，src 为图标地址

1	<link rel="manifest" href="./manifest.json">

Service Worker 配置

//缓存空间名称
var CACHE_VERSION = 'sw_v1';
//需缓存的文件
var CACHE_FILES = [
'/',
'/aaa.html',
'/bbb.jpg'
];
//监听安装事件
self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open(CACHE_VERSION)
    .then(cache => cache.addAll(CACHE_FILES)
      .then(() => self.skipWaiting())
    ));
});

//监听激活事件
self.addEventListener('activate', function (event) {
  event.waitUntil(
    caches.keys().then(function (keys) {
      return Promise.all(keys.map(function (key, i) {
        if (key !== CACHE_VERSION) {
          return caches.delete(keys[i]);
        }
      }));
    })
  );
});

//不缓存策略
self.addEventListener('fetch', function(event) {});

注：以上定义为只缓存已定义的文件，不缓存其他。

Service Worker 更多缓存策略

总是更新策略注：其余配置与上文简单配置内容一致，仅需将 fetch 事件修改如下。

//总是更新策略
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.open(CACHE_VERSION).then(function(cache) {
return fetch(event.request).then(function(response) {
cache.put(event.request, response.clone());
return response;
});
})
);
});

先缓存后更新策略注：其余配置与上文简单配置内容一致，仅需将 fetch 事件修改如下。

//先缓存后更新策略
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.open(CACHE_VERSION).then(function (cache) {
return cache.match(event.request).then(function (response) {
var fetchPromise = fetch(event.request).then(function (networkResponse) {
cache.put(event.request, networkResponse.clone());
return networkResponse;
})
return response || fetchPromise;
})
})
);
});

最佳策略
这里，我们简单的通过文件类型这个点来进行划分，优先情况是缓存 js/css 文件。这样通过在 FILE_LISTS 添加想要缓存的文件类型即可。之后，我们只要在 message 中更新原来的 document 即可。
注：此策略与上文简单配置配置内容不一致，以下为该策略配置示例：

//最佳策略
var CURRENT_CACHES = {
prefetch: 'prefetch-cache-v' + 1,
};
var FILE_LISTS = ['js','css','png'];
var goSaving = function(url){
for(var file of FILE_LISTS){
if(url.endsWith(file)) return true;
}
return false;
}
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(resp) {
return resp || fetch(event.request).then(function(response) {
// 检查是否需要缓存
var url = event.request.url;
if(!goSaving(url))return response;
console.log('save file:' + url);
// 需要缓存,则将资源放到 caches Object 中
return caches.open(CURRENT_CACHES.prefetch).then(function(cache) {
console.log('update files like' + event.request.url);
cache.put(event.request, response.clone());
return response;
});
});
})
);
});
self.addEventListener('message',event =>{
console.log("receive message" + event.data);
// 更新根目录下的 html 文件。
var url = event.data;
console.log("update root file " + url);
event.waitUntil(
caches.open(CURRENT_CACHES.prefetch).then(cache=>{
return fetch(url)
.then(res=>{
cache.put(url,res);
})
})
)
});

体验 PWA

到现在为止就已经为网站配置好了 PWA 的技术，在支持 PWA 技术的浏览器上体验吧！