start_url: “.” が最強説｜PWAで“入れたページに戻る”を成立させる考え方

PWAのmanifest.jsonには、start_urlという項目があります。

これは、ホーム画面に追加したPWAを開いたときに、最初に表示するURLを指定するものです。

普通に考えると、"/lab"や"/app"のように固定URLを書きたくなります。

でも、PWA LABでいろいろ試していて、個人的にはこう思いました。

特別な理由がないなら、start_url は "." が一番自然かもしれない。

start_url とは何か

start_urlは、PWAをホーム画面から起動したときに開くURLです。

例えばmanifest.jsonにこう書いた場合、

"start_url": "/lab"

ホーム画面のアイコンから開くと、基本的には/labが表示されます。

これは分かりやすいです。

トップページや固定アプリなら、これで問題ありません。

でも、PWAにはもう少しややこしいケースがあります。

問題は「ユーザーが入れたページ」と「起動時に戻るページ」がズレること

例えば、ユーザーが/lab/app/demoというページを見ていたとします。

そのページが気に入って、ホーム画面に追加した。

このときユーザーの感覚としては、「今見ているこのページ」をホーム画面に置いたつもりです。

でもmanifest側でstart_url: "/lab"と固定していた場合、ホーム画面アイコンから開いたときに/labへ戻されます。

これは技術的には正しいかもしれません。

でも、ユーザー体験としては少しズレます。

ユーザーは「このページを入れたかった」のに、別の入口へ戻されるからです。

そこで start_url: “.” が効いてくる

start_url: "."は、相対的な開始位置を指定する考え方です。

ざっくり言うと、固定のトップページへ戻すのではなく、そのPWAが置かれた文脈に近い場所から起動しやすくなります。

PWA LABで試していて感じたのは、複数の実験ページやトークン付きページを扱うなら、固定URLより"."の方が自然な場面が多いということです。

特に、「このページをホーム画面に追加して使う」という体験では、start_urlを固定しすぎると違和感が出ます。

/lab 固定が悪いわけではない

もちろん、start_url: "/lab"が悪いわけではありません。

例えば、PWA LABのトップだけをアプリ化したいなら、/lab固定でも分かりやすいです。

ニュースアプリ、管理画面、ツールのトップページなど、必ず同じ入口から始めたい場合も固定URLでいいです。

ただし、ページごとに意味があるPWAでは話が変わります。

ユーザーが見ているページそのものをホーム画面に置きたい場合、固定URLは少し強すぎます。

OJapp的には「入れたページに戻る」がかなり大事

OJappは、URLをスマホのホーム画面へ置くことを重視しています。

ただWebサイトをアプリ風にするというより、「そのURLを入口にする」感覚です。

だから、ユーザーがあるページをホーム画面に追加したなら、次に開いたときもそのページに戻る方が自然です。

これは、普通のアプリとは少し違う考え方です。

アプリはだいたいトップ画面から始まります。

でもWebは、本来どのページも入口になれます。

PWAでもそのWebらしさを残すなら、start_url: "."はかなり相性がいいと感じました。

Petalの名刺ページにも近い考え方

Petalのように、人の名刺ページをホーム画面に置く場合も同じです。

ユーザーが置きたいのは、Petal全体のトップではありません。

誰かの名刺、誰かのページ、誰かへの入口です。

もしホーム画面に追加したのに、起動したら毎回サービスのトップへ戻されたら、かなり違和感があります。

「人をホーム画面に置く」という体験では、入れたページに戻ること自体が重要になります。

この考え方は、PWAの技術設定というより、ホーム画面UXの話に近いです。

実験して分かったこと：PWAはパスとscopeがややこしい

PWA LABでハマったのは、start_urlだけではありません。

Service Workerのパス、manifestのscope、末尾スラッシュ、相対パス。

このあたりが絡むと、思ったより簡単に壊れます。

例えば、URLの末尾に/が付いている状態で、そこに/sw.jsを足すと、//sw.jsのような変なパスになることがあります。

こういう小さなズレで、Service Workerが登録されなかったり、キャッシュ対象がズレたりします。

だからPWAでは、「どのURLを基準にするか」がかなり大事です。

start_url: "."は、その基準を固定しすぎないという意味でも扱いやすいです。

start_url: “.” が向いているケース

start_url: "."が向いているのは、次のようなケースです。

• ユーザーが見ているページをそのままホーム画面に置きたい
• 複数の下層ページをPWA的に扱いたい
• トークン付きページや個別ページを入口にしたい
• トップページへ強制的に戻したくない
• Webらしい「どのページも入口」を残したい

逆に、必ずアプリのトップから始めたいサービスなら、固定URLの方が分かりやすいです。

つまり、どちらが正解というより、「そのPWAをどう使わせたいか」で決めるのが大事です。

固定URLが向いているケース

固定URLが向いているのは、次のようなケースです。

• トップ画面から始まるアプリにしたい
• ログイン画面やダッシュボードに必ず戻したい
• ページごとの個別性があまりない
• ユーザー導線を1つに揃えたい
• 管理画面や業務ツールのように入口を固定したい

この場合は、start_url: "/app"やstart_url: "/dashboard"のように明示した方がいいです。

ただ、ホーム画面に追加したページへ戻ることを重視するなら、固定URLは慎重に使った方がいいです。

iPhoneとAndroidで感じ方も変わる

PWA LABを作っていて改めて感じたのは、Android ChromeとiPhone Safariの違いです。

Androidはmanifestの設定が比較的見えやすく反映されます。

display、theme_color、orientationなども、試すと違いが分かりやすいです。

一方で、iPhone SafariはPWAというよりWebClipに近い感覚も残っています。

ホーム画面追加はできますが、Androidのようなインストール体験とは違います。

だからこそ、start_urlのような基本設定も、実機で試さないと感覚がつかみにくいです。

結論：ページを入口にするなら start_url: “.” はかなり強い

PWAを普通のアプリのように作るなら、start_urlを固定しても問題ありません。

でも、Webページをそのままホーム画面の入口にしたいなら、start_url: "."はかなり自然です。

ユーザーが入れたページに戻る。

トップへ強制的に戻さない。

URLごとの意味を残す。

この考え方は、OJappやPetalのような「ホーム画面に入口を置く」サービスとかなり相性がいいです。

関連記事

PWAの基本から知りたい場合は、PWAとは？スマホのWebサイトを“アプリ化”する仕組みをわかりやすく解説が参考になります。

manifest.jsonやService Workerを含めた作り方は、PWAの作り方｜manifest.json・Service Worker・ホーム画面対応を丁寧に解説でまとめています。

iPhone側の違いも気になる場合は、PWAとWebClipの違いとは？iPhoneではどっちを使うべきかも近い内容です。

まとめ

start_urlは、PWAを起動したときの入口を決める重要な設定です。

トップに戻したいなら固定URL。

ユーザーが入れたページへ戻したいなら"."。

この違いを意識するだけで、PWAのホーム画面体験はかなり変わります。

PWAはmanifestの書き方だけでなく、「ユーザーが何をホーム画面に置いたと思っているか」を考えるのが大事です。

その意味で、start_url: "."はかなり強い選択肢だと思います。