PWA(Progressive Web Apps)の概要

投稿日：

既存のWordPressで作られたホームページをPWA対応させようと調査したときの覚書。

やりたいことは「ホームに追加」ボタンを表示して、スマホのアプリみたいにしたい。ゆくゆくはプッシュ通知も実装したい。

環境： WordPress 4.9.8


目次

  1. PWAとは
  2. 開発環境を作る
  3. manifest.jsonを置いてみる


１．PWAとは

Progressive Web Appsの略

ブラウザで閲覧しているウェブを「ホーム画面に追加」することでアプリっぽく利用することができる技術。


参考サイト

概要は動画（英語）が分かりやすい


ポイント

  • Googleが推し進めていて今後ウェブ技術の１つの柱になりそう
  • オフラインでもキャッシュを参照することができて、オンラインの場合は最新情報を表示可能
  • 「ホーム画面に追加」されればプッシュ通知とかできる
  • iOSのSafariでも対応してきているけどプッシュ通知はまだ出来ない
  • TwitterがアプリとPWA対応ウェブの両方あるので、パフォーマンスなどの違いを確認するのにいい

「ホーム画面に追加しますか？」のポップアップが出るとイラっとくるので、この仕組みが改善されれば広まると思う


２．開発環境を作る

PWAはセキュアな環境でないと動かない。

httpsとかlocalhostでないと開発もできない。詳しくは下記。

当方の環境はローカルネットワーク越しのVM上で開発しているので、自前の証明書を使うことにした。

長くなったので別記事で。


３．manifest.jsonを置いてみる

まずは既存のホームページにmanifest.jsonを置いてみる。

必要事項を入力するだけで作ってくれるサービスを使う。


公開しているルートディレクトリにおいてヘッダーに追記

<link rel="manifest" href="/manifest.json">


その他、デスクトップPWAを実装している例は下記を参考に。


< Related Posts >