node.js與HTML5離線緩存

時間 2019-12-08

標籤 node.js node html5 html 離線緩存欄目 Node.js 简体版

原文原文鏈接

最近正學到HTML5的離線緩存，卻看到須要配置服務器。一會兒就懵了，畢竟服務器的有關配置通常是很複雜的，而node.js的服務器是本身的代碼生成的，這下要怎麼配置？在網上搜索了好久，都沒用關於node.js與HTML5離線緩存的，可是apache之類的卻一大堆。在看完網易雲課堂的一個php教程以後，開始理解了HTML5的離線緩存原理，併成功搭配node.js實現了。php

首先簡要講一下HTML5離線緩存的原理。html

瀏覽器向服務端發出請求，請求獲取一份MIME類型爲 text/cache-manifest 的文件，該文件自己就是靜態文件，這點很重要，而且該文件記錄了瀏覽器要緩存哪些文件。html5

這時候第一個問題來了，manifest文件內容格式怎麼寫？node

答：舉個簡單的例子，該例子列出了瀏覽器要緩存的文件。express

CACHE MANIFESTapache

# CACHE MANIFEST 是必須的開頭瀏覽器

# CACHE : 下羅列了要緩存的文件名
CACHE:
1.jpg緩存

解決了第一個問題第二個問題來了，html5是怎麼去請求這份文件的？服務器

答：less

在你的html代碼裏的 html標籤中這樣寫: <html manifest="test.manifest" >;這樣瀏覽器就會向請求其它資源同樣向服務器請求這個名爲 test.manifest文件了。

舉個簡單的例子加深理解：經過 http://localhost/index.html 訪問服務器根目錄下的index.html文件，html代碼以下

 1 <!DOCTYPE html>
 2 <html manifest="test.manifest">
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8    <img src="1.jpg" />
 9 </body>
10 </html>

test.manifest文件內容如上面第一問題中的例子；

當瀏覽器渲染到 <html manifest="test.manifest">時，瀏覽器發出一個請求，請求獲取test.manifest文件，當瀏覽器加載了test.manifest文件後瀏覽器就知道1.jpg是要緩存的文件，因此，當1.jpg第一次被加載下來後，就被緩存到本地了。當第二訪問http://localhost/index.html 時，瀏覽器直接到緩存去取1.jpg了。即便斷網了，也可以經過http://localhost/index.html訪問到剛剛的頁面。

到了如今，咱們仍是沒講到node.js。已知apache等服務器要支持離線緩存的話須要配置服務器，若是是node.js，那該怎麼辦？

答：咱們先來了解一下，apache等服務器到底是要配置什麼鬼東西。上面已經說了manifest文件自己就是一個靜態文件，獲取manifest文件跟獲取jpg文件其實就是一回事，可是apache等服務器不是全部的文件格式都支持，換句話說，你瀏覽器請求jpg文件是被容許的，可是，你請求manifest文件是不在容許範圍內的，因此，配置服務器指定的就是在服務器容許的文件類型中加多一條：manifest 類型。

而對於node.js說，不管是jpg,png,manifest.......，它們都是文件而已，node.js對它們一視同仁，惟一不一樣的地方就是它們的MIME類型。

因此，對於HTML5的離線緩存功能來講，node.js須要的配置就是在寫靜態文件服務器時，增長對manifest MIME類型支持。

若是你用express的配置靜態文件服務器的話，express已經幫你增長了manifest文件的支持了。一個字：爽！