在 iOS 建立 web app 並設定 icon

標籤: iOS Web App

如果沒有製作 app,但又希望使用者可以快速開啟自己的網頁的話,iOS 可以將 web 的捷徑加到桌面,再加上設定好 PWA 的 manifestService Worker,就可以讓我們的網頁開啟來跟 app 很像了,這邊來設定一下。

首先製作一個 web app 的 icon,大小為 180x180,然後在網頁的 meta 加上這段:

<link rel="apple-touch-icon" href="/custom_icon.png">

如果要設定多種尺寸的話可以參考以下的 meta 資料:

<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">

設定 web app 開啟時的畫面:

<link rel="apple-touch-startup-image" href="/launch.png">

設定 app 的標題

<meta name="apple-mobile-web-app-title" content="AppTitle">

 

設定是否隱藏 safari 的 UI

<meta name="apple-mobile-web-app-capable" content="yes">

 

自訂狀態列的顏色

 
<meta name="apple-mobile-web-app-status-bar-style" content="black">

 

接下來我們在要加到桌面的網站按分享,選擇加入主畫面

這邊會看到我們設定的 icon

完成

實際網站可以看 Pokémon-Info

更多資料可以看 Safari Web Content Guide