离线缓存 manifest 的设置

谁借莪１个温暖的怀抱￠ 2022-05-25 04:13 204阅读 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>

实现上面的内容之后，我的这个小测试在离线的情况下，及时刷新，也是可以正常显示的，

当再一次访问的时候，速度是极快的，丝毫没有卡顿等待，这就是manifest的好处；

发表评论取消回复

表情：

评论列表（有 0 条评论，204人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5离线缓存不起效果，难道manifest属性废弃了吗？

html5中的离线缓存不起效果，什么原因？知道的小伙伴麻烦留言一下。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

以你之姓@/ 2023年01月04日 14:55/ 0 赞/ 159 阅读

相关 html5 app 离线缓存文件,html5离线缓存缓存所有文件，而不是缓存中列出的文件

我正在尝试使用HTML5的离线缓存。但问题是缓存所有的html文件，而不是我在缓存清单文件中提到的那些文件：例如：我有4个html文件：index.html，test.ht

た入场券/ 2022年10月06日 10:47/ 0 赞/ 145 阅读

相关 HTML5之---Manifest 文件--离线缓存

完整的 Manifest 文件 CACHE MANIFEST 2012-02-21 v1.0.0 /theme.css /logo.gi

朴灿烈づ我的快乐病毒、/ 2022年08月19日 08:38/ 0 赞/ 166 阅读

相关 HTML5离线存储和本地缓存

一.离线存储有一个web应用有三个文件index.html,a.js,b.css，现在需要把js和css文件缓存起来 1.在index.html里加上 2.manife

柔情只为你懂/ 2022年06月18日 09:24/ 0 赞/ 237 阅读

相关离线缓存 manifest 的设置

虽然 manifest 已经从web标准中移除，但是还是来看看manifest的实现吧；这个需要服务器的支持，也就是需要设置MIME, 我在本地的wamp 环境

谁借莪１个温暖的怀抱￠/ 2022年05月25日 04:13/ 0 赞/ 205 阅读

相关 h5离线缓存技术

HTML5提供了很多新的功能以及相应的接口，离线存储就是其中的一个，离线存储可以将站点的一些文件存储在本地，在没有网络的时候还是可以访问到以缓存的对应的站点页面，其中这些文

布满荆棘的人生/ 2022年05月21日 01:22/ 0 赞/ 309 阅读

相关 cesium离线服务设置

1. 数据源 1). 卫星影像纹理。使用sxearth等软件以tms格式从已有的网络地图服务商下载存储。 2). DEM数据。网络公开可下载全球数据有：SRTMV4.

小鱼儿/ 2022年01月13日 23:21/ 0 赞/ 538 阅读

相关离线缓存 application cache

1. 什么是离线缓存：　　离线缓存可以将站点的一些文件缓存到本地，它是浏览器自己的一种机制，将需要的文件缓存下来，以便后期即使没有连接网络，被缓存的页面也可以展示。　　

谁践踏了优雅/ 2021年11月15日 12:22/ 0 赞/ 356 阅读

相关 HTML5离线缓存

一,离线缓存文档的本地缓存,在断网的情况下依旧能够访问, 但是不能访问网络接口 1,检测支持性 if(window.a

r囧r小猫/ 2021年09月17日 01:18/ 0 赞/ 431 阅读

相关 manifest离线缓存技术

manifest author: 果果 data：2020.04.25 17:06 html属性 manifest定义 manifest 属性规定文档的缓

清疚/ 2021年08月29日 01:19/ 0 赞/ 413 阅读