フロントエンドフレームワークと PWA

本記事は、PWA Advent Calendar 2018 の 11 日目の記事となります。

前提

本記事では、PWA を構成する要素のうち、「オフライン/キャッシュ動作」「WebPush」を実現する Service Worker を主要なフロントエンドフレームワーク、及びその CLI ツールなどと統合した形で使うための方法をまとめていきます。

対象とするのは以下のフレームワークとします。

• React
• Vue.js
• Angular

React

create-react-app で Workbox を使った Service Worker が利用できます。

オプトイン方式での提供になるので、利用する場合は src/index.js を下記を参考に修正してください。

Making a Progressive Web App

The production build has all the tools necessary to generate a first-class Progressive Web App, but the offline/cache-first behavior is opt-in only. By default, the build process will generate a service worker file, but it will not be registered, so it will not take control of your production web app.

In order to opt-in to the offline-first behavior, developers should look for the following in their src/index.js file:

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

As the comment states, switching serviceWorker.unregister() to serviceWorker.register() will opt you in to using the service worker.

ただし、generateSW モードで実現できるリソースキャッシュ程度ならともかく、injectManifest モードで細かい挙動の調整をしたい場合や WebPush を取り扱いたい場合、Webpack の config ファイルをイジェクトして自分で調整する必要があります。手間。

Vue.js

Vue CLI 3.0 でプロジェクト作成時に導入可能なプラグインの一つに、「PWA」が存在します。

React 同様 Workbox を使った Service Worker の提供になりますが、Vue CLI 3.0 は vue.config.js ファイルを作成することで Webpack の config ファイルを直接触ることなくプラグインなどの挙動を調整可能なので、React よりは WebPush の導入が楽ちんです。

また、Vue CLI 3.0 のプラグインシステムを使って提供されているので、既存プロジェクトへも下記のコマンド一発叩くだけで追加できます。

vue add @vue/pwa

実際の設定項目はこちらを参考にどうぞ。
@vue/cli-plugin-pwa

Angular

一番対応が手厚いです。

Vue.js のように新規プロジェクト立ち上げ時の設定項目にこそないですが、下記のコマンド一発でキャッシュ動作を実現する Service Worker が導入されます。

$ ng add @angular/pwa

また、@angular/ng-service-worker.SwPush を使うことで、Angular がイベント処理などに採用している、Observable Stream を介して WebPush のメッセージや通知の開封を処理することができます。

本アドベントカレンダーでも SwPush についての解説記事が上がっているので、詳細はそちらでどうぞ。

まとめ

主要フロントエンドフレームワークで PWA を実現したい場合、以下で追加可能

• React (react-create-app)
  • 新規プロジェクト立ち上げ後、src.index.js の編集
• Vue (Vue CLI 3.0)
  • vue create で新規プロジェクト立ち上げ時に機能選択で PWA を追加する
  • 既存プロジェクトへは vue add @vue/pwa で追加できる
• Angular (ng-cli)
  • 新規プロジェクト立ち上げ後、ng add @angular/pwa
  • 既存プロジェクトへも同様のコマンドで追加できる