title: WebClip完成IOS的Wap封裝
tags: WebClip,IOS
author: Clown95
背景
當我們使用PC頻繁訪問某一個網站的時候，大部分人的做法是創建一個書籤或者直接創建一個快捷方式。但是我們在使用移動設備的時候，好像並沒有創建桌面快捷方式這麼一個功能，是不是隻能使用書籤來訪問呢？
又或者我們想要把我們的wap站點封裝成IOS應用，直接使用IOS原生封裝開發成本上升，使用第三方應用封裝，基本上通過不了AppStore的審覈，只能使用企業簽名才能讓用戶使用APP，這無疑使成本又增加，而且第三方提供的企業簽名經常不穩定，導致軟件無法使用造成用戶流失。
IOS爲我們提供了WebClip的一個描述文件，它可以把我們的網站創建成桌面快捷方式，並且可以自定義圖標，幫我們省去打開瀏覽器的步驟，當然值得注意的是它只能調用Safari打開網頁。
Tip: 現在簽名市場上說的永不掉籤封裝，用的就是這個方法。
步驟
生成WebClip
前提條件是你有一個Mac或者你有一個Mac系統，然後通過Appstore下載Apple Configurator 2，這個是蘋果官方提供的描述文件創建工具。
- 首先我們創建一個新的描述文件
- 我們先選擇
通用選項，來設置描述文件的一些基本信息
- 名稱爲：描述文件設置名字，這個名字並不是快捷方式顯示的名字
- 標識符：我們直接使用默認就行，這個相當於軟件的身份證
- 組織：描述文件創建者，或者網址擁有者
- 描述：安裝描述文件時候顯示的介紹信息
- 我們鼠標滾到最下面，找到
WebClip選項，這邊纔是我們的重頭戲
- 標籤： 這個纔是桌面顯示的名稱
- URL：這個填寫我們需要創建快捷方式網站的地址
- 可移除：選中它，我們就可以像刪除應用一樣在桌面刪除它
- 圖標：在桌面上顯示的圖標
- 全屏幕：網站是否全屏顯示，如果不勾選將會出現狀態欄，我們最好還是勾選下
- 設置完成我們保存描述文件，把它放到網站上，使他能夠訪問下載，值得注意的是，我們只能通過Safari瀏覽器來訪問它，否則安裝不了。
解決WebClip自動跳轉Safari問題
如果你開始使用剛剛製作的描述文件，你是不是發現了一個很嚴重的問題？當網站跳轉的時候，會自動打開Safari跳轉網站，並且會丟失之前的動作，比如說登錄狀態，用戶體驗極差。
現在我們就來解決這個問題：
將下面代碼複製到每個網頁的＜head ＞標籤中，請務必確保所有網頁均寫有此代碼。
<script>if(("standalone" in window.navigator) && window.navigator.standalone){
var noddy, remotes = false;
document.addEventListener('click', function(event) {
noddy = event.target;
while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
noddy = noddy.parentNode;
}
if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes)){
event.preventDefault();
document.location.href = noddy.href;
}
},false);
}</script>
Tip :使用此代碼籤請自行測試網站功能的完好性。
Q：代碼有什麼作用？
A ：此段代碼主要是阻止網頁喚起Iphone手機Safari瀏覽器
Q：添加代碼後描述文件需要重新生成嗎？
A ：不需要生成
Q ：代碼會對網站安全產生影響嗎？
A ：不影響，代碼只是單純的阻止喚起瀏覽器。