網(wǎng)站建設中利用Node實(shí)現HTML5離線(xiàn)存儲的方法發(fā)布者：本站 時(shí)間：2021-02-10 10:02:08
HTML5引入了應用程序緩存，這意味著(zhù) web 應用可進(jìn)行緩存，并可在離線(xiàn)時(shí)進(jìn)行訪(fǎng)問(wèn)。
:pushpin:應用程序緩存為應用帶來(lái)三個(gè)優(yōu)勢：
離線(xiàn)瀏覽 – 用戶(hù)可在應用離線(xiàn)時(shí)使用它們
速度 – 已緩存資源加載得更快
減少服務(wù)器負載 – 瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源。
原理和環(huán)境
在線(xiàn)的情況下， 當瀏覽器渲染到 <html manifest="test.manifest"> 時(shí)，會(huì )發(fā)出一個(gè)請求，請求獲取 test.manifest 文件 ，如果是第一次訪(fǎng)問(wèn)，那么瀏覽器就會(huì )根據 描述文件（manifest 文件）中（CACHE MANIFEST）的內容下載相應的資源并且進(jìn)行離線(xiàn)存儲。如果已經(jīng)訪(fǎng)問(wèn)過(guò)并且資源已經(jīng)離線(xiàn)存儲了，那么瀏覽器就會(huì )使用離線(xiàn)的資源加載頁(yè)面，然后瀏覽器會(huì )對比新的 manifest 文件與舊的 manifest 文件，如果文件沒(méi)有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會(huì )重新下載文件中的資源并進(jìn)行離線(xiàn)存儲。
:triangular_flag_on_post: 【注】 這個(gè)demo演示是為了更深的了解這個(gè)原理
離線(xiàn)的情況下，瀏覽器就直接使用離線(xiàn)存儲的資源
就像cookie一樣，HTML5的離線(xiàn)存儲也需要服務(wù)器環(huán)境，這個(gè)demo中服務(wù)端基于Node.js、Express框架和art-tmplate開(kāi)發(fā)
描述文件
要想在緩存中保存數據，需要使用描述文件manifest 文件，列出要下載和緩存的資源
manifest 文件可分為三個(gè)部分：
CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進(jìn)行緩存
NETWORK - 在此標題下列出的文件需要與服務(wù)器的連接，且不會(huì )被緩存
FALLBACK - 在此標題下列出的文件規定當頁(yè)面無(wú)法訪(fǎng)問(wèn)時(shí)的回退頁(yè)面（比如 404 頁(yè)面）
在線(xiàn)的情況下,用戶(hù)代理每次訪(fǎng)問(wèn)頁(yè)面，都會(huì )去讀一次manifest.如果發(fā)現其改變, 則重新加載全部清單中的資源
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯過(guò)
1. 優(yōu)秀的網(wǎng)絡(luò )資源，強大的網(wǎng)站優(yōu)化技術(shù)，穩定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設經(jīng)驗，優(yōu)秀的技術(shù)和設計水平，更放心
3. 全程省心服務(wù)，不必擔心自己不懂網(wǎng)絡(luò )，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話(huà)：021-58370032
關(guān)鍵詞標簽：上海網(wǎng)站建設 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開(kāi)發(fā)