【PWA】Nuxtで作ったAMPサイトでServiceworkerを使えるようにする

この記事ではNuxt.jsのnuxt/pwaを使って、超簡単にサービスワーカーを導入します。 導入するサイトは、このサイトで、AMPで構成しています。

ということで、Nuxt.jsで「PWAを実現したい方」と、「AMPでPWAを実現したい方」の参考になれば幸いです。

nuxtのプラグインを使うと、サービスワーカーの設定のほとんどの部分を簡略化できてしまいます。 よって、導入のハードルは低いので、やらない手はない！

逆に、workboxなどを使って、AMPに直接導入したい方には、この記事では情報が足りないかもしれません。

Servicewokerのメリット

代表的な動作に、「ホームスクリーンに追加する」ことが可能になります。 ホームスクリーンに追加すると、以下のようなメリットがあります。

• 表示の高速化
• アプリのように起動
• オフラインでもアクセス可能

ブログなどのメディアならば、RSS登録してくれるようなリピーターに対して、かなり有効なUXを提供できるのではないでしょうか。

また、web pushによる更新通知ができるというのは、かなり大きなポイントの一つ。 Web pushに関する記事はまた別途紹介いたします。

Nuxt×AMPでサービスワーカーを動かそう

今回はService Workerを動かせるようにします。 これによりホームスクリーンに追加し、ネットワークがwebに接続されていなくてもサイトが見られるようにします。

今回はこちらの方のやり方に倣って、AMPにserviceworker機能を実装します。 AMPページをPWA化する - Qiita

ampはjs使えないから動いてなかったんですね

このサイトはAMPで出力するため、generate時にjsの記述を全て削除するようにしていました。 おそらく、nuxt/pwaをインストールした時点で、裏では色々と動いていたんですね。 しかし、必要な記述ごと全て削除されていたんだと思います。

で、思った。 「JSが必要なら、AMPで実装できないじゃん？」

AMPのためのseviceworkerコンポーネント

amp-install-serviceworkerというコンポーネントが用意されていました。 amp-install-serviceworker – AMP

テストはdev環境で作業をしています。 しかし、エラーが・・・

ServiceWorker script evaluation failed

ローカルホストでのテストでは、サービスワーカーがちゃんと動かないようです。

ローカルホストでServiceWorkerが動いた！

Next PWAのドキュメントを読んでみます。 Workbox Module | ⚡ Nuxt PWA Devオプションのところに詳細が書いてありました。

It is recommanded to test workbox usingnuxt build/nuxt start nuxt build / nuxt startを使用してワークボックスをテストすることをお勧めします。

⚡ Nuxt PWA document

とうことで、devオプション自体は有効にせずに、 nuxt start してみると・・・ローカルホストでservice workerが動いた！！

結局、オプションは何も指定せずとも、動くことがわかりました。 LighthouseのPWAのスコアは、58 -> 81まで上昇！

ジェネレーターを使って簡単にmanifest.jsonを作る

上記のリンクの方が紹介しているmanifest ジェネレータです。

App Manifest Generator

必要な項目を入力するだけで、超簡単にmanifest.jsonを生成してくれます。 しかし、この設定項目が何を指しているか、いまひとつわかりません。

なのでちょっと調べてみました。 Web app manifest ウェブアプリマニフェスト | MDN

App Manifest Generatorの設定値を解説

Display mode

表示モードです。 Stand aloneはアプリ風の起動をします。 Browserを選択すると、デフォルトのブラウザでページを起動させられます。

僕は、せっかくのPWAなのでスタンドアローンを選択してみました。

Orientation

画面を横向きか縦向きかを、固定したりできます。 このブログはレスポンシブなので、anyを選択。

Application scope

このアプリで管理するURLの範囲を指定します。 Manifest.jsonのプロパティでは、Scopeに該当する部分です。 このサイトでは、ドメイン以下をアプリの範囲としたいので、/を設定しました。

start url

アプリが起動された時に表示させるURLです。 特に意図がなければ、indexページが推奨されるようです。

theme color

ツールバーの色を設定します。 スタンドアローンだとわかりやすいのですが、上部に色がつく場所があります。 おそらく、その色かと思われます。

background color

アプリ内の背景色です。 CSSの読み込みまでの間に、ブラウザがベースのカラーを描いてくれるので、違和感の少ない体験を提供するのに一役買ってくれます。

ホームスクリーンへ追加ができます！

AndroidでChromeを使っている場合は、ページ閲覧中に「ホーム画面に追加」というダイアログが出るようです。 これなら捗りそう！

しかしながら・・・iOSはダイアログは出ません 。 iOSは「共有」とか「拡張機能」が格納されているメニューの中に、「ページをホームに追加」という項目が仕舞われています。

現状では、この方法で登録を行ってくれるユーザーは・・・かなり限られた人になりそうです。

促進するならどこかしらに、行為を促すメッセージが必要かもしれません。

まとめ：表示速度ストレスの大幅な軽減のために

• ブラウザを起動しなくて良い
• ページロード時間が少なくなる
• オフラインでもみることができる

これらのメリットによって、ユーザーの 速度にまつわるストレスの大幅な軽減 が期待されます。 まだまだ、先進的な技術のため対応デバイスやブラウザが限られているため、ユーザー側の利用のハードルが高いのが難点です。

しかし、注目度は高く、今後もっと浸透していくことが予想されます。

アプリ風に起動する自分のブログは、ちょっと感動できます。 ぜひ、チャレンジして導入をしてみてください！