慎用manifest.pdfVIP

慎用manifest——yaotaiyang Html5 已经被提过很久了，各种新属性出来，人们也都欢呼了一把，今天要讨论的是一 个html5 的新属性——manifest，可能有很多人已经用过该方法来优化自己的网站了。今天 来分享下我们在使用manifest的时候遇到的问题。 1. 1. 11..概念 该特性为HTML5的新特性，能够让web 程序指定可以缓存在本地的资源，以及缓 存策略，使得程序能够在离线时仍然能够运行，也可以使程序在线时也可以从本地加载 资源而不用重新从网络加载。 2. 2. 22..基本写法 要用manifest，就要了解其基本写法 通过在页面的html 标签中中引入： html manifest=/static/index/innovation/cache.manifest Cache.manifest 的文件写法： CACHEMANIFEST #3 /static/index/i.gif /static/hb/hot.gif /static/index/logo_index2.png NETWORK: * /su /wloc /static/tj.gif 第一行一定要写上CACHEMANIFEST，然后注释写后面，以后通过修改注释，来实现 manifest的更新。 A.路径写法不支持带端口，所以最好用相对路径吧，要不然线下测试机上开发，有 端口不好调试。 * * B.**号通配符有时候好像并不好使。如果在某些设备上出现问题，可以排查一下是 不是这个导致的。 # # C.##以后的内容虽然是注释，但是不能放到第一行，第一行必须是如上的大写字母。 3. 3. 33..离线后的页面 页面离线后，好处显而易见，页面可以秒开了（启动速度快）。你会感觉页面加载的速 度快了很多。但是也有一些问题。 A.页面都离线了，如何更新？首先，你可以修改下manifest文件来更新这个页面，这个 我就不介绍了，但是作为文章内容页面离线以后，就会存储在本地了，如果你是一篇文章的 话，那么这个文章的内容页就被存下来了，你如果以相同的url去访问，不管你文章里面的 数据更新没有，这个离线下来的页面都不会更新了(除非你更新manifest文件)。所以，所有 的动态数据，你都得用ajax方式去获取，就像客户端一样，离线的页面应该是一个没有数 ajax ajax 据的空壳，然后通过aajjaaxx去拉去数据填补这个空壳。然后要注意的是，ajax的请求地址， 要写到manifest 的network 中，要不然，你可以试试。 B.页面的参数如何携带？，还是刚才那个问题，文章页的壳如果缓存了，怎么样传数据 过来标识这个特点页面呢？比如/app?a=1b=2，通常我们用一些参数来标记这 个页面，通过参数来渲染页面内容，但是manifest 对于上面的方式，会认为不同的参数表示 不同的页面。如果你吧内容页做成一个无数据的空壳，这种传参的方式显然不行，好在不一 样的hash页面，manifest会认为是同一个页面，比如/app#detail-111111与 /app#detail-222222会认为和/app 是同一个缓存页面。这样我们就可 以通过hash传值了，当然，你也可以通过其它方式传值，比如写入cookie，写入localstorage 方式等等。 4. 4. 44..离线页面的更新 网站更新了，如果更新用户本地的离线页面呢？与很多文章中说的一样，先上线你的文件， 然后修改一下页面中引入的cache.manifest 文件即可，比如修改下注释，修改后，如果再 访问页面，就会先去校验manifest 时候有更新，如有更新，再次刷新页面的时候，页面就 会更新了。 A.长尾问题，就像前面说到的一样，如果你的manifest 文件更新了，你访问页面，需 要刷新一次，更新的页面才能load 进来，那