pwa简介

Progressive Web App, 简称 PWA，是提高 Web App 的体验的一种新方法，能给用户原生应用的体验。

PWA 能作到原生应用的体验不是靠特指某一项技术，而是通过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提高，PWA 本质上是 Web App，借助一些新技术也具有了 Native App 的一些特性，兼具 Web App 和 Native App 的优势。

PWA 的主要特色包括下面三点：

1. 可靠 - 即便在不稳定的网络环境下，也能瞬间加载并展示
2. 体验 - 快速响应，而且有平滑的动画响应用户的操做
3. 粘性 - 像设备上的原生应用，具备沉浸式的用户体验，用户能够添加到桌面

可靠

经过 Service Worker 可以让用户在网络条件不好或离线的状况下也能瞬间加载而且展示。

介绍个sw的简便实现方法 offline-plugin

// webpack.config.js
  var OfflinePlugin = require('offline-plugin');
  module.exports = {
    plugins: [
      new OfflinePlugin({
        Caches: 'all'
      })
    ]
  }
  //index.js
  import * as OfflinePluginRuntime from 'offline-plugin/runtime';
  OfflinePluginRuntime.install();
复制代码

体验

首屏加载优化 App Shell

粘性

1. 借助 Web App Manifest 提供给用户和 Native App 同样的沉浸式体验
2. 能够经过给用户发送离线通知，让用户回流

坑：

1. ios桌面icon 实现依然使用link标签
2. 全站必须使用https, 免费证书
3. manifest.json配置的start-url必须在sw.js缓存列表中，不然没法离线使用

推荐阅读文章：

1. 下一代 Web 应用模型 —— Progressive Web App
2. 饿了么的 PWA 升级实践
3. Your first service worker