Safari有一個(gè)“添加至屏幕”的功能呐矾，其實(shí)就是在桌面上添加了一個(gè)網(wǎng)頁書簽苔埋，App可以使用這個(gè)功能來實(shí)現(xiàn)創(chuàng)建桌面快捷方式。
一蜒犯、運(yùn)用基本技術(shù)點(diǎn)
1组橄、JavaScript
2、Data URI Schema
3罚随、Socket基本知識(shí)
4玉工、Base64編碼
二、基本原理
? ? ? ?程序內(nèi)部創(chuàng)建一個(gè)簡單的Web站點(diǎn)淘菩，通過這個(gè)站點(diǎn)調(diào)用Safari遵班，站點(diǎn)將自定義的Html頁面返回給Safari，此時(shí)利用Safari的“添加至主屏幕”功能潮改，將自定義的Html制作成桌面書簽狭郑，當(dāng)用戶點(diǎn)擊桌面圖標(biāo)時(shí)，則運(yùn)行自定義的Javascript來進(jìn)行跳轉(zhuǎn)至App汇在。
三翰萨、什么是 data URI scheme？
假設(shè)你有以下的圖像：
A .png
把它在網(wǎng)頁上顯示出來的標(biāo)準(zhǔn)方法是：
這 種取得資料的方法稱為 http URI scheme 糕殉，同樣的效果使用 data URI scheme 可以寫成：
換句話說我們把圖像檔案的內(nèi)容內(nèi)置在 HTML 檔案中亩鬼，節(jié)省了一個(gè) HTTP 請(qǐng)求殖告。
網(wǎng)頁優(yōu)化的一大首要任務(wù)是減少HTTP 請(qǐng)求 (http request) 的次數(shù)，例如通過合并多個(gè)JS文件雳锋，合并CSS樣式文件黄绩。除此之外，還有一個(gè)data URL 的密技玷过，讓我們直接把圖像的內(nèi)容崁入網(wǎng)頁里面爽丹，這個(gè)密技的官方名稱是 data URI schema 。
Data URI scheme 的語法
我們來分析一下這句 img 標(biāo)簽的語法：
它包含以下部分：
data – 取得數(shù)據(jù)的協(xié)定名稱
image/png – 數(shù)據(jù)類型名稱
base64 – 數(shù)據(jù)的編碼方法
iVBOR…. – 編碼后的數(shù)據(jù)
: , ; – data URI scheme 指定的分隔符號(hào)
總結(jié)：這里也就是在網(wǎng)上把圖片編碼成base64的數(shù)據(jù)辛蚊，就會(huì)得到如上的數(shù)據(jù)习劫。
四、什么是 Base64 編碼嚼隘？
簡單地說它把一些 8-bit 數(shù)據(jù)翻譯成標(biāo)準(zhǔn) ASCII 字符诽里，網(wǎng)上有很多免費(fèi)的base64 編碼和解碼的工具。
五飞蛹、Socket基本知識(shí)
自行腦補(bǔ)谤狡，這里我用了iOS中很棒的一個(gè)HttpServer第三方框架CocoaHttpServer。
六卧檐、實(shí)現(xiàn)
上面基本知識(shí)介紹完畢墓懂，下面開始擼代碼。
iOS 的代碼很簡單霉囚，我們使用CocoaHttpServer創(chuàng)建一個(gè)本地的站點(diǎn)即可捕仔。
一、可以通過點(diǎn)擊事件盈罐，開啟CocoaHttpServer榜跌。
-?(IBAction)action:(id)sender {
[DDLog addLogger:[DDTTYLogger sharedInstance]];
_httpServer = [[HTTPServer alloc] init];
[_httpServer setType:@"_http._tcp."];
NSString *webPath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"Web"];
DDLogInfo(@"Setting document root: %@", webPath);
[_httpServer setDocumentRoot:webPath];
[self startServer];
}
創(chuàng)建HttpServer
- (void)startServer {
// Start the server (and check for problems)
NSError *error;
if([_httpServer start:&error]) {
DDLogInfo(@"Started HTTP Server on port %hu", [_httpServer listeningPort]);
// open the url. 這里的url和端口號(hào)都是如下代碼。
NSString *urlStrWithPort = [NSString stringWithFormat:@"http://localhost:%d",[_httpServer listeningPort]];
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:urlStrWithPort]];
} else{
DDLogError(@"Error starting HTTP Server: %@", error);
}
}
小結(jié)：以上內(nèi)容是通過一個(gè)點(diǎn)擊事件盅粪，創(chuàng)建一個(gè)httpserver服務(wù)器钓葫、開啟服務(wù)器、獲取端口號(hào)票顾。
ok础浮。核心代碼來了…
二、創(chuàng)建一個(gè)index.html文件奠骄，里面內(nèi)容如下：
頁面定期刷新，如果加url的含鳞，則會(huì)重新定向到指定的網(wǎng)頁影锈，content后面跟的是時(shí)間（單位秒），把這句話加到指定網(wǎng)頁的里一般也用在實(shí)時(shí)性很強(qiáng)的應(yīng)用中，需要定期刷新精居。
這個(gè)文件放在文件夾WEB目錄下，切記這個(gè)文件在工程中是實(shí)體文件夾潜必，folder references靴姿。
接下來我們會(huì)再創(chuàng)建一個(gè)content.html的文件，但是這個(gè)文件不會(huì)放在WEB文件夾內(nèi)磁滚，而是轉(zhuǎn)換成data URI schema ?放在上面的重定向到指定網(wǎng)頁的位置佛吓。
以下是我demo的content.html文件的內(nèi)容：
上面代碼中 href=""參數(shù)的解釋：
addicon:// ?代表APP的URLscheme维雇，后面可以帶參數(shù)，如下：
href="addicon://?testapp&token=123&appid=123"
上面這那幾個(gè)meta標(biāo)簽其實(shí)就是為了設(shè)置樣式晒他，更多詳情請(qǐng)看蘋果官方文檔關(guān)于這部分的介紹吱型。
下面這個(gè)link就是快捷方式的啟動(dòng)圖標(biāo)，這個(gè)圖片是經(jīng)過Base64編碼的陨仅。
再下面的title就是快捷方式的名稱津滞。
接下來body標(biāo)簽中的超鏈接就是我demo的URL Schemes,通過URL Schemes來跳轉(zhuǎn)進(jìn)我們的App。下面的span標(biāo)簽用來占位灼伤，我們使用JS代碼來控制它的顯示內(nèi)容触徐。
這段JS代碼的意思就是檢測(cè)iOS WebApp是否運(yùn)行在全屏模式。
iOS上的Safari瀏覽器可以讓W(xué)eb應(yīng)用程序全屏顯示狐赡，以取得類似本地應(yīng)用的顯示效果撞鹉。但是這需要用戶把Web應(yīng)用程序的圖標(biāo)添加到主屏幕才可以。作為開發(fā)者颖侄，為了更好的顯示效果鸟雏，我們可能希望自己開發(fā)的Web應(yīng)用程序在非全屏狀態(tài)下運(yùn)行時(shí)提示用戶把Web應(yīng)用程序的圖標(biāo)添加到主屏幕。要檢測(cè)Web應(yīng)用程序當(dāng)前是否運(yùn)行在全屏狀態(tài)览祖，只要檢測(cè)window.navigator.standalone是否為true就可以了崔慧，如果這個(gè)屬性為true則表示W(wǎng)eb應(yīng)用程序當(dāng)前運(yùn)行在全屏狀態(tài)，否則運(yùn)行在非全屏狀態(tài)穴墅。檢測(cè)到Web應(yīng)用程序運(yùn)行在非全屏狀態(tài)時(shí)就可以提示用戶把Web應(yīng)用程序的圖標(biāo)添加到主屏幕惶室。
最后再把content.html里的這段代碼通過這個(gè)網(wǎng)站轉(zhuǎn)換成data URI schema 放在index.html中，就完成了玄货。
最后補(bǔ)充：
index.html里面的
上面代碼中的 content = "0;URL = data:text/html;charset=utf-8;base64,.............(后面的內(nèi)容是什么呢)"皇钞，是content.html頁面中全部內(nèi)容經(jīng)過base64編碼之后的所有數(shù)據(jù)。
把content.html中所有數(shù)據(jù)編碼成base64松捉，再粘貼再后面就可以實(shí)現(xiàn)快捷方式這個(gè)功能了夹界。
