漸進式網路應用程式

漸進式網路應用程式 (或 PWA) 是提供類似原生應用程式的體驗的網路應用程式。有許多因素可以促成這一點。其中，最重要的因素是應用程式能夠在離線時運作。這是透過使用稱為 Service Workers 的網路技術來達成。

本節將專注於為我們的應用程式新增離線體驗。我們將使用 Google 專案 Workbox 來達成此目的，它提供了有助於讓網路應用程式的離線支援更容易設定的工具。

我們現在無法離線工作

到目前為止，我們一直透過直接前往本機檔案系統來檢視輸出。不過，通常實際使用者會透過網路存取網路應用程式；其瀏覽器會與伺服器交談，而伺服器會提供所需的資源（例如 .html、.js 和 .css 檔案）。

因此，讓我們測試一下使用具備更多基本功能的伺服器時目前的體驗為何。我們將使用 http-server 套件：npm install http-server --save-dev。我們也會修改 package.json 的 scripts 區段，加入 start 指令碼

package.json

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

注意：Webpack DevServer 預設會寫入記憶體。我們需要啟用 devserverdevmiddleware.writeToDisk 選項，才能讓 http-server 能夠提供 ./dist 目錄中的檔案。

如果您之前尚未執行，請執行指令 npm run build 來建置您的專案。然後執行指令 npm start。這應該會產生以下輸出

> 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

如果您在瀏覽器中開啟 https://#:8080（亦即 http://127.0.0.1），您應該會看到您的 webpack 應用程式從 dist 目錄中提供。如果您停止伺服器並重新整理，webpack 應用程式將不再可用。

這就是我們要改變的。一旦我們完成這個模組，我們就應該能夠停止伺服器、按一下重新整理，並仍然看到我們的應用程式。

加入 Workbox

讓我們加入 Workbox webpack 外掛程式並調整 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({
+       // these options encourage the ServiceWorkers to get in there fast
+       // and not allow any straggling "old" SWs to hang around
+       clientsClaim: true,
+       skipWaiting: true,
+     }),
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
    },
  };

設定好之後，讓我們看看執行 npm run build 時會發生什麼事

...
                  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]
...

正如您所見，我們現在有 2 個額外檔案產生；service-worker.js 和更詳細的 precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js。service-worker.js 是 Service Worker 檔案，而 precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js 是 service-worker.js 執行所需的檔案。您自己產生的檔案可能會有所不同；但您應該會看到一個 service-worker.js 檔案。

因此，我們現在已經高興地製作了一個 Service Worker。接下來呢？

註冊我們的 Service Worker

讓我們允許我們的 Service Worker 透過註冊它來出來執行。我們將透過新增以下註冊碼來執行此操作

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);
+     });
+   });
+ }

再次執行 npm run build 來建置包含註冊碼的應用程式版本。然後使用 npm start 提供服務。導覽至 https://#:8080 並查看主控台。您應該會在某處看到

SW registered

現在來測試它。停止您的伺服器並重新整理您的頁面。如果您的瀏覽器支援 Service Worker，則您應該仍然會看到您的應用程式。但是，它是由您的 Service Worker 提供服務，而非伺服器。

結論

您已使用 Workbox 專案建置離線應用程式。您已開始將您的網路應用程式轉換成 PWA。您現在可能想要考慮進一步採取行動。您可以在 此處 找到有助於您執行的良好資源。