离线存储manifest的基础用法

源码地址

使用离线存储的优点：

1. 可以在离线状态下访问页面。
2. 缓存的资源加载更快。
3. 减少服务器加载 - 浏览器只从服务器上下载已更新/已更改的资源。

构成：

1. CACHE：罗列了所有离线使用所需的文件。
2. NETWORK：罗列了不需要被缓存的文件。
   H5的离线存储需要配合服务端一起使用，在这里我们使用 node 启动一个简单的服务。
3. FALLBACK：缓存中没有页面时显示指定的 offline.html 文件。

服务端

使用 node + express 启动服务

const express = require('express')
const app = express()
const ejs = require('ejs')

app.engine('html', ejs.__express)
app.set('view engine', 'html')
app.use(express.static('public')) // 静态资源

app.get('/test1', (req, res) => {
  res.render('test1')
})

app.get('/test2', (req, res) => {
  res.render('test2')
})

app.listen(9999, () => console.log(`url:http://localhost:9999`))

启动：node app.js

一. 缓存静态html文件

  
  
  


  this is a manifest test
  

# offline1.manifest
CACHE MANIFEST
# Cache Manifest v1

NETWORK:
*

FALLBACK:
// offline.html

访问：http://localhost:9999/test1

正常访问：

切换成离线状态访问：

test1.html 从缓存 disk cache 中读取，而 logo.png则获取失败，因为并没有为图片设置离线缓存，在offline的情况下无法获取。

二. 缓存图片文件

  
  
  


  this is a manifest test2
  

# offline2.manifest
CACHE MANIFEST
# Cache Manifest v1

CACHE:
images/logo.png

NETWORK:
*

FALLBACK:
// offline.html

我们设置缓存了 logo.png 图片

正常访问：

切换成离线状态访问：

html文件和图片均从 disk cache 中获取。

附：

1. 清除缓存：打开调试工具 -> Application -> Clear storage -> Clear site data
2. 如果有资源在 CACHE 和 NETWORK 中同时存在,该资源还是会被缓存,原因是：CACHE 优先级高于 NETWORK。
3. 更新离线存储资源必须要更新 manifest 文件，浏览器则会下载该新版本文件并再次触发离线存储进程。