离线缓存 manifest 的设置

最新推荐文章于 2021-06-23 07:14:07 发布

cvper

最新推荐文章于 2021-06-23 07:14:07 发布

阅读量581

点赞数

分类专栏： HTML 文章标签： h5 离线缓存 manifest

本文链接：https://blog.csdn.net/cvper/article/details/80233463

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

虽然 manifest 已经从web标准中移除，但是还是来看看manifest的实现吧；

这个需要服务器的支持，也就是需要设置MIME,

我在本地的wamp 环境下进行设置的，对应的是第四个，也就是下面最后一个

   AddType application/x-compress .Z 
 
   AddType application/x-gzip .gz .tgz 
 
   AddType application/x-httpd-php .php 
 
   AddType application/x-httpd-php .php3 
 
   AddType text/cache-manifest .manifest

服务器上可以支持之后：

写一个app.manifest文件：参数有很多可以设置，下面简单设置我需要缓存的内容：

一个主页（默认），一个图片，一个juqery.js文件；

--------------------------------------

CACHE MANIFEST
# VERSION 0.1
# 直接缓存的文件
CACHE:
index.html
he.png

jquery.js

-------------------------------------

再看看主页需要添加的内容：在头部<html>添加缓存的文件如下就可以了，

   <!DOCTYPE html> 
 

   < 
  html 
  lang= 
  "en" 
  manifest= 
  "app.manifest"> 
 

   < 
  head> 
 

   < 
  meta 
  charset= 
  "UTF-8"> 
 

   < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0"> 
 

   < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge"> 
 

   < 
  title>Document</ 
  title> 
 

   < 
  script 
  src= 
  "jquery.js"></ 
  script> 
 

   </ 
  head> 
 

   < 
  body> 
 

   需要服务器支持，设置mime: 
 

   < 
  p>manifest 测试文件</ 
  p> 
 

   < 
  img 
  src= 
  "he.png" 
  alt= 
  ""> 
 

   < 
  img 
  src= 
  "he.png" 
  alt= 
  ""> 
 

   < 
  img 
  src= 
  "he.png" 
  alt= 
  ""> 
 

   < 
  img 
  src= 
  "he.png" 
  alt= 
  ""> 
 

   < 
  img 
  src= 
  "he.png" 
  alt= 
  ""> 
 

   < 
  img 
  src= 
  "he.png" 
  alt= 
  ""> 
 

   < 
  img 
  src= 
  "he.png" 
  alt= 
  ""> 
 

   < 
  img 
  src= 
  "he.png" 
  alt= 
  ""> 
 


   < 
  script> 
 
 
  $( 
  function(){ 
 
 
  $( 
  "img"). 
  css( 
  "width", 
  "300px"); 
 

   } 
 

   ); 
 

   </ 
  script> 
 

   </ 
  body> 
 

   </ 
  html> 
 