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

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

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

  1. Servicewokerのメリット
  2. Nuxt×AMPでサービスワーカーを動かそう
  3. AMPのためのseviceworkerコンポーネント
  4. ジェネレーターを使って簡単にmanifest.jsonを作る
  5. ホームスクリーンへ追加ができます!
  6. まとめ:表示速度ストレスの大幅な軽減のために

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は「共有」とか「拡張機能」が格納されているメニューの中に、「ページをホームに追加」という項目が仕舞われています。

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

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

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

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

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

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

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

Social Share
ChaosBoy

テーマは「脱・思考停止」。
コメントはtwitterでお気軽に。