求助帖：h5离线缓存应用，Invalid or missing manifest origin trial token问题无法解决

既然解决不了问题，那就加入它吧！项目地址项目结构：

├─Apache24
│  │  ABOUT_APACHE.txt
│  │  CHANGES.txt
│  │  INSTALL.txt
│  │  LICENSE.txt
│  │  Licenses.txt
│  │  NOTICE.txt
│  │  README.txt
│  ├─bin
	...
│  │  │  httpd.exe //启动服务器
	...
│  ├─conf
	...
│  │  │  httpd.conf //修改配置
	...
└─Documents
    └─cache
            index.html
            offline.appcache //配置需要缓存的文件
            script.js

本地安装apche作为服务器方式 httpd-2.4.46-lre314-x86-vs16.zip可在项目地址中下载

打开mime.types文件新增appcache和manifest扩展名

2.需要缓存的html页面添加manifest属性 3.根据自己的目录修改服务器根目录 4.根据自己的目录修改文件根目录 5.启动apache服务 6.打开网页，一直报错：Application Cache Error event: Invalid or missing manifest origin trial token，尝试了tomcat和apache都报同样的错误，望有大侠相助！

补充基础知识

使用navigator.onLine监听网络状态

function changeOnlineStatus() {
  let status = document.getElementById('online-status')
  if (navigator.onLine) { //使用navigator.onLine获取当前网络是在线状态（返回true）还是离线状态（返回false）
    status.innerHTML = '在线'
    status.className = 'btn online-btn'
  }else {
    status.innerHTML = '离线'
    status.className = 'btn offline-btn'
  }
}
changeOnlineStatus()
window.addEventListener('online', changeOnlineStatus) //监听在线事件触发changeOnlineStatus事件
window.addEventListener('offline', changeOnlineStatus) //监听离线事件触发changeOnlineStatus事件

效果展示：
缓存和加载机制
- 第一次访问时，浏览器加载完HTML文档后，会查看其是否有引入manifest文件。若引入，则加载manifest文件，然后根据manifest的文件内容进行资源的缓存，并缓存当前文档
- 之后访问，浏览器首先会查看manifest文件是否被修改（无论是内容还是注释），如果被修改，将当做第一次访问，重新根据manifest文件内容进行缓存
- 如果应用缓存存在，且manifest没有被修改，浏览器直接从缓存中加载文档（注意：加载文档）和资源，不会访问网络（注意：无论联网与否，都不会访问网络）
- 在缓存多个资源文件时，浏览器下载资源文件会先放在一个临时的缓存中，如果有任何一个资源文件下载失败，浏览器将停止其他缓存资源的下载，并清除临时缓存。如果所有资源文件都被成功下载，浏览器将会把这些资源文件以及引用manifest文件的HTML文档移动到永久离线缓存中
缓存清单格式

CACHE MANIFEST //第一行必须包含 CACHE MANIFEST，用来标注这个文件是缓存清单文件
# version xx.xx.xx 
//标明版本的注释。每次修改资源文件的同时，需要修改manifest文件，以触发资源文件的重新加载和缓存。这其中，最有效的方式是修改manifest文件内部的版本注释

CACHE: //载有这个manifest文件的HTML文档将一定会缓存，不需要在CACHE内写入
需要被缓存文件的路径

NETWORK: //可以使用通配符（*），表示除CACHE中定义的资源，其他都必须与服务器连接
不需要缓存的文件
 
FALLBACK: //FALLBACK 指定了一个后备页面，当资源无法访问时，浏览器会使用该页面
/ 404.html