Let’s Take This Offline

leonzhx

浏览: 786710 次
性别:
来自: 上海

最近访客更多访客>>

u012363178

justsimple

cdphantom

wang_xuewu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2014-05 ( 22)
2014-04 ( 47)
2014-03 ( 25)
更多存档...

博客分类：

Dive Into HTML5 读书笔记

1. An offline web application is a list of URLs — HTML, CSS, JavaScript, images, or any other kind of resource. The home page of the offline web application points to this list, called a manifest file, which is just a text file located elsewhere on the web server. A web browser that implements HTML5 offline applications will read the list of URLs from the manifest file, download the resources, cache them locally, and automatically keep the local copies up to date as they change. When the time comes that you try to access the web application without a network connection, your web browser will automatically switch over to the local copies instead.

2. There’s a flag in the DOM that will tell you whether you’re online or offline. There are events that fire when your offline status changes (one minute you’re offline and the next minute you’re online, or vice-versa).

3. A cache manifest file is a list of all of the resources that your web application might need to access while it’s disconnected from the network. In order to bootstrap the process of downloading and caching these resources, you need to point to the manifest file, using a manifest attribute on your <html> element:

<!DOCTYPE HTML>

<html manifest="/cache.manifest">

<body>

...

</body>

</html>

Your cache manifest file must be served with the content type text/cache-manifest .

4. Every page of your web application needs a manifest attribute that points to the cache manifest for the entire application.

5. The first line of every cache manifest file is:

CACHE MANIFEST

After that, all manifest files are divided into three parts: the “explicit” section, the “fallback” section, and the “online whitelist” section. Each section has a header, on its own line. If the manifest file doesn’t have any section headers, all the listed resources are implicitly in the “explicit” section.

6. The line marked CACHE: is the beginning of the “explicit” section. Resources in the “explicit” section will get downloaded and cached locally, and will be used in place of their online counterparts whenever you are disconnected from the network.

7. When you navigate to an HTML page with a manifest attribute, the page itself is assumed to be part of the web application, so you don’t need to list it in the manifest file itself. However, if your web application spans multiple pages, you should list all of the HTML pages in the manifest file, otherwise the browser would not know that there are other HTML pages that need to be downloaded and cached.

8. The line marked NETWORK: is the beginning of the “online whitelist” section. Resources in this section are never cached and are not available offline. (Attempting to load them while offline will result in an error.)

9. The line marked FALLBACK: is the beginning of the “fallback” section. In a fallback section, you can define substitutions for online resources that, for whatever reason, can’t be cached or weren’t cached successfully:

CACHE MANIFEST

FALLBACK:

/ /offline.html

NETWORK:

*

The first part of the line (before the space) is URL pattern. The single character (/) will match any page on your site. When you try to visit a page while you’re offline, if your browser doesn’t find the page in the appcache, instead of displaying an error message, it will display the page /offline.html , as specified in the second half of that line in the fallback section.

10. When you visit any page that points to a cache manifest, your browser says “hey, this page is part of an offline web application, is it one I know about?” If your browser hasn’t ever downloaded this particular cache manifest file, it will set up a new offline “appcache” (short for “application cache”), download all the resources listed in the cache manifest, and then add the current page to the appcache. If your browser does know about this cache manifest, it will simply add the current page to the existing appcache. It means that you can have an offline web application that “lazily” adds pages as you visit them. You don’t need to list every single one of your HTML pages in your cache manifest.

11. A single start character ( * ) has special meaning in a network section. It’s called the “online whitelist wildcard flag.” That’s a fancy way of saying that anything that isn’t in the appcache can still be downloaded from the original web address, as long as you have an internet connection. This is important for an “open-ended” offline web application. Without this wildcard flag, the browser wouldn’t load any externally-hosted images or videos.

12. When your browser visits a page that points to a cache manifest, it fires off a series of events on the window.applicationCache object:

a) As soon as it notices a manifest attribute on the <html> element, your browser fires a checking event. The checking event is always fired, regardless of whether you have previously visited this page or any other page that points to the same cache manifest.

b) If your browser has never seen this cache manifest before:

§ It will fire a downloading event, then start to download the resources listed in the cache manifest.

§ While it’s downloading, your browser will periodically fire progress events, which contain information on how many files have been downloaded already and how many files are still queued to be downloaded.

§ After all resources listed in the cache manifest have been downloaded successfully, the browser fires one final event, cached .

c) On the other hand, if you have previously visited this page or any other page that points to the same cache manifest, your browser will check whether the cache manifest changed since the last time your browser checked it:

§ If the answer is no, your browser will immediately fire a noupdate event.

§ If the answer is yes, your browser will fire a downloading event and start re-downloading every single resource listed in the cache manifest. While it’s downloading, your browser will periodically fire progress events, which contain information on how many files have been downloaded already and how many files are still queued to be downloaded. After all resources listed in the cache manifest have been re-downloaded successfully, the browser fires one final event, updateready .

§ The new version is not yet in use. To “hot-swap” to the new version without forcing the user to reload the page, you can manually call the window.applicationCache.swapCache() function.

13. If, at any point in the above process, something goes horribly wrong, your browser will fire an error event and stop. Here is a hopelessly abbreviated list of things that could go wrong:

a) The cache manifest returned an HTTP error 404 (Page Not Found) or 410 (Permanently Gone).

b) The cache manifest was found and hadn’t changed, but the HTML page that pointed to the manifest failed to download properly.

c) The cache manifest changed while the update was being run.

d) The cache manifest was found and had changed, but the browser failed to download one of the resources listed in the cache manifest.

14. Your browser checks whether a cache manifest file has change as below:

a) Via normal HTTP semantics, Some of these HTTP headers (Expires and Cache-Control) tell your browser how it is allowed to cache the file without ever asking the server whether it has changed.

b) If the cache manifest has expired (according to its HTTP headers), then your browser will ask the server whether there is a new version, and if so, the browser will download it.

c) Once it’s downloaded the new cache manifest file, your browser will check the contents against the copy it downloaded last time. If the contents of the cache manifest file are the same as they were last time, your browser won’t re-download any of the resources listed in the manifest.

15. If your cache manifest file hasn’t changed, the browser will never notice that one of the previously cached resources has changed. The easiest way is to include a comment line with a revision number in cache manifest. Change the revision number in the comment when some of the resources listed in cache manifest has been changed. Then the web server will return the newly changed cache manifest file, your browser will notice that the contents of the file have changed, and it will kick off the process to re-download all the resources listed in the manifest.

分享到：

源代码（Source Code） | A Place To Put Your Stuff

2012-06-09 23:32
浏览 926
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论