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

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

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

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

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

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

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

#amp
#nuxt
#pwa
#ブログ
Chaos boy

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