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