壹、基本技術要點的運用
Java Script語言
數據URI模式
插座的基本知識
Base64編碼
二、基本原則
在程序內部創建壹個簡單的網站，通過這個網站調用Safari，網站會將自定義的Html頁面返回給Safari。此時，使用Safari的“添加到主屏幕”功能，將自定義的Html制作成桌面書簽。當用戶點擊桌面圖標時，他將運行定制的Javascript跳轉到應用程序。
第三，什麽是數據URI計劃？
假設您有以下圖像:
答。png
在網頁上顯示它的標準方式是:
這種獲取數據的方法稱為http URI方案，同樣的效果可以寫成:
換句話說，我們將圖像文件的內容構建到HTML文件中，保存了壹個HTTP請求。
網頁優化最重要的任務之壹就是減少http請求的數量，比如合並多個JS文件和CSS樣式文件。另外還有壹個數據URL的秘密技術，可以讓我們直接把圖片的內容嵌入到網頁中。這種秘密技術的正式名稱是數據URI模式。
數據URI方案的語法
讓我們分析壹下這個img標簽的語法:
它包含以下部分:
數據–獲取數據的協議的名稱。
image/png–數據類型名稱。
base64–數據的編碼方法
伊夫博爾...–編碼數據
: , ;–由數據uri方案指定的分隔符
4.什麽是Base64編碼？
簡單來說就是把壹些8位數據翻譯成標準的ASCII字符，網上有很多免費的base64編解碼工具。
五、插座的基本知識
自己補上。這裏我用的是Cocoa HttpServer，壹個很棒的iOS中HttpServer的第三方框架。
不及物動詞實現
以上基礎知識介紹完畢，我們開始編碼吧。
iOS的代碼很簡單。我們可以使用CocoaHttpServer創建壹個本地站點。
點擊事件
-(I action)操作:(id)發件人
{
[DD log add logger:[ddtty logger shared instance]]；
_ http server =[[http server alloc]init]；
[_httpServer setType:@"_http。_tcp。];
ns string * Web path =[[ns bundle main bundle]resource path]stringByAppendingPathComponent:@ " Web "]；
DDLogInfo(@“設置文檔根目錄:%@”，web path)；
[_ http server setDocumentRoot:web path]；
[自啟動服務器]；
}
創建HttpServer
- (void)startServer
{
//啟動服務器(並檢查問題)
NSError *錯誤；
if([_ http server start:& amp；錯誤])
{
DDLogInfo(@“在端口%hu上啟動了HTTP服務器”，[_httpServer listeningPort])。
//打開網址。
ns string * urlStrWithPort =[ns string string with format:@ " http://localhost:% d "，[_ http server listening port]]；
[[ui application shared application]openURL:[NSURL URL withstring:urlStrWithPort]]；
}
其他
{
DDLogError(@“啟動HTTP服務器時出錯:%@”，錯誤)；
}
}
好的.核心代碼來了…
用以下內容創建壹個index.html文件:
妳什麽意思？
頁面會定期刷新。如果添加了url，它將被重定向到指定的網頁。內容後面是時間(單位秒)。將這句話添加到指定網頁，壹般用於實時應用，需要定期刷新。
這個文件放在文件夾WEB目錄中，記住這個文件是項目中的壹個物理文件夾，文件夾引用。
接下來，我們將創建另壹個content.html文件，但該文件不會放在WEB文件夾中，而是會轉換到放置數據URI模式的位置，並重定向到指定的網頁。
以下是我的演示content.html文件的內容:
相信做過壹點前端開發的同學都能明白是什麽意思。我就在這裏說壹下。
上面的meta標簽其實是用來設置樣式的。更多詳情請看蘋果官方文檔中對這部分的介紹。
下面的鏈接是快捷方式的啟動圖標，這張圖片是Base64編碼的。
下面的標題是快捷方式的名稱。
接下來，body標簽中的超鏈接是我演示的URL方案，妳可以通過URL方案跳轉到我們的App中。下面的span標記被用作占位符，我們使用JS代碼來控制它的顯示內容。
這段JS代碼的意思是檢測iOS WebApp是否在全屏模式下運行。
iOS上的Safari瀏覽器可以讓Web應用全屏顯示，從而達到類似於本地應用的顯示效果。但這需要用戶在主屏幕上添加網絡應用的圖標。作為開發人員，為了更好的顯示效果，我們可能希望在我們開發的Web應用運行在非全屏狀態時，提示用戶將Web應用的圖標添加到主屏幕上。要檢測Web應用當前是否以全屏狀態運行，只需檢測window.navigator.standalone是否為true即可。如果該屬性為true，則表示Web應用程序當前正在全屏狀態下運行，否則它正在非全屏狀態下運行。當檢測到Web應用正在非全屏狀態下運行時，可以提示用戶將Web應用的圖標添加到主屏幕。
最後，content.html的代碼通過這個網站轉換成數據URI模式，放到index.html，就完成了。