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

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

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

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

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

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

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

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

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

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

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

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

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

amp-install-serviceworker – AMP

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

ServiceWorker script evaluation failed

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

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 ジェネレータです。

App Manifest Generator

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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