当サイト、オリジナルWordPressプラグイン「OJapp PWA Marketing」を使用しています。
各記事は専用アイコンでホーム画面に追加できます。ぜひお試しください。
PWA（Progressive Web Apps）は、
Webサイトをスマートフォンのホーム画面へ追加し、アプリのように利用できる技術です。
App StoreやGoogle Playへ公開しなくても、
Webサイトだけでアプリのような体験を提供できます。
最近では企業サイトやECサイトだけでなく、
ブログやWebツールなどでも利用される機会が増えてきました。
しかし、
「PWAとは何なのか？」
「何ができるのか？」
「普通のWebサイトと何が違うのか？」
という疑問を持つ人も少なくありません。
この記事では、PWAの基本から、実際に設計するときに知っておきたい考え方まで、できるだけ分かりやすく解説します。
PWAでできること
PWAを導入すると、Webサイトで次のようなことができるようになります。
- ホーム画面へ追加
- 全画面表示（ブラウザUIを非表示）
- オフライン対応
- プッシュ通知
- アプリのような起動体験
特に多くの人が最初に体験するのは、
「ホーム画面へ追加」
です。
追加すると、
Webサイトがスマートフォンのアプリ一覧に並び、
ワンタップで起動できるようになります。
PWAを構成する主な技術
PWAにはいくつかの技術があります。
代表的なのは次の3つです。
Web App Manifest
PWAの設定ファイルです。
例えば、
- アプリ名
- ホーム画面アイコン
- 起動するURL
- 表示方法
などを設定します。
ホーム画面へ追加したときの見た目は、このManifestによって決まります。
Service Worker
Service Workerは、
Webサイトの裏側で動くJavaScriptです。
例えば、
- オフライン対応
- キャッシュ
- プッシュ通知
- バックグラウンド処理
などを担当します。
ただし、
Service WorkerはPWAに必須というわけではありません。
ホーム画面へ追加するだけであれば、
Service Workerを使わない構成でも十分実現できます。
そのため、この記事ではPWAの設計を決める
Web App Manifest
を中心に解説します。
HTTPS
PWAはHTTPSで配信されるWebサイトで利用できます。
安全な通信を前提としているため、
HTTPでは利用できません。
Web App Manifestには2つの設計思想がある
一般的なPWAの解説では、
Manifestの書き方や設定項目だけが紹介されることがほとんどです。
しかし実際には、
Manifestを設計する段階で、
「何を一つのアプリと考えるのか」
という選択があります。
私はこの考え方を、
- 1S1A（One Site. One App.）
- 1P1A（One Page. One App.）
という2つの設計思想として整理しています。
1S1A（One Site. One App.）
1S1Aとは、
サイト全体を一つのアプリとして扱う設計です。
例えば、
{
"start_url": "/",
"display": "standalone"
}
このような構成では、
どのページからホーム画面へ追加しても、
起動するとトップページから始まります。
ホーム画面
🏠 サイト
│
├ 記事
├ 商品
├ お問い合わせ
└ ブログ
これは企業サイトやポータルサイト、
大規模なECサイトなど、
サービス全体を入口にしたいサイトには非常に向いています。
現在公開されているPWAの多くが、
この設計を採用しています。
1P1A（One Page. One App.）
もう一つの考え方があります。
それが、
One Page. One App.
です。
名前の通り、
1ページを1つのアプリとして扱う設計です。
例えば、
{
"start_url": ".",
"display": "standalone"
}
このように設計すると、
現在表示しているページそのものをホーム画面へ追加できます。
ホーム画面
📄 記事A
🛒 商品ページ
📅 予約ページ
🧮 Webツール
つまり、
ブログの記事、
商品の詳細ページ、
予約ページ、
プロフィールページ、
Webツールなど、
ページそのものがホーム画面に並びます。
私はこの考え方を、
Webが本来持っている
「1URL = 1コンテンツ」
という思想を、そのままホーム画面へ持ち込んだ設計だと考えています。
検索エンジンも、
SNSも、
ブックマークも、
Webは昔からページ単位で扱われてきました。
それなら、
ホーム画面もページ単位で良いのではないか。
その発想から生まれたのが1P1Aです。
まだ一般的なPWAの解説で紹介されることはほとんどありませんが、
ページ単位で価値を持つブログ、ECサイト、Webツール、デジタル名刺などでは、
これからさらに注目されていく設計思想の一つになると考えています。
Service Workerも設計によって役割が変わる
Service Workerは、
キャッシュやオフライン対応を担当します。
1S1Aでは、
サイト全体を一つのアプリとして管理するため、
サイト全体を対象にキャッシュを設計することが多くなります。
一方、
1P1Aでは、
ページごとに独立したアプリとして考えるため、
必要なページだけを対象にキャッシュ戦略を考えることもできます。
つまり、
Service Workerも、
どのようなPWAを作るかによって役割が変わってきます。
どちらが優れているわけではない
ここで誤解してほしくないのは、
1S1Aと1P1Aは競合するものではありません。
どちらもPWAです。
違うのは、
何を一つのアプリと考えるか。
企業サイトやポータルサイトなら1S1A。
商品ページやブログ記事、Webツールなど、
ページそのものに価値があるサイトなら1P1A。
目的によって最適な設計は変わります。
もっとも簡単なPWA実装方法
ここまで読んで、
「結局どうやって実装するの？」
と思った方もいるかもしれません。
数年前までPWAを導入するには、
- manifest.jsonを作成
- アイコン画像を用意
- apple-touch-iconを設定
- Service Workerを書く
- HTTPS対応
など、ある程度の知識が必要でした。
しかし現在では、もっと簡単に導入できる方法があります。
WordPressならプラグインがもっとも簡単
WordPressを利用しているなら、
PWAプラグインを導入するのがもっとも簡単です。
例えば OJapp PWA Marketing では、
- 投稿
- 固定ページ
- WooCommerceの商品ページ
に対して、
ページごとのWeb App Manifestを自動生成します。
さらに、
- ホーム画面アイコン
- ホーム画面名
- apple-touch-icon
なども自動生成されるため、
PWAの専門知識がなくても導入できます。
記事を書いて公開するだけで、
ホーム画面へ追加できるページを作ることができます。
当サイトでも、WordPressプラグイン OJapp PWAマーケティングを導入しています。
このページをホーム画面に追加すると、実際の挙動をお試しいただけます。
OJapp PWA Marketingの公式ページはこちらから
WordPress以外なら1行で実装できる
最近では、
WordPress以外のWebサイトでも、
1行のJavaScriptを追加するだけでPWAを導入できる方法が登場しています。
例えば、
<script src="https://ojapp.app/js/ojapp_1p1a.js"></script>
これだけで、
Web App Manifestが動的に生成され、
ホーム画面へ追加できるWebサイトになります。
必要に応じて、
<meta name="ojapp:title" content="ページタイトル">
<meta name="ojapp:icon" content="https://example.com/icon.png">
のようにページごとのタイトルやアイコンも指定できます。
つまり、
従来のようにページごとにmanifest.jsonを管理する必要がありません。
One Page.One App.の公式ページはこちらから
昔はPWAというと、
「難しい技術」
という印象がありました。
しかし現在では、
WordPressならプラグイン、
それ以外のサイトでも1行のスクリプトで実装できる時代になっています。
だからこそ、
これから重要なのは
「PWAを導入するか」ではなく、「どう設計するか」
だと私は考えています。
PWAは「導入するか」ではなく「どう設計するか」
昔は、
「PWAを導入するべきか」
という議論が中心でした。
しかし現在は、
ホーム画面へ追加すること自体は難しい技術ではありません。
これから重要になるのは、
どのようなManifestを設計するのか。
サイト全体を一つのアプリにするのか。
ページごとを独立したアプリにするのか。
その設計によって、
ユーザー体験は大きく変わります。
まとめ
PWAとは、
Webサイトをホーム画面へ追加し、
アプリのような体験を提供できる技術です。
その中心となるのが、
Web App Manifestです。
そしてManifestを設計する段階では、
- 1S1A（One Site. One App.）
- 1P1A（One Page. One App.）
という2つの考え方があります。
どちらが正しいということではなく、
サイトの目的に合わせて選択することが重要です。
PWAは、単なる「ホーム画面へ追加する技術」から、
Webサイトの設計そのものを考える技術へ進化し始めています。
さらにPWAについて知りたい方へ
PWAには、ホーム画面へ追加するだけではなく、設計や実装方法にもさまざまな考え方があります。
興味があれば、こちらの記事も参考にしてみてください。
- 基本・設計思想
- WordPressで始める
- WordPressのPWAプラグインで何が変わる？導入するメリットと活用例を解説
- OJapp PWA Marketingの使い方
- 実践・検証
WPプラグイン[OJapp PWA Marketing]リリース！
