Safari配置WebApp----添加啓動圖和桌面圖標讓你的WebApp在ios設備上體驗如原生同樣

如今不少開發者的Web應用程序的設計樣式和交互相似本機應用程序，例如，它的縮放比例適合iOS上的整個屏幕。當用戶將其添加到主屏幕時，您能夠經過使其看起來像本機應用程序同樣，在iOS上爲您的Web應用程序定製Safari。您可使用其餘平臺忽略的iOS設置來執行此操做。

例如，您能夠爲添加到iOS主屏幕時用於表示Web應用程序的圖標指定圖標，如指定Web Clip的網頁圖標所述。當您的Web應用程序從主屏幕啓動時，您還能夠最小化iOS用戶界面上的Safari，如更改狀態欄外觀和隱藏Safari用戶界面組件（搜索欄及工具欄）。這些都是可選設置，添加到您的網頁內容時會被其餘平臺忽略。

閱讀Web應用程序的「視口設置」，瞭解如何在iOS上設置Web應用程序的視口。

指定Web應用程序的網頁圖標

您可能但願用戶可以將您的Web應用程序或網頁連接添加到ios設備主屏幕。這些由圖標表示的連接稱爲Web剪輯。遵循這些簡單的步驟來指定一個圖標來表示您的iOS應用程序或網頁。

要爲整個網站（網站上的每一個頁面）指定一個圖標，請將一個圖標文件以PNG格式放置在名爲root的文檔文件夾 apple-touch-icon.png
要爲單個網頁指定一個圖標或者將網站圖標替換爲網頁特定的圖標，請向該網頁添加一個連接元素，以下所示：

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

在上面的例子中，custom_icon.png用你的圖標文件名替換。
要爲不一樣的設備分辨率指定多個圖標（例如，同時支持iPhone和iPad設備），請sizes按如下方式爲每一個連接元素添加一個屬性：

<link rel =「apple-touch-icon」href =「touch-icon-iphone.png」>
<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」>

使用最適合設備的圖標。有關當前圖標大小和建議，請參閱iOS人機界面指南的「圖形」一章。
若是沒有與設備的建議尺寸相匹配的圖標，則會使用大於推薦尺寸的最小圖標。若是沒有大於推薦尺寸的圖標，則使用最大的圖標。

若是沒有使用連接元素指定圖標，則會在網站根目錄中搜索帶有apple-touch-icon...前綴的圖標。例如，若是設備的適當圖標大小爲58 x 58，系統將按如下順序搜索文件名：

1. apple-touch-icon-80x80.png
2. apple-touch-icon.png

注意： iOS 7上的Safari不會爲圖標添加效果。老版本的Safari不會爲使用-precomposed.png後綴命名的圖標文件添加效果。有關詳細信息，請參閱第一步：在iTunes Connect中識別您的應用程序。

• 指定啓動屏幕圖像

在iOS上，與原生應用程序相似，您能夠指定在Web應用程序啓動時顯示的啓動屏幕圖像。當您的Web應用程序處於脫機狀態時，這很是有用。默認狀況下，使用上次啓動時的Web應用程序屏幕截圖。要設置另外一個啓動圖像，請在網頁中添加一個連接元素，以下所示：

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

在上面的例子中，launch.png用你的啓動屏幕文件名替換。有關當前的啓動屏幕大小和建議，請參閱iOS人機界面指南的「圖形」一章。

添加啓動圖標標題

在iOS上，您能夠爲啓動圖標指定一個Web應用程序標題。默認狀況下，使用<title>標籤。要設置不一樣的標題，請在網頁中添加元標記，以下所示：

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

在上面的例子中，替換AppTitle你的標題。

隱藏Safari用戶界面組件

在iOS上，做爲優化您的Web應用程序的一部分，讓它使用獨立模式更像本地應用程序。當您使用此獨立模式時，Safari不會用於顯示Web內容 - 具體來講，屏幕頂部沒有瀏覽器URL文本字段，或者屏幕底部沒有按鈕欄。只有一個狀態欄出如今屏幕的頂部。閱讀更改狀態欄外觀以瞭解如何最小化狀態欄。

將apple-mobile-web-app-capable元標記設置yes爲打開獨立模式。例如，如下HTML將使用獨立模式顯示Web內容。

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

您可使用window.navigator.standalone只讀布爾JavaScript屬性肯定網頁是否以獨立模式顯示。有關獨立模式的更多信息，請參閱apple-mobile-web-app-capable。

更改狀態欄的外觀

若是您的Web應用程序以獨立模式顯示，如本機應用程序，則能夠最小化iOS上屏幕頂部顯示的狀態欄。這樣作使用狀態欄式元標記。

除非您首先指定了隱藏Safari用戶界面組件中所述的獨立模式，不然此元標記將不起做用。而後使用狀態欄樣式meta標籤apple-mobile-web-app-status-bar-style來根據您的應用程序須要更改狀態欄的外觀。例如，若是要使用整個屏幕，請將狀態欄樣式設置爲半透明黑色。

例如，下面的HTML將狀態欄的背景顏色設置爲黑色：

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

有關狀態欄外觀的更多信息，請參閱iOS人機界面指南的「UI欄」一章。

連接到其餘原生應用程序

您的Web應用程序能夠經過建立具備特殊URL的連接來連接到其餘內置的iOS應用程序。可用的功能包括撥打電話號碼，發送短信或iMessage，並在其本機應用程序（若是已安裝）中打開YouTube視頻。例如，要連接到電話號碼，請按如下格式構造一個錨點元素：

<a href="tel:1-408-555-5555">給我打電話</a>

有關這些功能的完整視圖，請參閱Apple URL Scheme Reference。

這是我在項目index.html上添加的代碼：

<!-- Specifying a Webpage Icon for Web Clip for Safari -->
<link rel="apple-touch-icon" href="assets/imgs/logo.png">
<!-- Specifying a Launch Screen Image for Safari -->
<link rel="apple-touch-startup-image" href="assets/imgs/splash.png">
<!-- Hiding Safari User Interface Components -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Changing the Status Bar Appearance -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

實際體驗以下圖所示：

能夠看到用戶添加到主屏幕後，有了自定義的圖標及啓動圖，打開webapp後也不會有safari的地址欄和工具欄，體驗跟原生同樣。由於我使用iphone自帶的屏幕錄製功能，因此頂部狀態欄背景被佔用，實際體驗啓動圖是全屏的。