Webpack 漸進(jìn)式網(wǎng)絡(luò)應(yīng)用程序

漸進(jìn)式網(wǎng)絡(luò)應(yīng)用程序(progressive web application - PWA)，是一種可以提供類似于 native app(原生應(yīng)用程序) 體驗(yàn)的 web app(網(wǎng)絡(luò)應(yīng)用程序)。PWA 可以用來做很多事。其中最重要的是，在**離線(offline)**時(shí)應(yīng)用程序能夠繼續(xù)運(yùn)行功能。這是通過使用名為 Service Workers 的 web 技術(shù)來實(shí)現(xiàn)的。

本章將重點(diǎn)介紹，如何為我們的應(yīng)用程序添加離線體驗(yàn)。我們將使用名為 Workbox 的 Google 項(xiàng)目來實(shí)現(xiàn)此目的，該項(xiàng)目提供的工具可幫助我們更簡(jiǎn)單地為 web app 提供離線支持。

現(xiàn)在，我們并沒有運(yùn)行在離線環(huán)境下

到目前為止，我們一直是直接查看本地文件系統(tǒng)的輸出結(jié)果。通常情況下，真正的用戶是通過網(wǎng)絡(luò)訪問 web app；用戶的瀏覽器會(huì)與一個(gè)提供所需資源（例如，?.html?, ?.js? 和 ?.css? 文件）的 server 通訊。

我們通過搭建一個(gè)擁有更多基礎(chǔ)特性的 server 來測(cè)試下這種離線體驗(yàn)。這里使用 http-server package：npm install http-server --save-dev。還要修改 ?package.json? 的 scripts 部分，來添加一個(gè) start script：

package.json

{
  ...
  "scripts": {
-    "build": "webpack"
+    "build": "webpack",
+    "start": "http-server dist"
  },
  ...
}

注意：默認(rèn)情況下，webpack DevServer 會(huì)寫入到內(nèi)存。我們需要啟用 ?devserverdevmiddleware.writeToDisk? 配置項(xiàng)，來讓 http-server 處理 ?./dist? 目錄中的文件。

如果你之前沒有操作過，先得運(yùn)行命令 npm run build 來構(gòu)建你的項(xiàng)目。然后運(yùn)行命令 npm start。應(yīng)該產(chǎn)生以下輸出：

> http-server dist

Starting up http-server, serving dist
Available on:
  http://xx.x.x.x:8080
  http://127.0.0.1:8080
  http://xxx.xxx.x.x:8080
Hit CTRL-C to stop the server

如果你打開瀏覽器訪問 ?http://localhost:8080? (即 http://127.0.0.1)，你應(yīng)該會(huì)看到 webpack 應(yīng)用程序被 serve 到 dist 目錄。如果停止 server 然后刷新，則 webpack 應(yīng)用程序不再可訪問。

這就是我們?yōu)閷?shí)現(xiàn)離線體驗(yàn)所需要的改變。在本章結(jié)束時(shí)，我們應(yīng)該要實(shí)現(xiàn)的是，停止 server 然后刷新，仍然可以看到應(yīng)用程序正常運(yùn)行。

添加 Workbox

添加 workbox-webpack-plugin 插件，然后調(diào)整 ?webpack.config.js? 文件：

npm install workbox-webpack-plugin --save-dev

webpack.config.js

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const WorkboxPlugin = require('workbox-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js',
    },
    plugins: [
      new HtmlWebpackPlugin({
-       title: 'Output Management',
+       title: 'Progressive Web Application',
      }),
+     new WorkboxPlugin.GenerateSW({
+       // 這些選項(xiàng)幫助快速啟用 ServiceWorkers
+       // 不允許遺留任何“舊的” ServiceWorkers
+       clientsClaim: true,
+       skipWaiting: true,
+     }),
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
    },
  };

完成這些設(shè)置，再次執(zhí)行 npm run build，看下會(huì)發(fā)生什么：

...
                  Asset       Size  Chunks                    Chunk Names
          app.bundle.js     545 kB    0, 1  [emitted]  [big]  app
        print.bundle.js    2.74 kB       1  [emitted]         print
             index.html  254 bytes          [emitted]
precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js  268 bytes          [emitted]
      service-worker.js       1 kB          [emitted]
...

現(xiàn)在你可以看到，生成了兩個(gè)額外的文件：?service-worker.js? 和名稱冗長(zhǎng)的 ?precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js?。?service-worker.js? 是 Service Worker 文件，?precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js? 是 ?service-worker.js? 引用的文件，所以它也可以運(yùn)行。你本地生成的文件可能會(huì)有所不同；但是應(yīng)該會(huì)有一個(gè) ?service-worker.js? 文件。

所以，值得高興的是，我們現(xiàn)在已經(jīng)創(chuàng)建出一個(gè) Service Worker。接下來該做什么？

注冊(cè) Service Worker

接下來我們注冊(cè) Service Worker，使其出場(chǎng)并開始表演。通過添加以下注冊(cè)代碼來完成此操作：

index.js

  import _ from 'lodash';
  import printMe from './print.js';

+ if ('serviceWorker' in navigator) {
+   window.addEventListener('load', () => {
+     navigator.serviceWorker.register('/service-worker.js').then(registration => {
+       console.log('SW registered: ', registration);
+     }).catch(registrationError => {
+       console.log('SW registration failed: ', registrationError);
+     });
+   });
+ }

再次運(yùn)行 npm run build 來構(gòu)建包含注冊(cè)代碼版本的應(yīng)用程序。然后用 npm start 啟動(dòng)服務(wù)。訪問 ?http://localhost:8080? 并查看 console 控制臺(tái)。在那里你應(yīng)該看到：

SW registered

現(xiàn)在來進(jìn)行測(cè)試。停止 server 并刷新頁面。如果瀏覽器能夠支持 Service Worker，應(yīng)該可以看到你的應(yīng)用程序還在正常運(yùn)行。然而，server 已經(jīng)停止 serve 整個(gè) dist 文件夾，此刻是 Service Worker 在進(jìn)行 serve。

結(jié)論

你已經(jīng)使用 Workbox 項(xiàng)目構(gòu)建了一個(gè)離線應(yīng)用程序。開始進(jìn)入將 web app 改造為 PWA 的旅程。你現(xiàn)在可能想要考慮下一步做什么。這里是可以幫助到你解決下一步問題的比較不錯(cuò)的資源。