• HTML5 离线缓存manifest


    1、简介
    W3C官方对manifest的介绍是HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。


    应用程序缓存为应用带来三个优势:

    离线浏览 - 用户可在应用离线时使用它们
    速度 - 已缓存资源加载得更快
    减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
    在使用过程中我总结了几个缺点:
    manifest中cache部分不能使用通配符,如果缓存页引入大量JS,图片,写起来比较麻烦,虽然可以使用grunt-manifest自动生成
    如果页面是通过ajax请求拼接出来的页面中含有图片,这些图片又是从web上传的,这些图片也必须写入缓存文件,否则下次就读不出来了。大大降低了实用性

    2、mainifest实例
    html中写法
    <!doctype html>
    <html manifest="index.manifest">
    <head>
    <meta charset="utf-8">
    <title>应用中心</title>
    注意:每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
    manifest 文件可分为三个部分:

    CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
    NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
    FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)


    缓存是否成功加载可以用Chrome打开这个页面就可以在控制台中找到这个manifest的工作信息:


    再次请求此页面的时候:

    如果有报错的话,会有提示:

    3、缓存更新
    一旦应用被缓存,它就会保持缓存直到发生下列情况:

    用户清空浏览器缓存
    manifest 文件被修改
    由程序来更新应用缓存
    开发者也可以使用 window.applicationCache 的接口更新缓存
    获取缓存状态:window.applicationCache.status
    为了通过编程更新cache,首先调用 applicationCache.update()。这将会试图更新用户的 cache(要求manifest文件已经改变)。最后,当 applicationCache.status 处于 UPDATEREADY 状态时, 调用applicationCache.swapCache(),旧的cache就会被置换成新的。
    4、自动化工具
    manifest中cache部分不能使用通配符,如果缓存页引入大量JS,图片,写起来比较麻烦,这时候就可以使用自动化工具grunt-manifest。
    grunt-manifest GitHub地址
    grunt搭建查看:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
    安装grunt-manifest

    npm install grunt-manifest --save-dev

    载入:

    grunt.loadNpmTasks('grunt-manifest');
    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      manifest: {
        generate: {
          options: {
            basePath: '../',
            cache: ['js/app.js', 'css/style.css'],
            network: ['http://*', 'https://*'],
            fallback: ['/ /offline.html'],
            exclude: ['js/jquery.min.js'],
            preferOnline: true,
            headcomment: " <%= pkg.name %> v<%= pkg.version %>",
            verbose: true,
            timestamp: true,
            hash: true,
            master: ['index.html'],
            process: function(path) {
              return path.substring('build/'.length);
            }
          },
          src: [
              'build/some_files/*.html',
              'build/js/*.min.js',
              'build/css/*.css'
          ],
          dest: 'manifest.appcache'
        }
      }
    });

    其中options定义生成manifest的一些自定义参数,src是要生成的文件,dest是输出文件。

    options下有很多参数,主要参数如下:

    basePath 设置出入文件的根目录

    cache 手动添加缓存文件

    network 手动添加网络文件

    fallback 手动添加后备文件

    exclude 设置不添加到cache的文件

    verbose 是否添加版权信息

    timestamp是否添加时间戳

    5、注意事项
    浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)。
    如果manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程都将失败,浏览器继续全部使用老的缓存。
    引用manifest的html必须与manifest文件同源,在同一个域下。
    FALLBACK中的资源必须和manifest文件同源。
    当一个资源被缓存后,该浏览器直接请求这个绝对路径也会访问缓存中的资源。
    站点中的其他页面即使没有设置manifest属性,请求的资源如果在缓存中也从缓存中访问。
    当manifest文件发生改变时,资源请求本身也会触发更新。
    系统会自动缓存引用清单文件的 HTML 文件
    manifest文件中CACHE则与NETWORK,FALLBACK的位置顺序没有关系,如果是隐式声明需要在最前面

  • 相关阅读:
    [五、交互操作]15使用DisclosureGroup视图实现点餐功能
    [五、交互操作]13使用AppStore Overlay向用户推荐其他的应用
    [五、交互操作]11预览视图在正常模式和黑暗模式下的效果
    [五、交互操作]10在预览窗口使用不同的模拟器预览用户界面
    [五、交互操作]8借助sizeCategory预览不同字体下的文本视图
    [五、交互操作]14使用fileExporter将文档导出到iCloud
    int(1) 和 int(10) 有什么区别?资深开发竟然都理解错了!
    Spring Boot 3.0 M1 发布,正式弃用 Java 8,最低要求 Java 17。。。
    发了 20w 年终奖,太激动了。。。
    头条面试官:如何设计群聊消息的已读未读功能?懵了。。
  • 原文地址:https://www.cnblogs.com/ivan5277/p/11635668.html
Copyright © 2020-2023  润新知