如果沒有製作 app,但又希望使用者可以快速開啟自己的網頁的話,iOS 可以將 web 的捷徑加到桌面,再加上設定好 PWA 的 manifest 與 Service 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