📱
【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">
Discussion