Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8813

iOS / Web版Twitterの指定したページへのリンクをホーム画面に追加する

$
0
0

TL;DR

Web版Twitterをホーム画面に追加する
-> PWAになり追加時のURLが反映されない

別のページを経由して開けば解決
-> dataスキーム

data URI scheme

  • dataスキーム
  • 外部リソースと同じようにデータを読み込む方法
  • アドレスバーに入力する

iOSの「ホーム画面に追加」は後からURLを書き換えられない
-> 追加時用のTwitterを開かないパターンが必要
-> 端末がネットに繋がっているかで条件分岐(他にも方法はあると思う)

data:text/html,
<script>
if (navigator.onLine)
  location.href='開くURL'
</script>

実際の手順

  1. 上記のdataスキームの「開くURL」部分を変更
  2. オフラインの状態でブラウザのアドレスバーに入力
  3. ホーム画面に追加

問題点

ホーム画面に表示されるアイコンが真っ白なので複数追加すると分かりにくい

↓↓↓

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

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

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

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

以上


Viewing all articles
Browse latest Browse all 8813

Trending Articles