什么是PWA
PWA全称Progressive Web App，即渐进式WEB应用。
1、可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
2、实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
3、实现了消息推送
Manifest实现添加至主屏幕
<head>
<title>Minimal PWA</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="icon" href="/e.png" type="image/png" />
</head>
{
"name": "一个PWA示例", // 必填 显示的插件名称
"short_name": "PWA Demo", // 可选 在APP launcher和新的tab页显示，如果没有设置，则使用name
"description": "The app that helps you understand PWA", //用于描述应用
"display": "standalone", // 定义开发人员对Web应用程序的首选显示模式。standalone模式会有单独的
"start_url": "/", // 应用启动时的url
"theme_color": "#313131", // 桌面图标的背景色
"background_color": "#313131", // 为web应用程序预定义的背景颜色。在启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。
"icons": [ // 桌面图标，是一个数组
{
"src": "/public/img/logo.png",
"sizes": "144x144",
"type": "image/png"
}]
}
Manifest参考文档：https://developer.mozilla.org/zh-CN/docs/Web/Manifest
service worker实现离线缓存
image.png
特点：
：运行于浏览器后台，不受页面刷新的影响，可以监听和截拦作用域范围内所有页面的 HTTP 请求。
：网站必须使用 HTTPS。除了使用本地开发环境调试时(如域名使用 localhost)
：单独的作用域范围，单独的运行环境和执行线程
：不能操作页面 DOM。但可以通过事件机制来处理
：事件驱动型服务线程
浏览器支持情况
image.png
生命周期
image.png
消息推送
image.png
步骤一、提示用户并获得他们的订阅详细信息
步骤二、将这些详细信息保存在服务器上
步骤三、在需要时发送任何消息
不同浏览器需要用不同的推送消息服务器。以 Chrome 上使用 Google Cloud Messaging<GCM> 作为推送服务为例，第一步是注册 applicationServerKey(通过 GCM 注册获取)，并在页面上进行订阅或发起订阅。每一个会话会有一个独立的端点（endpoint），订阅对象的属性(PushSubscription.endpoint) 即为端点值。将端点发送给服务器后，服务器用这一值来发送消息给会话的激活的 Service Worker （通过 GCM 与浏览器客户端沟通）。
捕获用户的点击
self.addEventListener('notificationclick', function (event) {
console.log(event);
event.notification.close(); //关闭通知
event.waitUntil(
// 获取所有clients
self.clients.matchAll().then(function (clients) {
if (!clients || clients.length === 0) {
return;
}
clients.forEach(function (client) {
// 使用postMessage进行通信
client.postMessage(action);
console.log("post a message");
});
})
);
});
Service Worker与client通信
到目前为止，我们已经可以顺利得给用户展示提醒，并且在用户操作提醒后准确捕获到用户的操作。然而，还缺最重要的一步——针对不同的操作，触发不同的交互
self.addEventListener('notificationclick', function (event) {
event.waitUntil(
// 获取所有clients
self.clients.matchAll().then(function (clients) {
if (!clients || clients.length === 0) {
return;
}
clients.forEach(function (client) {
// 使用postMessage进行通信
client.postMessage(action);
console.log("post a message");
});
})
);
});
App Shell 模型
App Shell 架构是构建 PWA 应用的一种方式，它通常提供了一个最基本的 Web App 框架，包括应用的头部、底部、菜单栏等结构。顾名思义，我们可以把它理解成应用的一个「空壳」，这个「空壳」仅包含页面框架所需的最基本的 HTML 片段，CSS 和 javaScript，这样一来，用户重复打开应用时就能迅速地看到 Web App 的基本界面，只需要从网络中请求、加载必要的内容。我们使用 Service Worker 对 App Shell 做离线缓存，以便它可以在离线时正常展现，达到类似 Native App 的体验。
image.png
网友评论