![]() If you want to see what has been cached you can navigate to chrome://appcache-internals in Chrome.ĭid you notice the ‘Remove’ link there? Yes, users can clear their offline cache.įrom there by clicking on ‘View Entries’ you can see a list of cached pages and can even drill down and see the pages too.ĪppCache manifest “file” should start with ‘CACHE MANIFEST’ and then come three optional sections: CACHE, NETWORK and FALLBACK: ( This is what you should see in your console when you navigate to the Contacts page in the phone book application for the first time) It then goes through the entries in the manifest and caches them all too. When the browser sees the manifest, it will download and cache the manifest as well as the page with the manifest attribute. You tell the browser about the manifest through manifest attribute of the html tag. You use offline cache (also known as AppCache) to make the resources available in offline mode and use client side storage so users can add, update and remove data without connectivity.ĪppCache is communicated to the browser through a resource known as AppCache Manifest. Offline web apps are composed of two parts: offline cache and client side storage. If you are interested to learn more about Fiddler I have an extensive two part tutorial here and here or you may watch my DDDBrisbane about it here. For the keyboard lovers hit ctrl+alt+f to bring Fiddler to the front and then hit F12 to toggle capture. You can then activate and deactivate the offline mode from Fiddler by starting and stopping the capture. This will simulate the unavailable server. Setup an Auto Responder rule that rejects the requests from the website with a non-successful http status e.g. Stopping and restarting web server or unplugging ethernet cable is a bit of pain. You can use a correlation id that is communicated to the server to make the sync operation idempotent.Ī quick tip if you are writing an offline web app and want to constantly check how your app behaves in offline mode. You will need to implement some logic to deal with failures and reattempts while making sure that you will not double up the records. When you fire up your dev web server again and navigate to the Contacts page you can see the records getting synced up to the server and then removed from local storage.Īgain this is just a sample app. Also the contacts you add are added to the local storage. When the web server is down the pages are served from cache. Now navigate around the web site, go to the Contacts page, create contacts and so on to see how the web site works in offline mode. After the caching has completed stop your dev web server to simulate an offline situation. If you now navigate to the Contacts page you can see in the console that the browser starts caching the pages and resources. Open the Chrome Dev Tools and bring up the console. The app may not behave properly in other browsers - I told you this is demo quality :p To see the phone book web app in action run it Chrome which is the browser I have used to build and test the application. ![]() Feel free to check the code out as a sample for how offline web apps can be done but don’t use it as is - a LOT must be improved on it. ![]() So I had to cut down on every possible bit of noise and keep the code to its simplest form. This code is written to be demoed over 5 minutes. You may also find the code from my GitHub account here. Not that I have a lot of slides for a five minute talk but you may find my slidedeck here just in case you are interested. The sample is built for my What Do You Know talk. I have put together a very simple phone book web application to show some of these features. If you want to dig deeper and learn more I have also provided reference to some great articles about each topic. Instead I will show you techniques and ideas to get you started quickly and cover a lot of gotchas and provide quite a few tips on how to and not to do offline web. This is not an extensive post going through every single details. I this post I explain how you can do that. So you have got an awesome website and you want to make it even more awesome by making it (or parts of it) available to your users in offline mode.
0 Comments
Leave a Reply. |