PWA指南

一、PWA核心技术

1. Web App Manifest

Web App Manifest 体现在代码上主要是一个 JSON 文件：manifest.json，我们可以在这个 JSON 文件中配置 PWA 的相关信息，应用名称、图标、启动方式、背景颜色、主题颜色等等。添加到桌面后，PWA 并不是一个快捷方式，而是能够在系统中作为一个独立的 App 存在的，用户可以设置它的权限，清除它的缓存，就和Native App 一样。

在chrome开发者工具中查看web app Manifest设置

具体入门可查看lavas官网

2. Service Worker

Service Worker，是浏览器在后端独立于网页主进程运行的脚本，它可以拦截网络请求，可以操作本地缓存，还可以接受服务器推送的离线消息。

image.png

其特点如下：

1. 一个特殊的 worker 线程，独立于当前网页主线程，有自己的执行上下文
2. 一旦被安装，就永远存在，除非显示取消注册
3. 使用到的时候浏览器会自动唤醒，不用的时候自动休眠
4. 可拦截并代理请求和处理返回，可以操作本地缓存，如 CacheStorage，IndexedDB 等
5. 离线内容开发者可控
6. 能接受服务器推送的离线消息
7. 异步实现，内部接口异步化基本是通过 Promise 实现
8. 不能直接操作 DOM
9. 必须在 HTTPS 环境下才能工作

10. 不能跨域，同域下允许注册多个不同scope的service worker

    
    image.png

3. 离线通知

离线通知是指在用户没有打开 PWA 站点的情况下，也能接受到服务器推送过来的通知并展现给用户，其中包括了两部分，离线推送和展现通知，分别是 Web Push 和 Notification API。

推送通知是一种时效性非常强的与用户沟通的方式，即使在 PWA 没有打开的情况下，依然可以触达用户，能够立即引起用户的注意，对于一些突发事件、限时活动、重大升级等时效性要求很高的场景，推送通知总是最好的选择。
浏览器在接受到对应的消息服务中心推送过来的离线消息时，会唤醒对应站点注册的 Service Worker，开发者可以在 Service Worker 文件中处理接受到的请求，显示通知。

如何实现消息推送：使用入门
如何实现消息通知：使用入门

4. App Shell 和骨架屏

App Shell 是 PWA 界面展示所需的最小资源集合，即让页面能够正常运行起来的最小的 HTML、CSS 和 JavaScript 等静态资源集，每个页面都需要加载这一部分资源。利用 Service Worker 把这部分资源缓存在本地，就能够在打开 PWA 时不需要从服务器端获取这部分资源，从而能够瞬间渲染出页面框架，不仅提升了首屏的速度，还减小了站点流量的消耗。
app shell介绍

骨架屏（App Skeleton），也是提升首屏体验的有效方式。它的原理是在真实内容渲染完成之前，使用一些能够快速渲染的静态图片/样式/色块/部分真实内容进行占位，让用户对真实内容区域有心理预期。App Shell 和骨架屏都是提升首屏体验的绝好妙招。

image.png image.png

开源skeleton插件: vue-skeleton-webpack-plugin
app skeleton介绍
饿了么骨架屏实现

skeleton作用不明显原因

image.png

解决方案

image.png
异步加载css方式