October 9, 2009 at 11:00HTML5: caching offline apps
- Transfer
HTML5 introduces several new features for the web, in particular: multi-threaded javascript (multi-threaded JavaScript), cross-document messaging (cross-document messaging), document storage in the browser ( localStorage mechanism ). [...]
All browsers have their own kind of caching mechanism, but, to be honest, these mechanisms do not always work. Let's say you browse a site on your laptop and then close it. A little later, you open the laptop and click on the "Back" button in the browser, hoping to see the previous page that was opened. However, if you are not already connected to the Internet or the browser has not cached the page properly, you will not be able to view it. Of course, you click on the “Forward” button, in the hope that at least it will load, but this does not happen. And until you connect to the Internet again, you will not be able to view these pages.
Prior to HTML4, the only way out was to save each page manually. HTML5 provides a more elegant solution. During the creation of the site, the developer can determine the files that the browser should cache. In fact, on each page, you can specify which documents should be cached. Thus, if you refresh the page when you are already offline, the page will still load properly. This type of caching has several advantages.
Viewing web pages offline
as the name implies, the user can view the site even when he is offline
Speed
Files cached locally will load much faster. Typically, style sheets apply to all pages of a site. The first time you download a page from a site, loading pages takes some time, but when you go to other pages of the same site, the browser no longer needs to download the same file again.
Reducing the load on the server
every time you load a page containing any cached items, the browser polls the server for whether the cached files have been updated; if not, he doesn’t download them. Thus, server load is significantly reduced.
The mechanism that allows a website to be accessible to the user, even if they are not connected, is very simple. You need to register the manifest attribute in the html tag. The attribute value must be a hyperlink to the manifest.cache file, which contains the rule for caching:
And here is what the manifest.cache file usually looks like:
There are three headers in the manifest.cache file:
* CACHE
* NETWORK
* FALLBACK
Note that the MIME type of the manifest.cache file is text / cache-manifest. You may need to add a non-standard type of extension of the binding file to Apache (or to any other web server that you use) or set the mime-type, for example, using the PHP header directive.
Files listed after CACHE will be cached immediately after they are downloaded; and files listed after NETWORK are considered a whitelist. This means that they need a direct connection to the server. If the user is not connected to the server, the browser should not display the cached version instead.
The FALLBACK section (lit. “Failover”) contains entries that provide a backup strategy. If the browser is not able to restore the original content, a backup resource will be used. In the example above, we display a static image in case the dynamic is unavailable.
The last line in the NETWORK section contains the path to the folder to ensure that requests for loading resources contained in / api are executed, which will avoid caching and always receive data from the server.
In the manifest, any line starting with # is treated as a comment. In addition to increasing code readability, comments have another use case. Imagine that you indicated that the masthead.png file should be cached; but you updated the image. Now, since the cache will only be updated when the manifest changes, the user will continue to see the old cached image. You can solve the problem by changing part of the manifest; for example, a good way would be to increase the version number each time you update your site.
A / If you notice a mistake or inaccuracy, please indicate them in the comments - I will definitely correct it.
B / If you have in mind any interesting, not yet translated article in HTML / CSS / PHP, etc. in English. language - write in a personal email (if published, thanks at the beginning of the article for help in finding your nickname are guaranteed :).
Offline application caching
All browsers have their own kind of caching mechanism, but, to be honest, these mechanisms do not always work. Let's say you browse a site on your laptop and then close it. A little later, you open the laptop and click on the "Back" button in the browser, hoping to see the previous page that was opened. However, if you are not already connected to the Internet or the browser has not cached the page properly, you will not be able to view it. Of course, you click on the “Forward” button, in the hope that at least it will load, but this does not happen. And until you connect to the Internet again, you will not be able to view these pages.
Prior to HTML4, the only way out was to save each page manually. HTML5 provides a more elegant solution. During the creation of the site, the developer can determine the files that the browser should cache. In fact, on each page, you can specify which documents should be cached. Thus, if you refresh the page when you are already offline, the page will still load properly. This type of caching has several advantages.
Viewing web pages offline
as the name implies, the user can view the site even when he is offline
Speed
Files cached locally will load much faster. Typically, style sheets apply to all pages of a site. The first time you download a page from a site, loading pages takes some time, but when you go to other pages of the same site, the browser no longer needs to download the same file again.
Reducing the load on the server
every time you load a page containing any cached items, the browser polls the server for whether the cached files have been updated; if not, he doesn’t download them. Thus, server load is significantly reduced.
How it works
The mechanism that allows a website to be accessible to the user, even if they are not connected, is very simple. You need to register the manifest attribute in the html tag. The attribute value must be a hyperlink to the manifest.cache file, which contains the rule for caching:
...
And here is what the manifest.cache file usually looks like:
# v1 # this is how you add a comment to the manifest. CACHE MANIFEST index.html stylesheet.css images / masthead.png scripts / misc.js NETWORK: search.php login.php / api FALLBACK: images / dynamic.php static_image.png
There are three headers in the manifest.cache file:
* CACHE
* NETWORK
* FALLBACK
Note that the MIME type of the manifest.cache file is text / cache-manifest. You may need to add a non-standard type of extension of the binding file to Apache (or to any other web server that you use) or set the mime-type, for example, using the PHP header directive.
Files listed after CACHE will be cached immediately after they are downloaded; and files listed after NETWORK are considered a whitelist. This means that they need a direct connection to the server. If the user is not connected to the server, the browser should not display the cached version instead.
The FALLBACK section (lit. “Failover”) contains entries that provide a backup strategy. If the browser is not able to restore the original content, a backup resource will be used. In the example above, we display a static image in case the dynamic is unavailable.
The last line in the NETWORK section contains the path to the folder to ensure that requests for loading resources contained in / api are executed, which will avoid caching and always receive data from the server.
In the manifest, any line starting with # is treated as a comment. In addition to increasing code readability, comments have another use case. Imagine that you indicated that the masthead.png file should be cached; but you updated the image. Now, since the cache will only be updated when the manifest changes, the user will continue to see the old cached image. You can solve the problem by changing part of the manifest; for example, a good way would be to increase the version number each time you update your site.
Notes:
A / If you notice a mistake or inaccuracy, please indicate them in the comments - I will definitely correct it.
B / If you have in mind any interesting, not yet translated article in HTML / CSS / PHP, etc. in English. language - write in a personal email (if published, thanks at the beginning of the article for help in finding your nickname are guaranteed :).