html5 · PHP筆記

## **X-UA-Compatible** 為防止失效，X-UA-Compatible最好緊跟在head之后，之前不要有任何不標準的標簽。 ~~~ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> ~~~ **詳解：** 使用以下代碼強制 IE 使用 Chrome Frame 渲染 ~~~ <meta http-equiv="X-UA-Compatible" content="chrome=1"> ~~~ Edge 模式告訴 IE 以最高級模式渲染文檔，就是什么版本 IE 就用什么版本的標準模式渲染。 ~~~ <meta http-equiv="X-UA-Compatible" content="IE=edge"> ~~~ App 可以分成三大類。 > * 原生應用（native application，簡稱 native App） > * Web 應用（web application，簡稱 Web App） > * 混合應用（hybrid application，簡稱 hybrid App） **H5 這個詞，可以理解成就是混合 App 模型，只不過它特指混合 App 的前端部分。** 因為混合 App 的前端就是 HTML5 網頁，所以簡稱 H5。這個詞是國內獨有的，基本上都是前端程序員在用，國外不用這個詞，就直接叫混合 App。 ## **原生應用** 原生 App 使用與手機操作系統相同的語言。iOS 的原生 App 使用 Objective-C 語言或 Swift 語言，安卓使用 Java 語言或 Kotlin 語言。由于跟底層系統的語言和技術模型一致，所以原生 App 的性能和用戶體驗都很好優點：原生 App 的優點主要是兩個：（1）較好的性能和體驗；（2）可以使用系統的所有硬件和軟件 API，比如 GPS、攝像頭、麥克風、加速計、通知推送等等，能充分發揮系統的潛力。缺點：原生 App 的缺點主要是成本，每個手機平臺都要建立一個獨立的開發團隊，大公司一般都有 iOS 和安卓兩個開發團隊。如果出現第三個平臺（以前的 Windows Phone，也許將來的華為鴻蒙 OS），就要組建第三個團隊，成本就更高。第二個缺點是，原生 App 使用底層操作系統的語言，都是很重的編譯型語言，開發和調試成本相對較高，時間周期長。第三個缺點是，原生 App 必須下載安裝才能使用，只要升級版本，就必須重新下載安裝。用戶往往不愿意更新版本，廠商被迫不得不長期支持很久以前的舊版本。 ## **Web 應用** **Web App 是使用網頁做的應用程序，必須在瀏覽器中使用。**比如，你在瀏覽器中收發郵件，就是在使用 Web App。 Web App 主要使用網頁技術，即 HTML、JavaScript 和 CSS。2008年，w3c 組織發布了 HTML 第5版，簡稱 HTML 5，該版本大大增強了網頁的功能，使得網頁可以當作應用程序使用，而不僅僅是展示文字和圖片，這就是 Web App 的由來 ### 優點和缺點 Web App 的優點是：（1）不需要下載安裝，打開瀏覽器就能使用，而且總是使用最新版本；（2）對于開發者來說，Web App 寫起來比較快，調試容易，不需要應用商店的批準就能發布。 Web App 的主要缺點有兩個。首先，瀏覽器提供的 API（即 Web API）很有限（目前只有相機、GPS、電池等少數幾個），大部分系統硬件都不能通過網頁訪問，也無法直接讀取硬盤文件，所以 Web App 無法充分利用平臺的硬件。第二個缺點是，網頁通過瀏覽器渲染，性能不如原生 App，不適合做性能要求較高的頁面為了推廣 Web App，谷歌公司的 Chrome 瀏覽器團隊做了很多努力。他們認為，Web App 足以滿足大多數 App 的需求，但是三大缺陷阻礙它的推廣。 > 1. 不能從手機的首屏直接進入。 > 2. 缺乏手機狀態欄和鎖屏時的通知推送能力。 > 3. 不支持脫機訪問（即斷網也能使用）為了解決這些問題，Chrome 團隊開發了新技術"漸進式 Web App"（Progressive Web App，縮寫 PWA）。它可以把網站緩存在手機里面，供離線時使用，還能在手機首屏生成圖標，直接點擊進入，并且有通知推送能力，也不帶有瀏覽器的地址欄和狀態欄，跟原生 App 的使用體驗非常接近。但是，PWA 需要瀏覽器訪問一次網站，才能在首屏生成圖標，并且目前 iOS 系統的支持還不夠理想，所以還只是一項探索性質的技術，迄今為止缺乏足夠的成功案例 ## **混合應用** **混合 App （hybrid App）顧名思義就是原生 App 與 Web App 的結合。它的殼是原生 App，但是里面放的是網頁。**可以理解成，混合 App 里面隱藏了一個瀏覽器，用戶看到的實際上是這個隱藏瀏覽器渲染出來的網頁。混合 App 的原生外殼稱為"容器"，內部隱藏的瀏覽器，通常使用系統提供的網頁渲染控件（即 WebView 控件），也可以自己內置一個瀏覽器內核。結構上，混合 App 從上到下分成三層：HTML5 網頁層、網頁引擎層（本質上是一個隔離的瀏覽器實例）、容器層。混合 App 里面的網頁不同于普通網頁，可以調用底層系統所有的 API。奧秘就在于外層容器提供了 API Bridge，充當底層 API 的中介，允許內部的網頁調用底層。所謂 API Bridge 就是容器在底層接口和網頁之間，建立一座橋梁，讓雙方通信。容器一旦接到網頁的請求，就根據請求去調用底層系統的 API，然后再返回結果給網頁。API Bridge 往往以 JavaScript 語言提供，方便網頁調用，這時又稱為 JSbridge。不同容器的 API Bridge 是不一樣的。為某個容器寫的網頁，不能放在另一個容器使用，也無法在瀏覽器使用，除非網頁腳本做了兼容處理。容器提供的 API Bridge 必須跟著平臺更新。比如，iOS 發了新版本，有了新的硬件 API，容器也必須跟著推出新版的 API Bridge。如果容器沒有跟上，開發者為了使用新的硬件，就只能想辦法自己來寫缺失的 API Bridge ### 優點混合 App 同時具有原生 App 和 Web App的優點，又可以避免它們的一些缺點。具體來說，可以總結為三點。（1）跨平臺 Web 技術是跨平臺的，開發者只寫一次頁面，就能支持多個平臺。也就是說，混合 App 只需要一個團隊就夠了，開發成本較低。（2）靈活性混合 App 的靈活性大，很容易集成多種功能。一方面，混合 App 很容易加載外部的 H5 頁面，實現 App 的插件結構；另一方面，Web 頁面可以方便地調用外部的 Web 服務。（3）開發方便 Web 頁面的調試和構建，遠比原生控件簡單省時。頁面的更新也容易，只要在服務器上發布新版本，觸發容器內更新就可以了。另外，Web 開發人員也比較容易招聘，傳統的前端程序員可以承擔開發任務。 ### 4.4 缺點混合 App 的主要缺點是，由于存在網頁引擎的中間層，所以性能比較欠缺，不僅不如原生 App，而且由于 WebView 不是全功能瀏覽器，可能比 Web App 都要慢一些。另一個缺點是，由于頁面跨平臺，就無法使用只有特定平臺提供的功能，導致體驗不如純的原生 App。舉例來說，早期的時候，安卓有物理的后退按鈕，iPhone 沒有，頁面設計不得不考慮這一點 ## **移動端web開發，web app開發區別：** 1. 移動web開發（pc端的頁面用手機瀏覽器打開）這部分跟web前端開發差別不大，使用的技術都是html+css+js。區別為手機瀏覽器是webkit的天下，pc端是IE的天下。手機網頁可以理解成pc網頁的縮小版加一些觸摸特性。因為是在瀏覽器中進行的網頁開發，所有最終代碼具有跨系統平臺的特性 2. web app開發（web應用程序）特指的是用html5技術開發，之所以叫web app是因為他比較接近客戶端應用程序的用戶體驗，可以和系統深度融合，調用一些只有客戶端才能調用的功能（比如在移動設備上利用html5開發出的網頁可以訪問電話、攝像頭等本地功能）. # [H5 手機 App 開發入門：技術篇](http://www.ruanyifeng.com/blog/2019/12/mobile-app-technology-stack.html)