nuxtmemo

Nuxt.js で PWA をやってみた

imatomix
2018年9月17日 18:21

概要

  • Nuxt.js で作られたサイト(本サイト)を PWA 化する
  • Nuxt.js には 公式の PWA モジュールがあるのでそれを使う

PWA (Progressive Web App) とは

Webの技術を利用して、ネイティブアプリケーションのようなUXを提供する技術。 例えば、
  • オフライン対応
  • プッシュ通知
  • 「ホーム画面への追加」でアプリケーションのように利用できる
など。

PWA 化するには

PWA専用の技術を導入するというよりは、Googleが策定したProgressive Web App Checklistを満たせば良い。特にネイティブアプリ開発の専門スキルは不要で、一般的なWEB開発に利用される技術によってPWA化できるらしい。
いろいろ調べたら、Nuxt.js にはオフィシャルの PWAモジュールが既にあった（笑）ので、今回はこれを使用する。

Nuxt PWA Module

Nuxt PWA Module は以下のモジュールのコレクション。
  • Workbox - オフラインキャッシュのためにサービスワーカーを登録する。
  • Manifest - アプリのマニフェストファイル（manifest.json）を自動生成する。
  • Meta - SEOフレンドリーなメタデータをマニフェストファイルに自動追加する。
  • Icon - 複数の必要なサイズのアプリアイコンを生成する。
  • OneSignal - OneSignal を使ったプッシュ通知を可能にする。

インストールとセットアップ

オフィシャルドキュメントの通りやればいい。以下和訳。

パッケージのインストール
$ npm i @nuxtjs/pwa
nuxt.config.js を編集し、pwaモジュールを追加。オプションで不要なサブモジュールを除外することもできる。
nuxt.config.js
{
        modules: [
            ['@nuxtjs/pwa', { icon: false }], // Iconモジュールを除外
        ],
}
static ディレクトリ直下に icon.png を用意。 (512x512px以上推奨)
.gitignore 以下を追記する。（サービスワーカーが生成するファイルを除外）
.gitignore
sw.*
以上、あとは通常通りビルドして実行すれば良い。

実行結果

chrome でサイトを開いて、デベロッパーツールの Application タブを確認すると以下のように正常に動作している事を確認できる。

サービスワーカー

image

マニフェスト

image

モバイル端末

オプションから「ホーム画面に追加」で、設定したアプリアイコンからスタンドアローンで起動できるようになる。ただし、スタンドアローンで起動した場合、当然ブラウザの「戻る」ボタンはなくなる。

image

その他細かい設定などは公式ドキュメントを熟読すればOK。
ほとんど何もやることがなかった。。。

追記