作用
- 用戶可以離線訪問你的內容
- 提高訪問速度
- 僅僅加載被修改過的資源,避免同一資源對服務器多次請求,降低服務器訪問壓力
實現
- 在 html 標簽里通過 manifest 屬性引用一個 cache.manefest 文件,該文件里聲明了瀏覽器需緩存的所有文件資源:
<!DOCTYPE html>
<html lang="en" manifest="cache.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
2.關于 chache.manifest 文件的定義:
CACHE MANIFEST
# 注釋:上面一句必須
# v1.0.0
# 需要緩存的文件,無論在線與否,均從緩存里獲取
CACHE:
cache.js
cache.css
# 不緩存的文件,無論緩存中存在與否,均重新獲取
NETWORK:
uncache.js
uncache.css
# 獲取不到資源時的備選路徑,如 index.html 訪問失敗,則返回404頁面
FALLBACK:
index.html 404.html
關注細節
- cache.manifest 文件的 MIME 類型是 text/cache-manifest
- cache.manifest 文件以CACHE MANIFEST 開頭,文件編碼格式必須是utf-8
- 引用 cache.manifest 的 html 文檔會被默認包含進緩存清單
歸納步驟
- 配置服務器支持 cache.manrfest 的 Content-type: text/cache-manifest
- 編寫 cache.manifest 文件
- html 頁面應用 cache.manifest 文件