iOS - PWA対応サイトの指定ページへのリンクをホーム画面に追加する方法
前提
iOS で PWA に対応しているページを「ホーム画面に追加」する際、指定したページへの直接のリンクはホーム画面に追加できない。
また、「ホーム画面に追加」は後から URL を書き換えられない。
PWA 対応サイト例
方法
※ Web 版「Twitter」のプロフィールを表示するサンプルで試しました。
1. アプリ「ショートカット」を経由する
手順
- アクション「URLを開く」にリンクを記述
- 詳細「ホーム画面に追加」を選択
問題点
- 開くページのアプリ版をインストールしている場合、アプリ版が開く
2. 「data URI scheme」を経由する
手順
- 端末がネットに繋がっていない状態でブラウザのアドレスバーに下記の内容を入力
data:text/html,
<script>
if (navigator.onLine) {
location.href = '開くURL'
}
</script>
- 開かれたページで「ホーム画面に追加」を行う
解説
端末がネットに繋がっている場合、指定したページに遷移するページをホーム画面に追加しています。
遷移の条件は、追加時に経由用のページ上で「ホーム画面に追加」を行うために設定しています。
問題点
- ホーム画面に表示されるアイコンが真っ白なので分かりにくい
改善案
1. ページに背景色を設定する
<style>
html {background: 色}
</style>
2. アイコンの画像を設定する
<link rel="apple-touch-icon-precomposed" href="画像のURL">
end