HTML5: caching offline applications
HTML5 presents several new features for the web, in particular: multi-threaded javascript (multi-threaded JavaScript), cross-document messaging (cross-document messaging), storing documents in the browser ( localStorage mechanism ). [...]
All browsers have their own kind of caching mechanism, but, honestly, these mechanisms do not always work. Let's say you are browsing a website on your laptop and then closing 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 properly cached the page, you will not be able to view it. You, of course, click on the "Forward" button, in the hope that at least it will load, but this does not happen either. And until you reconnect to the Internet, you cannot view these pages.
Before 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.
Browse 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. Usually style sheets apply to all pages of the site. The first time you load a page from a site, it takes some time to load the pages, but when you go to other pages of the same site, the browser no longer needs to download the same file again.
Server load reduction
each time you load a page containing any cached elements, the browser polls the server - rather than updated cached files; if not, it does not load them. Thus, the server load is significantly reduced.
The mechanism for allowing 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 should be a hyperlink to the manifest.cache file, which contains the rule for caching:
Here is how the manifest.cache file usually looks like:
The manifest.cache file has three headers:
* CACHE
* NETWORK
* FALLBACK
Please note that the MIME type of the manifest.cache file is text / cache-manifest. You may need to add a non-standard type of Apache bind file extension (or any other web server you use) or set the mime-type, for example, using the PHP header directive.
Files listed after CACHE will be cached immediately after they load; files listed after NETWORK are considered whitelisting. 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 (ref. "Fault Remediation") contains entries that provide a backup strategy. If the browser is unable to restore the original content, the 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 the execution of resource load requests contained in / api, 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 the readability of the code, comments have another possibility of use. Imagine that you indicated that masthead.png should be cached; but you have updated the image. Now, since the cache will be updated only when the manifest changes, the user will continue to see the old cached image. You can solve the problem by changing the 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 have noticed an error or inaccuracy, please indicate them in the comments - I will definitely fix it.
B / If you have in mind any interesting, not yet translated, article on HTML / CSS / PHP, etc. in English. language - write in lichku (if published, thanks at the beginning of the article for help in finding your nickname - guaranteed :).
Caching applications to work offline
All browsers have their own kind of caching mechanism, but, honestly, these mechanisms do not always work. Let's say you are browsing a website on your laptop and then closing 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 properly cached the page, you will not be able to view it. You, of course, click on the "Forward" button, in the hope that at least it will load, but this does not happen either. And until you reconnect to the Internet, you cannot view these pages.
Before 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.
Browse 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. Usually style sheets apply to all pages of the site. The first time you load a page from a site, it takes some time to load the pages, but when you go to other pages of the same site, the browser no longer needs to download the same file again.
Server load reduction
each time you load a page containing any cached elements, the browser polls the server - rather than updated cached files; if not, it does not load them. Thus, the server load is significantly reduced.
How it works
The mechanism for allowing 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 should be a hyperlink to the manifest.cache file, which contains the rule for caching:
<! DOCTYPE HTML> <html manifest = "manifest.cache"> ...
Here is how 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
The manifest.cache file has three headers:
* CACHE
* NETWORK
* FALLBACK
Please note that the MIME type of the manifest.cache file is text / cache-manifest. You may need to add a non-standard type of Apache bind file extension (or any other web server you use) or set the mime-type, for example, using the PHP header directive.
Files listed after CACHE will be cached immediately after they load; files listed after NETWORK are considered whitelisting. 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 (ref. "Fault Remediation") contains entries that provide a backup strategy. If the browser is unable to restore the original content, the 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 the execution of resource load requests contained in / api, 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 the readability of the code, comments have another possibility of use. Imagine that you indicated that masthead.png should be cached; but you have updated the image. Now, since the cache will be updated only when the manifest changes, the user will continue to see the old cached image. You can solve the problem by changing the 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 have noticed an error or inaccuracy, please indicate them in the comments - I will definitely fix it.
B / If you have in mind any interesting, not yet translated, article on HTML / CSS / PHP, etc. in English. language - write in lichku (if published, thanks at the beginning of the article for help in finding your nickname - guaranteed :).
Source: https://habr.com/ru/post/71939/
All Articles