iOS - PWA対応サイトの指定ページへのリンクをホーム画面に追加する方法

1 min read読了の目安(約1000字

前提

iOS で PWA に対応しているページを「ホーム画面に追加」する際、指定したページへの直接のリンクはホーム画面に追加できない。
また、「ホーム画面に追加」は後から URL を書き換えられない。

PWA 対応サイト例

https://mobile.twitter.com

方法

※ Web 版「Twitter」のプロフィールを表示するサンプルで試しました。

1. アプリ「ショートカット」を経由する

https://apps.apple.com/jp/app/ショートカット/id1462947752

手順

  1. アクション「URLを開く」にリンクを記述
  2. 詳細「ホーム画面に追加」を選択

問題点

  • 開くページのアプリ版をインストールしている場合、アプリ版が開く

2. 「data URI scheme」を経由する

https://ja.wikipedia.org/wiki/Data_URI_scheme

手順

  1. 端末がネットに繋がっていない状態でブラウザのアドレスバーに下記の内容を入力
data:text/html,
<script>
if (navigator.onLine) {
  location.href = '開くURL'
}
</script>
  1. 開かれたページで「ホーム画面に追加」を行う

解説

端末がネットに繋がっている場合、指定したページに遷移するページをホーム画面に追加しています。
遷移の条件は、追加時に経由用のページ上で「ホーム画面に追加」を行うために設定しています。

問題点

  • ホーム画面に表示されるアイコンが真っ白なので分かりにくい

改善案

1. ページに背景色を設定する

<style>
  html {background:}
</style>

2. アイコンの画像を設定する

<link rel="apple-touch-icon-precomposed" href="画像のURL">

end