Downloaded 12 times
Uploaded bySP Balamurugan
Offline Storage
The document describes how to implement offline capabilities in HTML5 web applications using the application cache (appcache) interface, allowing developers to specify which files are cached for offline usage. It outlines steps like adding .htaccess support, creating and linking a manifest file, and important considerations for cache update processes. Additionally, it provides information about browser support and references for further reading.
More Related Content
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
Offline Storage
- 1. OFFLINE & STORAGE APPCACHE, LOCAL STORAGE & SESSION STORAGE
- 2. Offline HTML5 Webapps Yes, the website can work even if you are Offline How ?
- 3. ApplicationCache interface The ApplicationCache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly, even if the user presses the refresh button while they're offline.
- 4. Steps to achieveapp cache 1. Add .htaccess support 2. Create the manifest file 3. Link your manifest file to the html document
- 5. Add .htaccess support Openthe .htaccess file, which is located on your website root, and add the following code: AddType text/cache-manifest .manifest This directive makes sure that every .manifest file is served as text/cache-manifest. If the file isn’t, then the whole manifest will have no effect and the page will not be available offline.
- 6. Simple manifest file Createa .manifest file with following code. CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js
- 7. Complex manifest file CACHEMANIFEST #This is a comment CACHE: index.html style.css NETWORK: search.php login.php FALLBACK: /api offline.html
- 8. Link your manifestfile to the html document add the manifest attribute to the html element as below. <html manifest="/offline.manifest">
- 9. Things to remember 1.TheCACHE MANIFEST string is the first line and is required. 2. If the manifest file or a resource specified in it fails to download, the entire cache update process fails. The browser will keep using the old application cache in the event of failure. 3. The HTML file that references your manifest file is automatically cached. There's no need to include it in your manifest, however it is encouraged to do so.. 4. HTTP cache headers and the caching restrictions imposed on pages served over SSL are overridden by cache manifests. Thus, pages served over https can be made to work offline.
- 10. UPDATING THE CACHE Oncean application is offline it remains cached until one of the following happens: 1. The user clears their browser's data storage for your site. 2. The manifest file is modified. Note: updating a file listed in the manifest doesn't mean the browser will re-cache that resource. The manifest file itself must be altered. 3. The app cache is programmatically updated.
- 11. Status Codes ‘window.applicationCache’ objectis your programmatic way to access the browser's app cache. Its status property is useful for checking the current state of the cache: appCache.status returns one of the values. UNCACHED == 0 IDLE == 1 CHECKING == 2 DOWNLOADING == 3 UPDATEREADY == 4 OBSOLETE == 5
- 12. Update via code varappCache = window.applicationCache; appCache.update(); // Attempt to update the user's cache. ... if (appCache.status == window.applicationCache.UPDATEREADY) { appCache.swapCache(); // The fetch was successful, swap in the new cache. }
- 13.
- 14. Popular web appsusing this are…
- 15. Browser Support IE: Nosupport Firefox: 3.5+ Safari: 4.0+ Chrome: 5.0+ Opera: 10.6+ iPhone: 2.1+ Android: 2.0+