离线存储manifest的基础用法

怼烎@ 2023-02-20 04:55 23阅读 0赞

[源码地址][Link 1]

#### 使用离线存储的优点： ####

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文件 ###

<!DOCTYPE html>
    <html manifest="offline1.manifest">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      this is a manifest test
      <img src="./images/logo.png"/>
    </body>
    </html>

# offline1.manifest
    CACHE MANIFEST
    # Cache Manifest v1
    
    NETWORK:
    *
    
    FALLBACK:
    // offline.html

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

正常访问：  
![offline][]

切换成离线状态访问：  
![online][]  
test1.html 从缓存 disk cache 中读取，而 logo.png则获取失败，因为并没有为图片设置离线缓存，在offline的情况下无法获取。

### 二. 缓存图片文件 ###

<!DOCTYPE html>
    <html manifest="offline2.manifest">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      this is a manifest test2
      <img src="/images/logo.png"/>
    </body>
    </html>

# offline2.manifest
    CACHE MANIFEST
    # Cache Manifest v1
    
    CACHE:
    images/logo.png
    
    NETWORK:
    *
    
    FALLBACK:
    // offline.html

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

正常访问：  
![online][online 1]  
切换成离线状态访问：  
![offline][offline 1]  
html文件和图片均从 disk cache 中获取。

附：

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

[Link 1]: https://github.com/qinchao888/manifest-demo
[offline]: https://img-blog.csdnimg.cn/20200623152636605.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dyZXlCZWFyQ2hhbw==,size_16,color_FFFFFF,t_70
[online]: https://img-blog.csdnimg.cn/20200623152636629.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dyZXlCZWFyQ2hhbw==,size_16,color_FFFFFF,t_70
[online 1]: https://img-blog.csdnimg.cn/20200623153448809.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dyZXlCZWFyQ2hhbw==,size_16,color_FFFFFF,t_70
[offline 1]: https://img-blog.csdnimg.cn/20200623153514719.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dyZXlCZWFyQ2hhbw==,size_16,color_FFFFFF,t_70