PWA初探

什么是PWA

什么是 Progressive Web App？

Progressive Web App 具备以下特点：

• 渐进式 - 适用于选用任何浏览器的所有用户，因为它是以渐进式增强作为核心宗旨来开发的。
• 自适应 - 适合任何机型：桌面设备、移动设备、平板电脑或任何未来设备。
  连接无关性 - 能够借助于服务工作线程在离线或低质量网络状况下工作。
• 类似应用 - 由于是在 App Shell 模型基础上开发，因此具有应用风格的交互和导航，给用户以应用般的熟悉感。
• 持续更新 - 在服务工作线程更新进程的作用下时刻保持最新状态。
  安全 - 通过 HTTPS 提供，以防止窥探和确保内容不被篡改。
• 可发现 - W3C 清单和服务工作线程注册作用域能够让搜索引擎找到它们，从而将其识别为“应用”。
• 可再互动 - 通过推送通知之类的功能简化了再互动。
• 可安装 - 用户可免去使用应用商店的麻烦，直接将对其最有用的应用“保留”在主屏幕上。
• 可链接 - 可通过网址轻松分享，无需复杂的安装。

PWA与 AppCache的对比

AppCache

• 即使是在线状态，文件也来自 AppCache
• 只有manifest的内容改变后才会更新AppCache
• manifest本身可能被缓存
• 是Cache的附加而不是取代，no-cache，must-revalidate仍然有其使用场景

PWA

• 为应用缓存 App Shell 和数据，使其即便在网络不可用时仍然可用
• 注册服务工作线程后，用户首次访问页面时将会触发安装事件。在此事件处理程序内，我们将缓存应用所需的全部资产。

一个PWA demo

第一个 Progressive Web App教程

前置条件

1. 开启实验性网络开发功能

1. 部署站点必须是https

我的第一个PWA demo

我的第一个 PWA demo
1. 用户首次访问页面时将会触发安装事件。在此事件处理程序内，我们将缓存应用所需的全部资产。

2. 将offline开关打开后，页面资源和数据仍可访问

3. 通过类似chrome application的方法，使用manifest配置图标icon,并支持添加到桌面

api以及支持性 列表

在canIUse查询service worker结果如下

深入思考

由于我研究尚浅，可参见其他相关文章。