PWAMP(AMPxPWA)でブログのプッシュ通知とオフラインのアクセスを実現する

2020-06-11

(LastUpdated: 2020-06-11)

AMPで静的ブログを構築して運営している、一介のウェブデザイナーの私。 今回、このブログをPWA化し、ユーザービリティの向上を図ります。

この、AMPとPWAの組みあわせはとりわけ相性が良いらしく、PWAMP(プワンプ)という言葉もあるくらい。

すでに実装済みなので、興味のある方は、ホームスクリーンに追加してみてください。 (webpushによる通知はまだです😓)

  1. PWAとは?
  2. Service Workerとは?
  3. まとめ:シリーズで実装の方法をお伝えしていきます

PWAとは?

PWAのロゴ画像 まず、PWAとは何かを整理してみます。

プログレッシブ ウェブアプリ はウェブとアプリの両方の利点を兼ね備えたアプリです。 不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。また、ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。

はじめてのプログレッシブ ウェブアプリ  |  Web  |  Google Developers

ふむふむなるほど。 Webとアプリ両方の利点を兼ね備えた、ということで、思い当たるフシを挙げてみました。

Webサイトの良いところ

  • 気軽さ
  • 公開へのスピード感

ネイティブアプリの良いところ

  • インストールできる(オフラインでも使える)
  • 通知(ユーザーからのアクセスを待たずに、直接通知を送信できる)
  • 挙動が軽い(ネットワークの状況に左右されにくい)

ブログがwebアプリと呼べるかアレなところ。 ですが、ブログのコンテンツとの愛称は良いと思います。

更新通知などを送れたら、双方にとってプラスですからね。

Service Workerとは?

単なるブログやwebサイトはどのようにすればPWAにすることができるのか。 それは、ServiceWorkerというjavasciriptを使用することで可能です。

Service Worker はブラウザが Web ページとは別にバックグラウンドで実行するスクリプトで、Web ページやユーザーのインタラクションを必要としない機能を Web にもたらします。 既に現在、 プッシュ通知バックグラウンド同期 が提供されています。

Service Worker の紹介  |  Web Fundamentals  |  Google Developers

深い部分までは理解できなかったので、深掘りしたい方は上記リンクや、以下のリンクをご一読ください。 ウェブ ワーカーの基本 - HTML5 Rocks

僕は、ベースのフレームワークにNuxt.jsを利用しています。 なので、Serviceworkerは拡張機能をインストールするだけで、いい感じにお膳立てしてくれました。

まとめ:シリーズで実装の方法をお伝えしていきます

子猫がシーツの上からこちらを見つめる画像 次回より、AMPへの実装を紹介していきたいと思います。 実際のところ、「ホームスクリーンへの追加」からの、オフライン・アクセスは非常に簡単 でした。

PWAMPをNuxtで実装というところも、なかなかニッチで面白いところです。 どこかに需要があるんだろうか?w

そんな感じですが、興味を持っていただいた方は、ぜひ最後までお付き合いください。


タグに関連づけられた記事

AM2

JAMstacなブログにまつわる、技術的なことなどを記録しています。