当サイト、オリジナルWordPressプラグイン「OJapp PWA Marketing」を使用しています。
各記事は専用アイコンでホーム画面に追加できます。ぜひお試しください。
PWA（Progressive Web Apps）は一般的に、
「Webサイトをアプリ化する技術」
として紹介されます。
しかし、実際にPWAを設計・検証していくと、大きく2つの思想に分かれることに気付きました。
私はこれを、
- 1S1A（One Site. One App.）
- 1P1A（One Page. One App.）
と呼んでいます。
これは機能の違いではなく、PWAをどう設計するかという思想の違いです。
1S1A（One Site. One App.）
従来のPWAのほとんどは、この設計思想です。
目的は、
サイト全体を一つのアプリとして扱うこと。
例えば、
/
├ article1
├ article2
├ contact
└ products
どのページからホーム画面へ追加しても、
起動すると
/
へ戻ります。
つまり、
トップページがアプリの入口になります。
これは、
- ポータルサイト
- 企業サイト
- ECサイト
- SaaS
など、
「まずトップへ集めたい」
サービスには非常に向いています。
なぜトップへ戻るのか
理由はシンプルです。
PWAは通常、
{
"start_url": "/"
}
という構成になります。
つまりホーム画面のアイコンは、
「サイト全体」
を表しています。
だから、
どの記事からホーム画面へ追加しても、
起動するとトップへ戻ります。
これが
One Site. One App.
という考え方です。
しかし問題もあります
例えば、
- 電卓
- レシピ
- 商品ページ
- プロフィール
- ブログ記事
など、
「このページだけをホーム画面へ置きたい」
というケースがあります。
ところが1S1Aでは、
ホーム画面へ追加しても
結局トップへ戻ってしまいます。
つまり、
ページ単体を独立したアプリとして扱うことができません。
そこで生まれたのが1P1A
発想を逆転させます。
サイトをアプリ化するのではなく、
ページをアプリ化する。
例えば、
/
├ tool-a
├ tool-b
├ recipe
└ article
これらすべてが、
それぞれ独立したアプリになります。
ホーム画面には、
- Tool A
- Recipe
- Article
という別々のアイコンが並び、
起動するとそのページが直接開きます。
これが
One Page. One App.
という考え方です。
Web本来の思想に近い
Webは昔から、
1URL = 1コンテンツ
という考え方で成り立っています。
検索エンジンも、
SNSも、
ブックマークも、
すべてページ単位です。
1P1Aは、
そのページ単位という考え方を、
ホーム画面へ持ってきた設計思想と言えます。
なぜ両立できないのか
ここが最も重要です。
「トップもアプリにして、各ページも全部アプリにすればいい。」
そう思うかもしれません。
しかし、
現在のPWAでは、
それは基本的に両立できません。
理由は、
同一オリジン内での scope と start_url の管理構造にあります。
例えばトップページに
/manifest.json
を配置し、
{
"scope": "/"
}
と設定すると、
配下のページはすべて
トップアプリの管理下
になります。
つまり、
ページごとの独立性が失われます。
私はこの状態を、
「スコープの支配」
と呼んでいます。
トップページのPWAが、
配下すべてを飲み込んでしまう状態です。
だから1P1Aではトップを捨てる
1P1Aでは、
逆にトップページへmanifestを置きません。
親ページにも置きません。
末端ページだけをアプリ化します。
その結果、
各ページは互いに独立したアプリとして存在できます。
つまり、
トップページ（またはハブページ）をアプリ化しない代わりに、全ページを独立したアプリにする。
これが1P1Aの設計思想です。
これは技術不足ではない
ここは誤解されやすいポイントです。
1S1Aではページアプリは作れません。
1P1Aではトップアプリは作れません。
これは、
どちらかの実装が未熟だからではありません。
PWAという仕組みそのものが持つ設計上のトレードオフです。
サイト全体を一つのアプリとしてまとめるか。
それとも、
ページごとに独立したアプリとして扱うか。
両方を完全に成立させることはできません。
だからこそ、
最初に設計思想を決める必要があります。
どちらを選ぶべきなのか
どちらが優れているという話ではありません。
目的が違います。
1S1A（One Site. One App.）
- ポータルサイト
- 企業サイト
- 大規模EC
- サービス全体を入口にしたいサイト
1P1A（One Page. One App.）
- Webツール
- ブログ
- Webマガジン
- 商品ページ
- プロフィールページ
- 個別コンテンツが主役のサイト
サイトによって、
最適な設計思想は変わります。
PWAは二極化していく
これまでPWAは、
「サイトをアプリ化する技術」
として語られてきました。
しかし私は、
これからは
トップへ還る1S1A
と、
ページが独立する1P1A
という二つの設計思想へ分かれていくと考えています。
どちらが正しいかではありません。
重要なのは、
あなたのWebサイトは、どちらの思想で設計するべきか。
その選択肢が生まれたことこそ、
PWAの次の進化なのだと思います。
WPプラグイン[OJapp PWA Marketing]リリース！
