プログレッシブウェブアプリケーション

プログレッシブウェブアプリケーション（PWA）とは、ネイティブアプリケーションのような体験を提供するウェブアプリのことです。それには多くの要因がありますが、最も重要なのは、アプリがオフライン時に機能できることです。これは、Service Workerというウェブテクノロジーを使用することで実現されます。

このセクションでは、アプリにオフライン体験を追加することに焦点を当てます。これは、ウェブアプリのオフラインサポートを簡単に設定できるツールを提供する、WorkboxというGoogleプロジェクトを使用することで実現します。

現在はオフラインで動作しません

これまでは、ローカルファイルシステムに直接アクセスして出力を見ていました。しかし通常、実際のユーザーはネットワークを介してウェブアプリにアクセスします。ブラウザがサーバーと通信し、必要なアセット（.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はデフォルトでメモリ内に書き込みます。http-serverが./distディレクトリからファイルを配信できるようにするには、devserver.devmiddleware.writeToDiskオプションを有効にする必要があります。

まだ実行していない場合は、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

ブラウザでhttp://localhost:8080（つまり、http://127.0.0.1）を開くと、distディレクトリから配信されているwebpackアプリケーションが表示されるはずです。サーバーを停止して更新すると、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]
...

ご覧のとおり、service-worker.jsとより詳細なprecache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.jsという2つの追加ファイルが生成されています。service-worker.jsはService Workerファイルであり、precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.jsはservice-worker.jsが実行するために必要なファイルです。生成されるファイルは異なる可能性がありますが、service-worker.jsファイルがあるはずです。

これで、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で配信します。http://localhost:8080に移動して、コンソールを見てください。どこかに次のようなものが表示されるはずです

SW registered

それではテストしてみましょう。サーバーを停止してページをリロードしてください。もしあなたのブラウザがService Workerをサポートしているなら、まだアプリケーションが表示されているはずです。しかし、それはサーバーからではなく、Service Workerによって提供されています。

結論

Workboxプロジェクトを使用してオフラインアプリを構築しました。これでWebアプリをPWAに変える旅が始まりました。さらに先に進むことを検討しても良いでしょう。そのための役立つリソースはこちらにあります。