bookarchivesTwitterFacebookinstagramwebamp【PWA】Nuxtで作ったAMPサイトでServiceworkerを使えるようにする2019-03-19この記事ではNuxt.jsのnuxt/pwaを使って、超簡単にサービスワーカーを導入します。導入するサイトは、このサイトで、AMPで構成しています。いうことで、Nuxt.jsで「PWAを実現したい方」と、「AMPでPWAを実現したい方」の参考になれば幸いです。ServicewokerのメリットNuxt×AMPでサービスワーカーを動かそうAMPのためのseviceworkerコンポーネントジェネレーターを使って簡単にmanifest.jsonを作るホームスクリーンへ追加ができます!まとめ:表示速度ストレスの大幅な軽減のためにnuxtのプラグインを使うと、サービスワーカーの設定のほとんどの部分を簡略化できてしまいます。よって、導入のハードルは低いので、やらない手はない!逆に、workboxなどを使って、AMPに直接導入したい方には、この記事では情報が足りないかもしれません。Servicewokerのメリット代表的な動作に、「ホームスクリーンに追加する」ことが可能になります。ホームスクリーンに追加すると、以下のようなメリットがあります。表示の高速化アプリのように起動オフラインでもアクセス可能ブログなどのメディアならば、RSS登録してくれるようなリピーターに対して、かなり有効なUXを提供できるのではないでしょうか。pushによる更新通知ができるというのは、かなり大きなポイントの一つ。pushに関する記事はまた別途紹介いたします。Workerを動かせるようにします。これによりホームスクリーンに追加し、ネットワークがwebに接続されていなくてもサイトが見られるようにします。今回はこちらの方のやり方に倣って、AMPにserviceworker機能を実装します。Qiitaampはjs使えないから動いてなかったんですねこのサイトはAMPで出力するため、generate時にjsの記述を全て削除するようにしていました。nuxt/pwaをインストールした時点で、裏では色々と動いていたんですね。必要な記述ごと全て削除されていたんだと思います。「JSが必要なら、AMPで実装できないじゃん?」AMPのためのseviceworkerコンポーネントamp-install-serviceworkerというコンポーネントが用意されていました。AMPテストはdev環境で作業をしています。failedローカルホストでのテストでは、サービスワーカーがちゃんと動かないようです。PWAのドキュメントを読んでみます。PWADevオプションのところに詳細が書いてありました。startを使用してワークボックスをテストすることをお勧めします。workerが動いた!!結局、オプションは何も指定せずとも、動くことがわかりました。Generator必要な項目を入力するだけで、超簡単にmanifest.jsonを生成してくれます。この設定項目が何を指しているか、いまひとつわかりません。mode表示モードです。aloneはアプリ風の起動をします。Browserを選択すると、デフォルトのブラウザでページを起動させられます。僕は、せっかくのPWAなのでスタンドアローンを選択してみました。Orientation画面を横向きか縦向きかを、固定したりできます。このブログはレスポンシブなので、anyを選択。scopeこのアプリで管理するURLの範囲を指定します。Manifest.jsonのプロパティでは、Scopeに該当する部分です。このサイトでは、ドメイン以下をアプリの範囲としたいので、/を設定しました。urlアプリが起動された時に表示させるURLです。意図がなければ、indexページが推奨されるようです。colorツールバーの色を設定します。スタンドアローンだとわかりやすいのですが、上部に色がつく場所があります。その色かと思われます。colorアプリ内の背景色です。CSSの読み込みまでの間に、ブラウザがベースのカラーを描いてくれるので、違和感の少ない体験を提供するのに一役買ってくれます。ホームスクリーンへ追加ができます!AndroidでChromeを使っている場合は、ページ閲覧中に「ホーム画面に追加」というダイアログが出るようです。これなら捗りそう!しかしながら・・・iOSはダイアログは出ません。iOSは「共有」とか「拡張機能」が格納されているメニューの中に、「ページをホームに追加」という項目が仕舞われています。現状では、この方法で登録を行ってくれるユーザーは・・・かなり限られた人になりそうです。促進するならどこかしらに、行為を促すメッセージが必要かもしれません。先進的な技術のため対応デバイスやブラウザが限られているため、ユーザー側の利用のハードルが高いのが難点です。注目度は高く、今後もっと浸透していくことが予想されます。アプリ風に起動する自分のブログは、ちょっと感動できます。チャレンジして導入をしてみてください!もう一つ、新しいブログを作っていますAMPでタグごとの記事リストを「動的に」切り替えるAMPバリデーションを自動化してサイト丸ごとチェックするNuxt2.9.1へのアップデートでAMPエラーが出た時に対応したことIFTTTの設定に満足できなくなったらZapierに乗り換えようサイトの表示スピードを改善する2つの方法Feedlyでトップ画像だけが表示されないのでフィードを調整する@nuxt.jsnuxtjs/feedで実装したRSSフィードをRSS2.0からATOM1.0にするAMPを実装するときに、知っておくと便利なことをまとめる【PWA】Nuxtで作ったAMPサイトでServiceworkerを使えるようにするPWAMP(AMPxPWA)でブログのプッシュ通知とオフラインのアクセスを実現する雑記か専門かなんてどうでもいい。ブログのテクニック依存から抜け出すことから始めよう記事ネタがないとか書き方が分からなくて筆が進まない時の対処法ブログは上手に書けてなくても「素人感」にこそ本当の価値があるブログ・サービス選びに悩む初心者へ送る定番からレアなサービスを紹介ブログを何から始めたらいいか分からない方へザックリと始め方の流れを説明するFirebaseHostingのストレージ上限エラーになった時の対応法ブログに興味があるけど始められない人はこんな感じなのかなAMP警告「推奨サイズより大きい画像を指定してください」が出たので対応するAMPでスクロール・インタラクションを実装したのでamp-position-observerについてまとめる。Nuxt.jsとAMPで作ったこのブログの構成要素をざっくりとまとめてみるAMPを最適化して更に高速化する!ブログの古い記事を見直したらアクセスが少しだけど上がりましたモバイルファーストインデックスが検索順位やgoogle登録に与える影響CircleCIを導入してシンプルなワークフローを実現!デプロイの効率化にチャレンジサイトのAMP化を検討している方へ導入によるメリットとそうじゃない部分を解説します静的なAMPのブログにコメント欄の設置を可能にするamp-facebook-commentsAMPで「ページトップへ遷移する」ボタンを設置する方法フェードやパララックスをAMPブログに実装できるamp-fx-collectionブログサービスの選び方。arrowPrev#serviceworker#amp#nuxt#pwa#blogもう一つ、新しいブログを作っていますAMPでタグごとの記事リストを「動的に」切り替えるAMPバリデーションを自動化してサイト丸ごとチェックするNuxt2.9.1へのアップデートでAMPエラーが出た時に対応したことIFTTTの設定に満足できなくなったらZapierに乗り換えようサイトの表示スピードを改善する2つの方法Feedlyでトップ画像だけが表示されないのでフィードを調整する@nuxt.jsnuxtjs/feedで実装したRSSフィードをRSS2.0からATOM1.0にするAMPを実装するときに、知っておくと便利なことをまとめるPWAMP(AMPxPWA)でブログのプッシュ通知とオフラインのアクセスを実現する雑記か専門かなんてどうでもいい。ブログのテクニック依存から抜け出すことから始めよう記事ネタがないとか書き方が分からなくて筆が進まない時の対処法ブログは上手に書けてなくても「素人感」にこそ本当の価値があるブログ・サービス選びに悩む初心者へ送る定番からレアなサービスを紹介ブログを何から始めたらいいか分からない方へザックリと始め方の流れを説明するFirebaseHostingのストレージ上限エラーになった時の対応法ブログに興味があるけど始められない人はこんな感じなのかなAMP警告「推奨サイズより大きい画像を指定してください」が出たので対応するAMPでスクロール・インタラクションを実装したのでamp-position-observerについてまとめる。Nuxt.jsとAMPで作ったこのブログの構成要素をざっくりとまとめてみるAMPを最適化して更に高速化する!ブログの古い記事を見直したらアクセスが少しだけど上がりましたモバイルファーストインデックスが検索順位やgoogle登録に与える影響CircleCIを導入してシンプルなワークフローを実現!デプロイの効率化にチャレンジサイトのAMP化を検討している方へ導入によるメリットとそうじゃない部分を解説します静的なAMPのブログにコメント欄の設置を可能にするamp-facebook-commentsAMPで「ページトップへ遷移する」ボタンを設置する方法フェードやパララックスをAMPブログに実装できるamp-fx-collectionブログサービスの選び方。コメントはtwitterでお気軽に。