PWAMP(AMPxPWA)でブログのプッシュ通知とオフラインのアクセスを実現する
2020-06-11
(LastUpdated: 2020-06-11)
AMPで静的ブログを構築して運営している、一介のウェブデザイナーの私。 今回、このブログをPWA化し、ユーザービリティの向上を図ります。
この、AMPとPWAの組みあわせはとりわけ相性が良いらしく、PWAMP（プワンプ）という言葉もあるくらい。
すでに実装済みなので、興味のある方は、ホームスクリーンに追加してみてください。 (webpushによる通知はまだです😓）
PWAとは？
まず、PWAとは何かを整理してみます。
プログレッシブ ウェブアプリ はウェブとアプリの両方の利点を兼ね備えたアプリです。 不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。また、ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。
ふむふむなるほど。 Webとアプリ両方の利点を兼ね備えた、ということで、思い当たるフシを挙げてみました。
Webサイトの良いところ
- 気軽さ
- 公開へのスピード感
ネイティブアプリの良いところ
- インストールできる（オフラインでも使える）
- 通知（ユーザーからのアクセスを待たずに、直接通知を送信できる）
- 挙動が軽い（ネットワークの状況に左右されにくい）
ブログがwebアプリと呼べるかアレなところ。 ですが、ブログのコンテンツとの愛称は良いと思います。
更新通知などを送れたら、双方にとってプラスですからね。
Service Workerとは？
単なるブログやwebサイトはどのようにすればPWAにすることができるのか。 それは、ServiceWorkerというjavasciriptを使用することで可能です。
Service Worker はブラウザが Web ページとは別にバックグラウンドで実行するスクリプトで、Web ページやユーザーのインタラクションを必要としない機能を Web にもたらします。 既に現在、 プッシュ通知 や バックグラウンド同期 が提供されています。
深い部分までは理解できなかったので、深掘りしたい方は上記リンクや、以下のリンクをご一読ください。 ウェブ ワーカーの基本 - HTML5 Rocks
僕は、ベースのフレームワークにNuxt.jsを利用しています。 なので、Serviceworkerは拡張機能をインストールするだけで、いい感じにお膳立てしてくれました。
まとめ：シリーズで実装の方法をお伝えしていきます
次回より、AMPへの実装を紹介していきたいと思います。
実際のところ、「ホームスクリーンへの追加」からの、オフライン・アクセスは非常に簡単 でした。
PWAMPをNuxtで実装というところも、なかなかニッチで面白いところです。 どこかに需要があるんだろうか？ｗ
そんな感じですが、興味を持っていただいた方は、ぜひ最後までお付き合いください。
