HTML5 Cache Manifest: Fallback section & Network *

Question

from Immerse yourself in HTML5: Cache Manifest: Fallen Section

CACHE MANIFEST FALLBACK: / /offline.html NETWORK: * 

I don't understand from the url that exactly matches this block of code. Does the backup partition mean when nothing is found, show the offline.html page

then network: * all resources be cached? he speaks also

It uses common CSS, JavaScript, and images on every page. Each of these resources must be listed explicitly in CACHE

it looks like it conflicts with network: * , where everything seems to be caching?

Answer 1

There are three types of headers in cache manifests, CACHE, NETWORK, and FALLBACK. Everything that is not under the heading is implicitly set under CACHE. Explanation of each section:

CACHE: Files under this heading will be cached.

NETWORK: Files under this heading require an Internet connection and therefore will NOT be cached.

FALLBACK: Files that match the templates under this heading (for example, the "/" template that matches all files) and have not been cached, will instead have a backup file.

As for the Dive code block in HTML 5, there is an explanation of the “NETWORK: *” part below it:

This means that while you are browsing this hypothetical offline Wikipedia online, your browser will retrieve images and videos and other attached resources, even if they are in a different domain. (This is common on large websites, even if they are part of an offline expression network. HTML pages are created and served locally, while images and videos are served from the CDN to another domain.) Without this template flag, our hypothetical offline mode Wikipedia will behave strangely when you are online - in particular, it will not upload external images or videos!

The following quote:

It uses common CSS, JavaScript, and images on every page. Each of these resources must be listed explicitly in CACHE.

means that you must include all the necessary CSS, Javascript, and image files in the manifest under the CACHE heading. It does not conflict with "NETWORK: *" because the NETWORK header does NOT mean "cache everything." This actually means the opposite: everything under the NETWORK heading requires an Internet connection and should not be cached.

Answer 2

I found out more useful stuff about FALLBACK:

After a little experiment, I tried various things, including files in FALLBACK: should generally appear in the CACHE or NETWORK sections. The answer seems to be no.

As an example ... GET OFF: sign-up-portrait.png offline-portrait-1.png sign-up-landscape.png offline-landscape-1.png

I recently pointed this out on one of my microsites. The goal is to show log files with online and offline mon files offline. It works well. In particular, the files on the left side of each line are implicit, as if they were in the NETWORK section, the site will always try to get them on the Internet. They should also not be added to the NETWORK section, otherwise it seems to override what is in FALLBACK. In addition, fortunately, the files on the right are implicitly added to the CACHE section: therefore, even if they are not used at first, they are cached on first boot without the need to explicitly add them to CACHE: although you can add them there too if you want. It does not matter.

For this configuration, looking at the web server logs, I see that every time the page is refreshed, apache logs 304 against the manifest file and against the log file that is required for this version of the page (there is a CSS CSS selector that determines based on page size ) Therefore, it always always checks the log files, as well as the usual manifest check, which is exactly what I want.

To be thorough, I tried to find out if a root file is needed in the CACHE: section. It turns out that this is not so! If your top-level file is index.html and it has a manifest file specified in its html tag, then the manifest file should not contain index.html anywhere, it is implicitly cached.

I am wondering how much the application cache can expand. Can you include other html files related to or in the iframe? Or should they all have their own manifest files, which are separate? Anyone want to comment?

Component comment about the format, do not make the mistake I made, and this needs to be added ... NETWORK file1.js

The lack of a colon makes it completely break, thinking that NETWORK is its own resource.

It must be ... NETWORK: file1.js