摘要：配合的項(xiàng)，能夠?qū)崿F(xiàn)緩存外部資源的功能。允許接受來(lái)自的消息，默認(rèn)值為。檢查新版本的的更新信息。這也是我在研究階段直接使用時(shí)所發(fā)現(xiàn)的問(wèn)題。建議僅在生產(chǎn)模式內(nèi)使用。

談起PWA，許多人可能還只停留在“了解”的層面，比較少在實(shí)踐中真正地嘗試過(guò)，更多的僅僅是對(duì)著網(wǎng)上的教程和例子大概玩過(guò)。然而，網(wǎng)絡(luò)上的例子多是簡(jiǎn)單的demo，鮮有與真正的開發(fā)相結(jié)合，例如和webpack的工程化結(jié)合。這篇文章將會(huì)從一個(gè)webpack plugin出發(fā)，談一談如何使用這個(gè)名為offline-plugin的webpack插件輕松實(shí)現(xiàn)PWA。

由于PWA相關(guān)的文章太多，所以本文不再對(duì)“什么是PWA”，“PWA的生命周期”等基礎(chǔ)內(nèi)容再次贅述。

offline-plugin相關(guān)鏈接：

offline-plugin

demo

PWA的核心可謂是service-worker（以后簡(jiǎn)稱SW），任何一個(gè)PWA都有且只有一個(gè)service-worker.js文件，用于為SW添加資源列表，進(jìn)行注冊(cè)、激活等生命周期操作。但是在webpack構(gòu)建的項(xiàng)目中，生成一個(gè)service-worker.js可能會(huì)面臨兩個(gè)較大的問(wèn)題：

1、webpack生成的資源多會(huì)生成一串hash，sw的資源列表里面需要同步更新這些帶hash的資源；

2、每次更新代碼，都需要通過(guò)更新sw文件版本號(hào)來(lái)通知客戶端對(duì)所緩存的資源進(jìn)行更新。（其實(shí)只要這一次的sw代碼和上一次的sw代碼不一樣即可觸發(fā)更新，但使用明確的版本號(hào)會(huì)更加合適）。

看到這你可能已經(jīng)想到，萬(wàn)能的webpack社區(qū)是否已經(jīng)提供了相應(yīng)的plugin來(lái)幫我們自動(dòng)處理這些事情呢？答案是肯定的。除了官方推薦的sw-precache-webpack-plugin之外，還有我們今天的主角offline-plugin。

相比與sw-precache-webpack-plugin，個(gè)人認(rèn)為offline-plugin具有如下優(yōu)點(diǎn)：

1、更多的可選配置項(xiàng)，滿足更加細(xì)致的配置要求；

2、更為詳細(xì)的文檔和例子；

3、更新頻率相對(duì)更高，star數(shù)更多；

4、自動(dòng)處理生命周期，用戶無(wú)需糾結(jié)生命周期的坑；

*5、支持AppCache；

6、自動(dòng)生成manifest文件。

...

npm install offline-plugin [--save-dev]

第一步，進(jìn)入webpack.config:

// webpack.config.js example

var OfflinePlugin = require("offline-plugin");

module.exports = {
  // ...

  plugins: [
    // ... other plugins
    // it"s always better if OfflinePlugin is the last plugin added
    new OfflinePlugin()
  ]
  // ...
}

第二步，把runtime添加到你的入口js文件當(dāng)中：

require("offline-plugin/runtime").install();

ES6/Babel/TypeScript

import * as OfflinePluginRuntime from "offline-plugin/runtime";
OfflinePluginRuntime.install();

經(jīng)過(guò)上面的步驟，offline-plugin已經(jīng)集成到項(xiàng)目之中，通過(guò)webpack構(gòu)建即可。

前面說(shuō)過(guò)，offline-plugin支持細(xì)致的配置，以滿足不同的需求。下面將介紹幾個(gè)比較常用的配置項(xiàng)，方便大家進(jìn)一步使用。

Caches: "all" | Object

告訴插件應(yīng)該緩存什么東西，并以何種方式進(jìn)行緩存
`all`: 意味著所有webpack構(gòu)建出來(lái)的資源，以及在`externals`選項(xiàng)中的資源都會(huì)被緩存。
`Object`: 包含三個(gè)數(shù)組或正則的配置對(duì)象（`main`, `additional`, `optional`），它們都是可選的，且默認(rèn)為空。
默認(rèn)：`all`。

externals: Array

允許開發(fā)者指定一些外部資源（比如CDN引用，或者不是通過(guò)webpack生成的資源）。配合`Caches`的`additional`項(xiàng)，能夠?qū)崿F(xiàn)緩存外部資源的功能。

默認(rèn)：`null`
舉例：`["fonts/roboto.woff"]`

ServiceWorker: Object | null | false

該對(duì)象包含多個(gè)配置項(xiàng)，這里僅列舉最常用的。

`events`：布爾值。允許runtime接受來(lái)自sw的消息，默認(rèn)值為false。
`navigateFallbackURL`：當(dāng)一個(gè)URL請(qǐng)求從緩存或網(wǎng)絡(luò)都無(wú)法被獲取時(shí)，將會(huì)重定向到該選項(xiàng)所指向的URL。

AppCache: Object | null | false

`offline-plugin`默認(rèn)支持`AppCache`，但是`AppCache`草案已經(jīng)被web標(biāo)準(zhǔn)所廢棄，不建議使用。
但是由于仍然有部分瀏覽器支持，所以插件默認(rèn)提供這個(gè)功能。

上一節(jié)介紹了offline-plugin在webpack當(dāng)中的配置，這一節(jié)將介紹runtime的一些用法。
若要使offline-plugin生效，用戶必須在入口js文件中通過(guò)runtime進(jìn)行初始化操作：

// 通過(guò)AMD方式
require("offline-plugin/runtime").install();

// 或者通過(guò)ES6/Babel/TypeScript方式

import * as OfflinePluginRuntime from "offline-plugin/runtime";
OfflinePluginRuntime.install();

OfflinePluginRuntime對(duì)象提供了下列三個(gè)方法：

install(options: Object)
開啟ServiceWorker/AppCache的安裝流程。這個(gè)方法是安全的，并且必須在頁(yè)面初始化的時(shí)候就被調(diào)用。另外請(qǐng)勿把它放在任何的條件語(yǔ)句之內(nèi)。（這句話不全對(duì)，在后面的降級(jí)方案里面會(huì)詳細(xì)介紹）

applyUpdate()
接受當(dāng)前所安裝的sw的更新信息。

update()
檢查新版本的ServiceWorker/AppCache的更新信息。

runtime.install()方法接受一個(gè)配置對(duì)象參數(shù)，用于處理sw各個(gè)生命周期里面的事件：

onInstalled

當(dāng)ServiceWorker/AppCache被install時(shí)執(zhí)行，可用于展示“APP已經(jīng)支持離線訪問(wèn)”。

onUpdating

AppCache不支持該方法
當(dāng)更新信息被獲取且瀏覽器正在進(jìn)行資源更新時(shí)觸發(fā)。在這個(gè)時(shí)刻，一些資源正在被下載。

onUpdateReady

當(dāng)`onUpdating`事件完成時(shí)觸發(fā)。這時(shí)，所有資源都已經(jīng)下載完畢。
通過(guò)調(diào)用`runtime.applyUpdate()`方法來(lái)觸發(fā)更新。

onUpdateFailed

當(dāng)`onUpdating`事件因?yàn)槟承┰蚴r(shí)觸發(fā)。
這時(shí)沒(méi)有任何資源被下載，同時(shí)所有的資源更新進(jìn)程都應(yīng)該被取消或跳過(guò)。

onUpdated

當(dāng)更新被接受時(shí)觸發(fā)。

當(dāng)某些時(shí)候我們需要撤掉sw進(jìn)行降級(jí)的時(shí)候，我們需要主動(dòng)注銷sw。然而offline-plugin默認(rèn)沒(méi)有提供注銷sw的unregister()方法，所以我們需要自己實(shí)現(xiàn)。

其實(shí)要主動(dòng)注銷sw非常簡(jiǎn)單，我們可以直接調(diào)用ServiceWorkerContainer.getRegistrations()方法來(lái)拿到registration實(shí)例，然后調(diào)用registration.unregister()方法即可，具體代碼如下：

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.getRegistration().then((registration) => {
    registration && registration.unregister().then((boolean) => {
      boolean ? alert("注銷成功") : alert("注銷失敗")
    });
  })
}

在調(diào)用該方法后，sw已經(jīng)被注銷，刷新一下頁(yè)面就能看到資源是重新從網(wǎng)絡(luò)獲取的了。

在真實(shí)的生產(chǎn)環(huán)境中，我們可以通過(guò)調(diào)用接口，來(lái)決定是否使用降級(jí)方案：

fetch(URL).then((switch) => {
  if (switch) {
    OfflinePluginRuntime.install()
  } else {
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker.getRegistration().then((registration) => {
        registration && registration.unregister().then((boolean) => {
          boolean ? alert("注銷成功") : alert("注銷失敗")
        })
      })
    }
  }
})

在具體實(shí)踐中，遇到一個(gè)比較大的坑，就是sw.js文件的更新。

在service worker的設(shè)計(jì)中，瀏覽器每一次加載站點(diǎn)的URL，都會(huì)重新請(qǐng)求一遍sw.js。若發(fā)現(xiàn)這一次的sw.js內(nèi)容和上一次的不一樣，就會(huì)判定為資源更新，重新觸發(fā)sw的生命周期。然而，sw.js也是一個(gè)普通的js資源文件，會(huì)默認(rèn)使用服務(wù)器設(shè)置的expired時(shí)間，也就是它的max-age。在理解了service worker的設(shè)計(jì)后，我們不難發(fā)現(xiàn)，sw.js的max-age應(yīng)該盡可能短，以便瀏覽器能夠及時(shí)更新資源列表。

這也是我在研究階段直接使用http-server時(shí)所發(fā)現(xiàn)的問(wèn)題。后來(lái)在官方的例子中，我發(fā)現(xiàn)npm script里面是這么寫的：

"start": "http-server ./dist -p 7474 -c no-cache"

直接指定了所有資源都不使用緩存，這一點(diǎn)值得我們注意。

另外，webpack-dev-server里無(wú)法正常使用offline-plugin，因?yàn)樗枰唧w的文件去生成sw.js，但是通過(guò)webpack-dev-server構(gòu)建的項(xiàng)目，其文件是存放在內(nèi)存中的，所以無(wú)法和offline-plugin正常搭配使用。建議僅在生產(chǎn)模式內(nèi)使用offline-plugin。

手機(jī)瀏覽器都提供了“添加到主屏”的功能，但普通的網(wǎng)站添加到主屏，僅僅是把網(wǎng)站的書簽放到桌面。如果要想把網(wǎng)站以PWA的形式添加到主屏，我們需要一個(gè)manifest.json文件：

{
  "name": "offline-plugin",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#181743",
  "background_color": "#181743",
  "start_url": "/",
  "display": "standalone"
}

然后，把這個(gè)manifest.json和其他靜態(tài)資源一并打包到網(wǎng)站根目錄即可：

示例地址：

打開chrome開發(fā)者工具，進(jìn)入到Application一列，選擇Manifest，就可以看到效果了：

截止到目前（2017年8月15日），我所使用的iOS10.3.2版本的iPhone7手機(jī)，已經(jīng)支持PWA了，效果如下：
經(jīng)過(guò)查閱大量的資料，到目前為止，iOS并不支持PWA，但是可以通過(guò)在html里面添加幾個(gè)標(biāo)簽，實(shí)現(xiàn)web頁(yè)面和原生APP相似的體驗(yàn)效果：

應(yīng)用圖標(biāo)：


啟動(dòng)畫面：


應(yīng)用名稱：


全屏效果：


設(shè)置狀態(tài)欄顏色：

使用safari打開

添加到主屏后打開

離線后從主屏打開

打開任務(wù)管理器

可以看到，PWA無(wú)論從表現(xiàn)還是功能，都像一個(gè)獨(dú)立的APP那樣存在。

原來(lái)一直以為蘋果對(duì)PWA支持不好，但通過(guò)這次實(shí)踐，可以知道其實(shí)PWA也取得了極大的推進(jìn)，開發(fā)者們可以開心地搭建自己的PWA啦！
結(jié)論不能下太早。。。