PWA 学习笔记(一)

PWA 介绍

概念：

  PWA(Progressive web apps，渐进式 Web 应用)运用现代 Web API 和传统的渐进式增强策略来创建跨平台 Web 应用程序

  它并不是一个快捷方式，而能在系统中作为一个独立的 App 存在，用户可设置它的权限，清除它的缓存

 

PWA 的关键技术在浏览器中的支持度：

  1、Web App Manifest 的支持度达到 80.63%

  2、Service Worker 的支持度达到 89.84%

  3、Notifications API 的支持度达到 75.17%

  4、Push API 的支持度达到 78.06%

 

产生原因：

  1、Web 的用户体验：无论怎么优化，还是比 Native App 要差很多，始终无法突破移动设备上 WebView 给 Web 的枷锁

  2、用户留存：Native App 安装后会在用户手机桌面上有一个入口，让用户打开 App 只需一次点击，而 Web App 在移动

               时代最主要的入口还是搜索引擎；Native App 还能发送通知让用户再次回到应用中，而 Web 没有这个能力

  3、Device API 的不完善：Android 和 iOS 提供了非常丰富的设备 API，Native App 只需获取用户授权就可以使用，

                          而在 Web App 中，WebView 没有提供这样的 API

 

主要特点：

  1、可靠：即使在网络不稳定甚至断网的环境下，也能瞬间加载并展现

  2、用户体验：快速响应，具有平滑的过渡动画及用户操作的反馈

  3、用户黏性：和 Native App 一样，可以被添加到桌面，能接受离线通知，具有沉浸式的用户体验

 

主要特性：

  1、渐进式：适用于所有浏览器，因为它是以渐进式增强作为宗旨开发的

  2、连接无关性：能够借助 Service Worker 在离线或者网络较差的情况下正常访问

  3、类原生应用：由于是在 App Shell 模型基础上开发，因此应具有 Native App 的交互，给用户 Native App 的体验

  4、持续更新：始终是最新的，无版本和更新问题

  5、安全：通过 HTTPS 协议提供服务，防止窥探，确保内容不被篡改

  6、可索引：manifest 文件和 Service Worker 可以让搜索引擎索引到，从而将其识别为『应用』

  7、黏性：通过推送离线通知等，可以让用户回流

  8、可安装：用户可以添加常用的 Web App 到桌面，免去到应用商店下载的麻烦

  9、可链接：通过链接即可分享内容，无需下载安装

 

最低要求：

  1、站点需要使用 HTTPS

  2、页面需要响应式，能够在平板和移动设备上都具有良好的浏览体验

  3、所有的 URL 在断网的情况下有内容展现，不会展现浏览器默认页面

  4、需要支持 Wep App Manifest，能被添加到桌面

  5、即使在 3G 网络下，页面加载要快，可交互时间要短

  6、在主流浏览器下都能正常展现

  7、动画要流畅，有用户操作反馈

  8、每个页面都有独立的 URL

传统 Web App，Native App 和 PWA 在各特性的对比

 

核心技术：

  1、Web App Manifest：

    (1)开发者可以定义用户添加到主屏的图标、应用名称等

    (2)允许开发者配置隐藏浏览器多余的 UI（地址栏，导航栏等），让 PWA 具有和 Native App 一样的沉浸式体验

    (3)体现在代码上主要是一个 JSON 文件：manifest.json，开发者可以在这个 JSON 文件中配置 PWA 的相关信息

  2、Service Worker：在 PWA 中最重要的功能就是离线与缓存

    (1)一个特殊的 worker 线程，独立于当前网页主线程，有自己的执行上下文

    (2)一旦被安装，就永远存在，除非显示取消注册

    (3)使用到的时候浏览器会自动唤醒，不用的时候自动休眠

    (4)可拦截并代理请求和处理返回，可以操作本地缓存，如 CacheStorage，IndexedDB 等

    (5)离线内容开发者可控

    (6)能接受服务器推送的离线消息

    (7)异步实现，内部接口异步化基本是通过 Promise 实现

    (8)不能直接操作 DOM

    (9)必须在 HTTPS 环境下才能工作

  3、离线通知：

    (1)离线通知是指在用户没有打开 PWA 站点的情况下，也能接受到服务器推送过来的通知并展现给用户

    (2)包括了两部分，离线推送和展现通知，分别是 Web Push 和 Notification API

    (3)浏览器在接受到对应的消息服务中心推送过来的离线消息时，会唤醒对应站点注册的 Service Worker，

       开发者可以在 Service Worker 文件中处理接受到的请求，显示通知

  4、App Shell 和骨架屏：

    (1)App Shell 是 PWA 强调的一个非常重要的设计理念，它能够缩短用户进入页面时的白屏时间，

       让用户一进入 PWA 就能快速看到 PWA 的整体框架

    (2)骨架屏（App Skeleton），也是提升首屏体验的有效方式。原理是在真实内容渲染完成前，使用一些能够快速渲染的

       静态图片/样式/色块/部分真实内容进行占位，让用户对真实内容区域有心理预期

    (3)App Shell 和骨架屏相辅相成，App Shell 显示页面的外框部分，初始内容由骨架屏来填充，保证主体内容区域不留白

    (4)特点：

      ·在页面加载初期预先渲染内容，提升感官上的体验

      ·一般情况骨架屏和实际内容的结构是类似的，因此之后的切换不会过于突兀

      ·只需要简单的 CSS 支持 (涉及图片懒加载可能还需要 JS )，不要求 HTTPS 协议，没有额外的学习和维护成本

      ·若页面采用组件化开发，每个组件可根据自身状态定义自身的骨架屏及其切换时机，同时维持了组件之间的独立性