HTML5 Javascript API扩展：应用缓存、服务端消息与桌面通知详解

104 浏览量更新于2024-08-31 收藏 93KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

"这篇文章除了介绍HTML5的Javascript API扩展，重点讲解了应用缓存、服务端消息和桌面通知这三项技术。虽然IE浏览器不支持这些特性，但它们在其他主流浏览器中有广泛的应用。文章特别强调了桌面通知目前仅Chrome浏览器支持。" 在HTML5中，应用缓存（Application Cache）是一项重要的离线存储技术，它允许开发者创建离线应用，即使在无网络连接的情况下也能提供基本功能。启用应用缓存非常简单，只需在HTML文档的`<html>`标签中添加`manifest`属性，并指向一个manifest文件。 1. 启用缓存：在HTML文件头部加入`<html manifest="demo.appcache">`，这样当用户访问该页面时，所有指定的资源都会被缓存。如果未指定manifest属性，页面不会被缓存。 2. 配置服务器：manifest文件需要设置正确的MIME类型，通常是"text/cache-manifest"。在Apache服务器上，可以通过`.htaccess`文件配置。 3. 编写manifest文件：这是一个纯文本文件，分为三个部分： - CACHE MANIFEST：列出需要缓存的文件。 - NETWORK：列出需要网络连接的文件，这些文件不会被缓存。 - FALLBACK：定义在网络不可用时的备用资源，即如果请求的资源无法从网络获取，浏览器会使用备份资源。服务端消息（Server-Sent Events，SSE）是一种让服务器向客户端推送数据的技术，与WebSocket不同，SSE是单向的，服务器可以持续发送数据到客户端，而客户端不需要频繁发送请求。SSE通过EventSource接口实现，适合实时性要求不那么高，但需要服务器主动更新的场景。桌面通知（Desktop Notifications）是HTML5提供的一种交互方式，允许网站在用户离开页面后依然能在桌面显示提醒。目前，桌面通知的兼容性有限，主要由Chrome浏览器支持。开发者可以使用Notification API创建和管理通知，提供更丰富的用户体验，但需要注意用户的隐私和权限控制。这些HTML5的Javascript API扩展极大地丰富了Web开发的功能，使得Web应用可以实现更接近原生应用的离线工作、实时通信和交互体验。尽管它们在一些浏览器中的支持度还有待提升，但对于追求创新和优化用户体验的开发者来说，这些都是值得探索和掌握的工具。

资源详情

资源推荐

突袭突袭HTML5之之Javascript API扩展扩展5—其他扩展其他扩展(应用缓存应用缓存/服务服务

端消息端消息/桌面通知桌面通知)

前面已经总结了主要的API扩展(应用缓存/服务端消息/桌面通知),下面的几个只有在特定的场合才能发挥它的潜

质，无一例外，IE均不支持,桌面通知目前只有Chrome支持,感兴趣的朋友可以了解下，或许对你有所帮助

前面已经总结了主要的API扩展，下面几个扩展只有在专用的场合才会发挥最大的作用，这里简单了解一下。下面这些特性无

一例外，IE均不支持。应用缓存和服务端消息在其他的主流浏览器中都是支持的。桌面通知目前只有Chrome支持。

应用缓存应用缓存

很多时候，我们需要缓存一些不经常改变的页面来提高访问速度；而且对于某些应用，我们也希望在离线的情况下也可以使

用。在HTML5中，你可以通过一个称之为“应用缓存”的技术很方便的实现这些功能。

在应用缓存的实现中，HTML5允许我们创建一个缓存manifest文件来方便的生成一个离线版的应用。

实现步骤实现步骤：

1. 启用页面的缓存，很简单，只需要在document的html中包含manifest属性：

复制代码

代码如下:

<!DOCTYPE HTML>

...

</html>

每一个包含这个manifest属性的页面当用户访问的时候都会被缓存。如果manifest属性没有指定的话，将不会缓存（除非网页

被直接在manifest文件中指定）。manifest文件扩展名还没有统一的标准，推荐的扩展名是".appcache"。

2. 服务器端配置manifest文件的MIME类型

一个manifest文件需要被正确的MIME-type支持，这种文件类型为"text/cache-manifest"。必须在所使用的web服务器上进行配

置。例如：Apache 中可在 .htaccess 中添加： AddType text/cache-manifest manifest。

3.编写manifest文件

manifest文件是一个简单的文本文件，告诉了浏览器去缓存什么内容（或者不缓存什么内容）。

manifest文件包含下面三个部分：

• CACHE MANIFEST - 在这个列表标题下的文件将会在下载后被缓存。

• NETWORK - 在这个列表标题下的文件将要求连接到服务器，不会进行缓存。

• FALLBACK - 在这个列表标题下的文件如果不能访问时，则显示特定的页面。

完整的一个文件如下面的例子所示：

复制代码

代码如下:

CACHE MANIFEST

# 2012-02-21 v1.0.0

/theme.css

/logo.gif

/main.js

NETWORK:

FALLBACK:

/html5/ /offline.html

提示：

#开头的代表注释。

*可以用表示所有的其它资源或者文件。例如：

复制代码

代码如下:

NETWORK:

表示所有的资源或者文件都不会缓存。

4.更新缓存

一旦一个应用被缓存，它将保持缓存除非一下情况发生：

• 用户删除了缓存

• manifest文件被修改

• 应用缓存被程序修改

所以一旦文件被缓存，除了人为的修改情况，浏览器将会持续的显示缓存版本内容，即使你修改了服务器文件。为了让浏览器

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38629362

粉丝: 6
资源: 967

HTML5 Javascript API扩展：应用缓存、服务端消息与桌面通知详解

突袭HTML5之Javascript API扩展3—本地存储全新体验

突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述

poj3714突袭的代码实现

地面阵地如何才能防御敌机突袭

html 做一个王者荣耀英雄介绍

dnd5e邪术师法术列表

public class Main { public static void main(String[] args) { int a=0; for(int i=1;i<=5;i=i+5){ a++; System.out.println(i); } System.out.println(a); } }

public class Main { public static void main(String[] args) { for(int i=1;i<=5;){ i=i+1; a++; System.out.println(i); System.out.println(a); } } }

王者荣耀里马超如何对线夏洛特

英雄联盟哪些英雄可以打野

java中的collection集合遍历

请设计一个动作游戏策划案

王者荣耀中的大乔的打野思路是什么

java中的多维数组例子

王者荣耀马超3技能冷却时间

sob0.27全角色攻略

蜣螂算法、麻雀算法、粒子群算法、星雀算法、北方苍鹰算法求解无线传感器覆盖率最大优化问题原理和流程

nerf2 xpengzhao

最新资源