OJapp Tips
ツール開発者が書く Web のノウハウ集
ホーム画面に追加したページと違うページが開く原因は?PWAのstart_urlを解説
iPhoneで見ていたページをホーム画面に追加したのに、トップページなど別のページが開く原因を解説。Xのプロフィールを例に、ユーザー側の対処法とPWAのstart_urlを設定する制作者側の対策を紹介します。
Androidで「ホーム画面に追加」「インストール」が出ない原因と対処法【2026年】
AndroidのChromeで「ホーム画面に追加」や「インストール」が出ない原因を解説。ショートカットとの違い、PWA・Manifest・HTTPS・アイコン設定、追加後の起動先がおかしい場合まで順番に確認します。
iPhone iOS27のPWAでwindow.print()が動かない?Safariと実機で比較検証してみた
iOS 27のiPhoneでwindow.print()を実機検証。Safariでは印刷できるのに、ホーム画面から起動したPWAでは反応なし。beforeprint、afterprint、matchMedia('print')まで確認して、どこで止まっているのかを切り分けました。
PWAは同じドメインから複数インストールできる?id・scope・start_urlの関係
PWAは同じドメインから1つしかインストールできないのでしょうか。id・scope・start_urlの役割と、1S1A・1G1A・1P1A、さらにURLの状態をユーザーが決めるUDAまで、複数のホーム画面入口を作る設計を整理します。
ホーム画面に追加したPWAの起動URLは変更できる?違うページが開く時の直し方
ホーム画面に追加したWebサイトやPWAを開くと、保存したページではなくトップページが表示されることがあります。起動URLはあとから変更できるのか、追加し直しても直らない理由、start_urlとの関係、ブックマークとの使い分けを解説します。
iOS 27のPWA上部ブラーを消せる?ハンバーガーメニューから見つけた回避策
iOS 27でPWAをホーム画面から開くと上部に広いブラーが表示されることがあります。CSSやmetaでは消せなかった表示が、ハンバーガーメニューの開閉で消えることを発見。固定パネルを使って再現した実機検証と回避策を紹介します。
PWAが流行らない理由はstart_url:"/"にある?「サイトをアプリ化」という固定観念
PWAのstart_urlに「/」を指定する設計は本当に最適なのでしょうか。サイト全体を1つのアプリにする利点と、ユーザーが追加したページではなくトップへ戻されるデメリットを整理し、1P1Aという別の設計も含めて考えます。
ECサイトをPWAにするメリットは?商品ページをホーム画面に置くという考え方
ECサイトをPWAにするメリットを解説。ショップ全体をアプリ化するだけでなく、気になる商品ページそのものを専用アイコンでホーム画面に残せば、検索やSNSを経由せず商品へ戻れる再訪導線を作れます。
manifest.jsonだけでPWAは作れる?Service Workerなしでどこまでできるか検証
Service Workerなし、Web App ManifestだけでPWAはどこまで作れる?2026年のChromeと実機検証をもとに、ホーム画面へのインストール、アイコン、standalone表示、start_urlと、できないことを整理します。
PWAにService Workerは必須?2026年のChromeで実際に確認してみた
「PWAにはService Workerが必須」と今でも思っていませんか?2026年現在のChromeでは、Service WorkerなしでもPWAのインストールは可能です。PWA LABでの実機検証と現在のMDNの記述をもとに、Service Workerが本当に必要な場面を整理します。
PWAに向いているサイト・向いていないサイトは?用途別に考えてみる
PWAはどんなサイトに向いている?ブログ、EC、Webツール、会員サイト、店舗サイトなど用途別に整理。重要なのはサイトの種類ではなく、ユーザーがそのURLへもう一度戻る理由があるかどうかです。
PWAのmanifest idとは?省略するとどうなる?複数インストールとの関係
Web App Manifestのidは何のためにある?省略時はstart_urlが識別子として使われる仕組みや、同じサイトに複数PWAを作る場合の注意点を、1P1Aの実験も交えて解説します。
PWAのmanifest.jsonはどこまで書けばいい?最低限・推奨・用途別で整理
PWAのmanifest.jsonには何をどこまで書けばいい?2026年現在のPWAを、まず用意したい基本項目、設計に応じて追加するid・scope、screenshotsやshortcutsなどの拡張項目に分けて整理します。
PWAのscopeとは?設定すると何が変わるのかiPhone・Androidで比較
PWAのmanifestにあるscopeは何を決める設定?scope:"/"やディレクトリ指定、scopeなしを比較し、Androidでのアプリ範囲とiPhoneでの表示の違いをPWA LABの実機検証から解説します。
PWAのscreenshotsは何のため?Chromeのインストール画面を強化する方法
Web App Manifestのscreenshotsは何に使う?PWAの機能画面や特徴を画像で伝え、対応環境のインストールUIを充実させる方法を解説。Android Chromeでの表示やform_factor、labelの指定方法も紹介します。