📱

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

2021/04/07に公開

前提

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

GitHubで編集を提案

Discussion

ログインするとコメントできます