離線儲存manifest

weixin_34138139發表於2017-03-04

作用

  • 使用者可以離線訪問你的內容
  • 提高訪問速度
  • 僅僅載入被修改過的資源，避免同一資源對伺服器多次請求，降低伺服器訪問壓力

實現

  1. 在 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 檔案

參考連結

相關文章