`

app cache

 
阅读更多

 对于web app来说,离线应用功能已经越来越重要。诚然,浏览器本身就有缓存机制,但是,这些缓存机制不够可靠,可能并不会按你所想要的方式运行。HTML5 则通过 Application Cache 接口处理了离线应用中的一些问题。

  使用这个接口让你的应用拥有三方面的优势:

  离线浏览——用户在不能联网的时候依然能浏览整个站点

  高速——缓存资源是存储在本地的,因此能更快加载。

  更小的服务器负载——浏览器只需要从服务器端下载有改变的资源即可,相同资源不需要重复下载。

  Application Cache(或 AppCache)让一个开发者可以指定浏览器需要保存哪个文件。当用户在离线情况下时,即使他们按了刷新按钮,你的应用也能正确加载和工作。

  CACHE MANIFEST 文件

  cache manifest文件是一个简单的文本文件,其中列出了浏览器需要缓存的资源。

  引用一个MANIFEST文件

  为了让一个应用能启用application cache,需要在文档的html标签中包含manifest属性,如下所示:

  1<html manifest="example.appache" >

  2

  3 …

  4

  5</html>

  你需要在你想要缓存的web app的每一页中都包含 manifest 属性。如果一个页面没有 manifest属性,它将不会被缓存(除非在manifest文件中显式指定了这 个页面)。这意味着只要用户访问的页面包含manifest属性,它都将会被加入application cache中。这样,就不用在manifest文件中指定需要缓存哪些页面了。

  一个manifest文件需要正确的mime-type,即text/cache-manifest。你可以在你的web服务器中加入一个定制文件类型(a custom file type),或者加入一个 .htaccess 配置。

  例如,为了在Apache中能够解析这种mime-type,可以在你的配置文件中加入如下代码:

  AddType text/cache-manifest .appcache

  或者,如果你的应用是在Google App Engine中,那么在app.yaml文件中加入代码:

  - url: /mystaticdir/(.*\.appcache)

  static_files: mystaticdir/\1

  mime_type: text/cache-manifest

  upload: mystaticdir/(.*\.appcache)

  MANIFEST FILE的结构

  一个简单的manifest文件看起来可能是下面这样的:

  CACHE MANIFEST

  index.html

  stylesheet.css

  images/logo.png

  scripts/main.js

  这个示例将会缓存指定使用这个manifest的页面中的四个文件。

  有几点是需要注意的:

  必须在第一行包括 CACHE MANIFEST 字符串。

  站点所能缓存的数据上限是5MB 。但是,如果你是在为Chrome Web Store做开发的话,你可以使用unlimitedStorage 来去除这个限制。

  如果manifest文件或者是其中指定的某个资源下载失败的话,整个cache的更新都会失败。在这种情况下,浏览器将会使用老的application cache。

  下面来看一个更复杂的例子:

  CACHE MANIFEST

  # 2010-06-18:v2

  # Explicitly cached ‘master entries’.

  CACHE:

  /favicon.ico

  index.html

  stylesheet.css

  images/logo.png

  scripts/main.js

  # Resources that require the user to be online.

  NETWORK:

  login.php

  /myapi

  http://api.twitter.com

  # static.html will be served if main.py is inaccessible

  # offline.jpg will be served in place of all images in images/large/

  # offline.html will be served in place of all other .html files

  FALLBACK:

  /main.py /static.html

  images/large/ images/offline.jpg

  *.html /offline.html

  以“#”开头的都是注释,这些注释还可以起到另外的作用。一个应用只有在manifest文件发生变化时才会更新 cache。例如,如果你编辑了图像或是改写了一个Javascript函数,cache并不会发生更新。你必须改写manifest文件本身来通知浏览 器需要更新cache文件了。通过在manifest文件中添加一行注释,在其中写上版本号,或者文件hash值,或者时间戳,你都可以确保用户拥有你的 软件的最新版本。如果有新版本出现,你同样可以以编程的方式更新cache,就跟在Updating the cache 中所讨论的那样。

  一个manifest文件可能包括三个部分:CACHE, NETWORK 以及 FALLBACK.

  CACHE:

  这是默认部分,列在这个条目下的文件(或者紧跟在CACHE MANIFEST字符串之后的)都会在第一次被下载后进入cache。

  NETWORK:

  这一部分中所列出的资源都是需要联网使用的资源。它们都不会进入cache中,即使用户处于离线状态。这部分可能会使用Wildcards。

  FALLBACK:

  可选部分,指定了如果资源获取失败,将会呈现怎样的页面。第一个URL是资源,第二个就是fallback页面。两个URL都必须是相对地址,并且由同一个manifest文件指定。可以使用Wildcards。

  注意:这三部分可以以任何顺序在manifest文件中出现,并且每部分都可以在一个manifest文件中出现多次。

  下面的manifest文件定义了一个“catch-all”页面(offline.html),这个页面将会在用户试图离线访问网站根节点时显示。它还指明了需要联网使用的其他资源(如远程站点上的资源)。

  CACHE MANIFEST

  # 2010-06-18:v3

  # Explicitly cached entries

  index.html

  css/style.css

  # offline.html will be displayed if the user is offline

  FALLBACK:

  / /offline.html

  # All other resources (e.g. sites) require the user to be online.

  NETWORK:

  *

  # Additional resources to cache

  CACHE:

  images/logo1.png

  images/logo2.png

  images/logo3.png

  注意:引用了你的manifest文件的HTML文件都会自动被缓存,因此,没有必要在你的manifest文件中再指定这个文件,但是,在manifest文件中指定这个文件是一种更好的做法。

  注意:页面上基于SSL的HTTP cache headers以及caching restrictions都会被cache manifests重写。因此,基于https的页面也能离线工作。

  更新缓存(CACHE)

  如果一个应用是在离线情况下,那么它会保持它的缓存状态,除非有以下事件发生:

  用户清除了浏览器中存储有你的站点的数据。

  manifest file 被修改了。注意:修改了在manifest文件中列出的某个文件并不会让浏览器重新缓存资源。必须是manifest文件本身改变了,才会重新进行缓存。

  app cache通过编程更新了。

  缓存状态CACHE STATUS

  在程序中,你可以通过window.applicationCache 对象来访问浏览器的app cache。你可以查看 status 属性来获取cache的当前状态:

  01var appCache = window.applicationCache;

  02

  03switch (appCache.status) {

  04

  05 case appCache.UNCACHED: // UNCACHED == 0

  06

  07 return ‘UNCACHED’;

  08

  09 break;

  10

  11 case appCache.IDLE: // IDLE == 1

  12

  13 return ‘IDLE’;

  14

  15 break;

  16

  17 case appCache.CHECKING: // CHECKING == 2

  18

  19 return ‘CHECKING’;

  20

  21 break;

  22

  23 case appCache.DOWNLOADING: // DOWNLOADING == 3

  24

  25 return ‘DOWNLOADING’;

  26

  27 break;

  28

  29 case appCache.UPDATEREADY: // UPDATEREADY == 4

  30

  31 return ‘UPDATEREADY’;

  32

  33 break;

  34

  35 case appCache.OBSOLETE: // OBSOLETE == 5

  36

  37 return ‘OBSOLETE’;

  38

  39 break;

  40

  41 default:

  42

  43 return ‘UKNOWN CACHE STATUS’;

  44

  45 break;

  46

  47};

  为了通过编程更新cache,首先调用 applicationCache.update()。这将会试图更新用户的 cache(要求manifest文件已经改变)。最后,当 applicationCache.status 处于 UPDATEREADY 状态时, 调用applicationCache.swapCache(),旧的cache就会被置换成新的。

  01var appCache = window.applicationCache;

  02

  03appCache.update(); // Attempt to update the user’s cache.

  04

  05…

  06

  07if (appCache.status == window.applicationCache.UPDATEREADY) {

  08

  09 appCache.swapCache(); // The fetch was successful, swap in the new cache.

  10

  11}

  注意:像这样使用 update()和swapCache()并不会将更新后的资源 呈现给用户。这仅仅是让浏览器检查manifest文件是否发生了更新,然后下载指定的更新内容,重新填充app cache。因此,要让用户看到更新后的内容,需要两次页面下载,一次是更新app cache,一次是更新页面内容。

  好消息是,你可以避免两次页面下载带来的麻烦。为了让用户能看到你的站点的最新版本,设置一个监听器来监听页面加载时的updateready 事件。

  01// Check if a new cache is available on page load.

  02

  03window.addEventListener(‘load’, function(e) {

  04

  05 window.applicationCache.addEventListener(‘updateready’, function(e) {

  06

  07 if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {

  08

  09 // Browser downloaded a new app cache.

  10

  11 // Swap it in and reload the page to get the new hotness.

  12

  13 window.applicationCache.swapCache();

  14

  15 if (confirm(‘A new version of this site is available. Load it?’)) {

  16

  17 window.location.reload();

  18

  19 }

  20

  21 } else {

  22

  23 // Manifest didn’t changed. Nothing new to server.

  24

  25 }

  26

  27 }, false);

  28

  29}, false);

  APPCACHE事件(APPCACHE EVENTS)

  也许你已经想到了,还有更多事件可以反映出cache的状态。在诸如下载、app cache更新、出现错误等事件都会让浏览器触发相应事件。下面的代码片段为每一类cache event都设置了监听器:

  01function handleCacheEvent(e) {

  02

  03 //…

  04

  05}

  06

  07function handleCacheError(e) {

  08

  09 alert(‘Error: Cache failed to update!’);

  10

  11};

  12

  13// Fired after the first cache of the manifest.

  14

  15appCache.addEventListener(‘cached’, handleCacheEvent, false);

  16

  17// Checking for an update. Always the first event fired in the sequence.

  18

  19appCache.addEventListener(‘checking’, handleCacheEvent, false);

  20

  21// An update was found. The browser is fetching resources.

  22

  23appCache.addEventListener(‘downloading’, handleCacheEvent, false);

  24

  25// The manifest returns 404 or 410, the download failed,

  26

  27// or the manifest changed while the download was in progress.

  28

  29appCache.addEventListener(‘error’, handleCacheError, false);

  30

  31// Fired after the first download of the manifest.

  32

  33appCache.addEventListener(‘noupdate’, handleCacheEvent, false);

  34

  35// Fired if the manifest file returns a 404 or 410.

  36

  37// This results in the application cache being deleted.

  38

  39appCache.addEventListener(‘obsolete’, handleCacheEvent, false);

  40

  41// Fired for each resource listed in the manifest as it is being fetched.

  42

  43appCache.addEventListener(‘progress’, handleCacheEvent, false);

  44

  45// Fired when the manifest resources have been newly redownloaded.

  46

  47appCache.addEventListener(‘updateready’, handleCacheEvent, false);

  如果manifest文件或者该文件中指定的某个资源下载失败,那么整个更新都会失败。在这种情况下,浏览器会继续试用老的application cache。

分享到:
评论

相关推荐

    react-native-clear-app-cache:清理app缓存 React-Native模块封装 支持iOSAndroid

    react-native-clear-app-cache 功能介绍 支持 iOS Android 清理app缓存 安装使用 npm install --save react-native-clear-app-cache Then link with: react-native link react-native-clear-app-cache 运行示例

    应用卸载-Uninstall App - Clear Cache

    ② Use intelligent direct deletion of program files and associated cache files to easily uninstall programs; ③Currently only supports uninstalling applications other than system programs.

    MITMf-master.zip

    - ```AppCachePoison``` - Perform app cache poisoning attacks - ```Ferret-NG``` - Transperently hijacks sessions - ```BrowserProfiler``` - Attempts to enumerate all browser plugins of connected ...

    Programming.Google.App.Engine.with.Java

    The Memory Cache Chapter 13. Fetching URLs and Web Resources Chapter 14. Sending and Receiving Email Messages Chapter 15. Sending and Receiving Instant Messages with XMPP Chapter 16. Task Queues and ...

    connect-app-cache:HTML5 应用缓存支持作为连接中间件

    $ npm install connect-app-cache 在您的代码中使用它: $ var appCache = require('connect-app-cache'); 包含到连接应用程序中: $ connect.createServer(connectAppCache.appCache()); 包含在快速申请中: ...

    appengine-jsr107cache-1.7.3.zip

    jboss4-slf4j-loggerplugin.zip,用于jboss4的slf4j记录器插件

    Cache测试apk源码

    有时候我们需要测试android设备可用cache的大小,我这有一份自己写的代码,每点一次Button按钮就会占用1M左右的内存及cache,一直到出现强制关闭,此时就能测试出可用cache的大小了。

    cache链接.7z

    Cache数据库,东华Cache数据库链接 ,医疗数据库Cache

    ClearCache(5.0)

    通过反射机制,调用系统隐藏的API,清除手机所有的app缓存. 关键方法:freeStorageAndNotify。前提:添加AIDL文件 参考博客:http://blog.csdn.net/DucklikeJAVA/article/details/50951668

    appcache-gen:括号的应用程序缓存生成器扩展

    Brackets App Cache Buddy 用于生成和验证应用程序缓存清单的括号扩展。 要安装,请将appcache-buddy文件夹放在brackets/src/extensions/user文件夹中。 文件生成 在 Brackets 中打开一个项目,然后从PROJECT菜单...

    Appcache清洁「Appcache cleaner」-crx插件

    构建离线应用程序? 需要一个简单高效的工具来清理appcache和缓存吗? 此扩展名适合您! ... 当前页面的清单将根据范围删除。...它非常简单快捷:无需复杂的配置,只需单击两次即可。...支持语言:English

    错误提示的解决办法MATLAB Toolbox Path Cache is out of date and is not being used.

    Warning: MATLAB Toolbox Path Cache is out of date and is not being used.照提示键入 &gt;&gt;Type 'help toolbox_path_cache' for more info 然后是一个文档。 看到这里即可解决问题.文档中有操作的截图.

    AppUpdate-一个简单、轻量、可随意定制 的Android版本更新库 .zip

     name="app_update_cache"  path="/" /&gt; 兼容Android O及以上版本,需要设置NotificationChannel(通知渠道);库中已经写好可以前往查阅NotificationUtil.java温馨提示:升级对话框中的内容是可以上下滑动的哦!...

    华为官方固件UPDATE.APP解包打包工具

    &lt;File type="cache" partition="/dev/block/mmcblk0p17"&gt;cache.img &lt;File type="cust" partition="/dev/block/mmcblk0p18"&gt;cust.img &lt;File type="userdata" partition="/dev/block/mmcblk0p19"&gt;userdata.img ...

    Yii_RedisCache

    Yii框架使用redis插件之一,提供给同学们一起学习

    Note pad & Memo Pad for Chrome-crx插件

    语言:English (United States) 让您在Chrome的LocalStorage中存储Notes和备忘录,以便也可以离线访问它! **更新** Chrome Notes v11.10 - ... 它留在App Cache中,可以在重新启动Chrome后,清除历史和离线后访问!

    开源项目-muesli-go-app-paths.zip

    开源项目-muesli-go-app-paths.zip,go-app-paths lets you retrieve platform-specific paths, like app-data, cache, config and logs

    fastapi_cache:简单缓存FastAPI

    FastAPI缓存 将简单的轻量级缓存系统实现为FastAPI中的依赖项。 安装 pip install fastapi-cache 用法示例 from fastapi import Depends , FastAPI ... cache : RedisCacheBackend = Depends ( redis_cache

    app.cache.handler:此插件遍历html app.cache文件列表,并将其下载到本地文件夹

    var url = "This-Is-The-Url-Of-The-App-Cache"; var envelope = {} envelope[window.cacheHandler.constKeys.URL] = url; //The char which on which split operation based envelope[window....

    高性能 HTML5

    随着 HTML5 带来的诸多特性(包括 video and audio, canvas, SVG, app cache, localStorage, @font-face,等等)浏览器正在迎头赶上,希望能领先开发者采用这些新技术带来的 Web 应用大潮。 你的 HTML5 应用将会傲立...

Global site tag (gtag.js) - Google Analytics