H5应用缓存-Manifest的具体介绍-H5教程-PHP中文网

首页

web前端

H5教程

H5应用缓存-Manifest的具体介绍

黄舟

Apr 18, 2017 am 09:55 AM

导读

Manifest 是 H5提供的一种应用缓存机制, 基于它web应用可以实现离线访问(offline cache). 为此, 浏览器还提供了应用缓存的api--applicationCache. 虽然manifest的技术已被web标准废弃, 但这不影响我们尝试去了解它. 也正是因为manifest的应用缓存机制如此诱人, 饿了么和 office 365邮箱等都还在使用着它!

描述

对manifest熟悉的同学可以跳过此节.

鉴于manifest应用缓存的技术, 我们可以做到:

离线访问: 即使服务器挂了, 或者没有网络, 用户依然可以正常浏览网页内容.

访问更快: 数据存在于本地, 省去了浏览器发起http请求的时间, 因此访问更快, 移动端效果更为明显.

降低负载: 浏览器只在manifest文件改动时才去服务器下载需要缓存的资源, 大大降低了服务器负载.

manifest缓存的过程如下(来自网络):

支持性

主流浏览器都支持manifest应用缓存技术. 如下表格:

H5标准中, Offline Web applications 部分有如下描述:

This feature is in the process of being removed from the Web platform. 
(This is a long process that takes many years.) 
Using any of the offline Web application features at this time is highly discouraged. Use service workers instead. [SW]

因此后续我将在其他文章中继续介绍 service workers, 本篇继续关注manifest.

如何开启应用缓存

manifest使用缓存清单进行管理, 缓存清单需要与html标签进行关联. 如下:

<html manifest="test.appcache">
  ...
</html>

在html标签中指定manifest文件, 便表示该网页使用manifest进行离线缓存. 该网页内需要缓存的文件列表需要在 test.appcache 文本文件中指定.

manifest缓存清单

就像写作文一样, manifest采用经典的三段式. 分别为: CACHE, NETWORK 和 FALLBACK. 如下, 先看一个栗子

以上是H5应用缓存-Manifest的具体介绍的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

h5是指什么Aug 02, 2023 pm 01:52 PM

H5是指HTML5，是HTML的最新版本，H5是一个功能强大的标记语言，为开发者提供了更多的选择和创造空间，它的出现推动了Web技术的发展，使得网页的交互和效果更加出色，随着H5技术的逐渐成熟和普及，相信它将会在互联网的世界中发挥越来越重要的作用。

manifest文件有什么用Mar 13, 2023 pm 02:02 PM

manifest文件的作用是声明组件，并指定app的一些权限（permission）和instrumentation（安全控制和测试）；manifest作为整个Android应用的入口，其Manifest.xml描述了package中暴露的组件，他们各自的实现类，各种能被处理的数据和启动位置。

如何区分H5,WEB前端,大前端,WEB全栈?Aug 03, 2022 pm 04:00 PM

本文带你快速区分H5、WEB前端、大前端、WEB全栈，希望对需要的朋友有所帮助！

h5如何使用positionDec 26, 2023 pm 01:39 PM

在H5中使用position属性可以通过CSS来控制元素的定位方式：1、相对定位relative，语法为“style="position: relative;”；2、绝对定位absolute，语法为“style="position: absolute;”；3、固定定位fixed，语法为“style="position: fixed;”等等。

h5怎么实现web端向上滑动加载下一页Mar 11, 2024 am 10:26 AM

实现步骤：1、监听页面的滚动事件；2、判断滚动到页面底部；3、加载下一页数据；4、更新页面滚动位置即可。

总结介绍H5新晋级标签（附示例）Aug 03, 2022 pm 05:10 PM

本文给大家整理介绍H5新晋级标签有哪些，希望对需要的朋友有所帮助！

vue3怎么实现H5表单验证组件Jun 03, 2023 pm 02:09 PM

效果图描述基于vue.js，不依赖其他插件或库实现；基础功能使用保持和element-ui一致，内部实现做了一些移动端差异的调整。当前构建平台使用uni-app官方脚手架构建，因为当下移动端大多情况就h6和微信小程序两种，所以一套代码跑多端十分适合技术选型。实现思路核心api：使用provide和inject，对应和。在组件中，内部用一个变量（数组）去将所有实例储存起来，同时把要传递的数据通过provide暴露出去；组件则在内部用inject去接收父组件提供过来的数据，最后把自身的属性和方法提交