当サイト、オリジナルWordPressプラグイン「OJapp PWA Marketing」を使用しています。
各記事は専用アイコンでホーム画面に追加できます。ぜひお試しください。
Webサイトを見ていて、「このページまた使うからホーム画面に置いておこう」と思うことがあります。
ところが、ホーム画面に追加したアイコンを後から開いてみると、保存したはずのページではなくサイトのトップページが表示される。
いや、そこじゃないんだけど。
商品ページを保存したかったのにショップのトップが開いたり、記事を保存したかったのにブログのトップへ戻されたりすると、普通に困ります。
では、ホーム画面に追加した後から「このアイコンは別のURLを開くようにしたい」と起動URLを変更できるのでしょうか。
結論から言うと、PWAとして追加されたホーム画面アイコンの起動URLを、ユーザーが後から自由に書き換えるような使い方は基本的にできません。
まず試したいのは、一度削除して目的のページから追加し直すことです。それでも違うページが開くなら、サイト側のPWA設計が関係している可能性があります。
- 1 まずは一度削除して正しいページから追加し直す
- 2 追加し直したのに、またトップページが開く
- 3 ホーム画面から開くURLはstart_urlで指定できる
- 4 なぜサイト側はトップページを開くようにするの？
- 5 「このページを保存した」のに違う場所が開く
- 6 ページをそのまま入口にする設計もできる
- 7 追加済みのアイコンからURLだけ変更するのは難しい
- 8 削除して追加し直しても直らないなら？
- 9 そのページを残したいだけならブックマークでいい
- 10 PWAとブックマークは似ているけど同じではない
- 11 開発者側は「何を保存したと思うか」を考えたい
- 12 違うページが開く時はこの順番で確認する
- 13 ホーム画面のアイコンは「保存したページ」とは限らない
まずは一度削除して正しいページから追加し直す
単純に違うページをホーム画面へ追加してしまっただけなら、対処は簡単です。
- ホーム画面からそのアイコンを削除する
- ブラウザで本当に保存したいページを開く
- そのページからもう一度ホーム画面へ追加する
例えば保存したいURLが、
https://example.com/products/coffee/なら、その商品ページをブラウザで開いた状態から追加し直します。
これで目的のページが開くようになるなら、それで解決です。
追加し直したのに、またトップページが開く
ややこしいのはここからです。
目的のページを開いて、そこからホーム画面へ追加した。
それなのにアイコンをタップすると、またトップページが開く。
商品ページを開く
↓
ホーム画面に追加
↓
アイコンをタップ
↓
なぜかトップページこの場合、ユーザーが保存するページを間違えたとは限りません。
PWAには、ホーム画面から起動した時に最初に開くURLを指定するstart_urlという設定があります。
ホーム画面から開くURLはstart_urlで指定できる
Web App Manifestには、start_urlという項目があります。
例えばManifestが次のようになっているとします。
{
"name": "Example App",
"start_url": "/",
"display": "standalone"
}この場合、PWAの起動先としてサイトのルート/が指定されています。
そのためサイト側の構成やブラウザの扱いによっては、個別ページから追加したつもりでも、ホーム画面アイコンから起動すると指定されたトップページへ移動します。
これはホーム画面へ追加したユーザーが後から設定したものではありません。
Webサイト側がManifestで定義しているPWAの起動設計です。
なぜサイト側はトップページを開くようにするの？
start_url: "/"自体が間違っているわけではありません。
サイト全体を1つのアプリとして設計するなら、とても自然な設定です。
例えばSNSやWebメールのように、サービス全体を1つのAppとして利用する場合です。
どのページから追加しても
↓
1つのアプリとして扱う
↓
起動したらサービスのメイン画面へこれは私が1S1A（One Site. One App.）と呼んでいる考え方に近い設計です。
問題になるのは、ユーザーが「今見ているこのページを保存した」と思っている場合です。
「このページを保存した」のに違う場所が開く
ユーザー目線では、PWAのManifestを見ることはほとんどありません。
ブラウザで商品ページを見ているなら、
この商品ページ
↓
ホーム画面に追加
↓
この商品ページが開くと考えるのは自然です。
記事なら記事、予約ページなら予約ページ、Webツールならそのツールが再び開くと思います。
ところがサイト全体を1つのPWAとして設計していて、起動先が固定されていれば、その期待とは違う動きになることがあります。
この違いは、1S1Aと1P1Aの違いを考えると分かりやすくなります。
ページをそのまま入口にする設計もできる
一方、ホーム画面へ追加したページ自体を入口として扱う設計もできます。
私が1P1A（One Page. One App.）で使っている方法の1つが、動的なManifestとstart_url: "."の組み合わせです。
{
"name": "このページの名前",
"start_url": ".",
"display": "standalone"
}.はManifest URLを基準に解決される相対URLなので、単に静的なManifestへ書けば常に「今見ているページ」になるわけではありません。
ページごとに適切な場所から動的Manifestを生成するなど、そのページを起動先として解決できる構成にする必要があります。
OJappの1P1Aでは、この仕組みを利用してページごとの入口を作っています。
start_url: “.” が最強説でも、この設計について実機検証を含めて詳しく紹介しています。
追加済みのアイコンからURLだけ変更するのは難しい
では、すでにホーム画面へ追加したアイコンを長押しして、
名前
アイコン
起動URLのような設定画面を開き、URLだけ編集できるのでしょうか。
PWAとして追加されたホーム画面アイコンでは、一般的なブックマーク編集のように、ユーザーがManifestのstart_urlを書き換えることはできません。
起動先がおかしい場合は、基本的には一度削除して正しい状態から追加し直すことになります。
削除して追加し直しても直らないなら？
ここがこの記事で一番伝えたいところです。
次の手順を試したとします。
ホーム画面アイコンを削除
↓
目的のページをブラウザで開く
↓
そのページからホーム画面へ追加
↓
新しいアイコンを開く
↓
また違うページが開くここまでやって同じなら、何度追加し直しても直らない可能性があります。
サイト側がPWAの起動先を固定しているからです。
ユーザー側でManifestを書き換えることはできないので、そのPWAの仕様として使うことになります。
そのページを残したいだけならブックマークでいい
ではどうするか。
目的が単純に、
このURLを覚えておきたい
このページを後からもう一度開きたいなのであれば、ブラウザのブックマークを使う方法があります。
PWAとブックマークは役割が少し違います。
PWAではサイト側がManifestを使って、名前、アイコン、起動URL、表示モードなどを設計できます。
一方、ブックマークは基本的にユーザーが「このURLを保存する」ための機能です。
サイト側のPWAが自分の保存したい入口と合わないなら、無理にPWAとして使う必要はありません。
そのURLを保存することが目的なら、ブックマークの方が目的に合っている場合があります。
PWAとブックマークは似ているけど同じではない
ホーム画面アイコンを見ると、PWAもブックマークも似たものに感じるかもしれません。
しかし、PWAにはWeb App Manifestによるアプリとしての設計があります。
例えば、
- アプリ名
- アイコン
- 起動URL
- 表示モード
- アプリとして扱う範囲
などをサイト側が定義できます。
だからこそ、ユーザーが見ていたURLとPWAとして設計された入口が一致しないことがあります。
ホーム画面に追加したWebサイトがアプリなのかブックマークなのかについては、ホーム画面に追加したWebサイトはアプリ？ブックマーク？PWAとの違いを解説でも整理しています。
開発者側は「何を保存したと思うか」を考えたい
この問題はユーザーだけでなく、PWAを作る側にも関係します。
例えば商品ページで「ホーム画面に追加」を案内しているのに、追加後のアイコンからトップページが開いたらどうでしょう。
技術的にはManifestの設定通りでも、ユーザーの期待とはズレるかもしれません。
逆にサイト全体を1つのサービスとして使ってほしいなら、トップやダッシュボードを起動先にする方が自然です。
大切なのは、start_urlに何を書くのが正解かではありません。
ユーザーがホーム画面へ追加した時、何を保存したと思うのか。
そこから起動URLを設計することだと思います。
違うページが開く時はこの順番で確認する
ホーム画面に追加したのに目的と違うページが開くなら、まずは次の順番で確認すると分かりやすいです。
- 目的のページをブラウザで開く
- 現在のホーム画面アイコンを削除する
- 目的のページからもう一度ホーム画面へ追加する
- 新しいアイコンを開いて起動先を確認する
- それでも違うページなら、サイト側のPWA起動設定で固定されている可能性を考える
- そのURL自体を残したいだけならブックマークを使う
何度も追加し直して悩む必要はありません。
自分で変更できる問題なのか、サイト側の設計なのかを切り分けるのがポイントです。
ホーム画面のアイコンは「保存したページ」とは限らない
ホーム画面へ追加した時、ユーザーから見ると「今見ているページを保存した」ように感じます。
でもPWAでは、実際の起動先をサイト側がstart_urlで設計できます。
だから、違うページが開いたからといって必ずしも追加操作を間違えたわけではありません。
まず削除して目的のページから追加し直す。
それでも直らなければ、そのサイトのPWA設計を疑う。
そして、そのページそのものを後から開くことが目的ならブックマークを使う。
PWAはサイト側が設計した「アプリの入口」。ブックマークはユーザーが残す「URL」。この違いを知っておくと、「保存したのに違うページが開く」がかなり理解しやすくなります。
GoogleでOJapp Tipsを優先する情報源に追加
今後、Google検索でOJapp Tipsの記事を見つけやすくできます。
たった1行貼るだけで今すぐPWA化【無料】✨ 
