Challenge Overview
Challenge Overview:
Welcome to the AngularJS/HTML5 Browser Cache Clearing Challenge! The goal of this challenge is to implement solutions for browser cache clearing forcefully using AngularJS.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Challenge Requirements:
The purpose of this contest is to forcefully treat a new deployment of a web application as if it were the first time that the user has ever visited the site. Currently, when a new version of the web app is deployed, the user experience varies based on browser type, browser version and contents of their local cache. This results in mis-rendering of the site on occasions or cached data leading to incorrect execution of the site. The desired outcome is that the deployment of a new version of the web application forces a client cache reset or other action to allow the site to render correctly.
That does mean that if the user is in the middle of using the web application that they would be forcefully logged out of the app, have all their cached content purged, and possibly some defined values stored in the local datastore or cookies erased as well. It should be an experience as if the user were hitting a brand new url although none of the urls will actually change.
The system is not 100% HTML5 due to the need to support browsers like IE8 which are not compliant. However, HTML5 solutions are desired as a first choice option with a fallback stratagem for those which are not compliant with HTML5.
The desired solution is not restricted to being purely code though currently it is unknown how to achieve this without it being on the code level. The system runs behind an Apache web server so configuration off apache web server is also an option or may be incorporated as part of the solution if needed.
The overall goal is to have as few steps as possible to reload everything. We are not married to anything currently. As part of HTML5 solution, a manifest cache is used but we need a way to force-reload the manifest cache. Currently a timestamp comment is used. However, this needs to be reloaded even if the user is in the middle of doing something as the application is a single page rich application and no page reloads ever happen for many users.
As part of the non-HTML5 solution, a forced browser clear cache is needed. Again same restrictions as above where the user needs to be forced into having that happen as it is a single page rich application and the user doesn't refresh the page normally.
A way to force clearing the $cacheFactory of AngularJS in much the same way we would a cache manifest. We do utilize many templates that are partial html files as individual files and not embedded within the JavaScript files. We do not wish to have them embedded in the JavaScript file and want them to remain as html files. Because the partials are cached in the cache factory, we need a way to force clearing all if not specifically modified ones (please discuss if you have any suggestions on this).
A way to force logout the user even if they are in the middle of something without the user having to refresh the page. A user is considered logged out when the "authToken" store in the local datastore (or cookie for browsers not supporting a local datastore) is erased and a message broadcasted within the AngularJS code to indicate an auth state change has taken place. Preferable though given the other requirements would be to simply erase the authToken and force reload the page.
A really nice to have but not absolutely required is a way for us to specify specific local datastored values to be erased on a new release. Sometimes we change the meaning or format of a particular setting. A way to delete specified
values (not all values). It is rare that these type of changes happen.
All the forced refresh/cache clearing stuff should happen only 1 time for any given application deployment. The user should not continually experience this behavior on a periodic basis. Only when a new version of the application is
deployed and possibly again if it is ever rolled back (to a version containing the refresh solution) if the user already had a forced refresh take place under the new version.
The idea solution would be to simply have the manifest containing a timestamped version comment be the only indicator that lets the system know to do all of the above (reload page, clear cache, clear cache factory, logout user, erase certain specified local data store options). Solutions must work without any user interaction however as the user clicking on links or doing something does not cause any page reloads to take place.
Browsers Requirements:
- IE8+ on PC
- Safari on MAC & PC
- Firefox on MAC & PC
- Chrome on MAC & PC
Technology Stack:
- AngularJS 1.2.x (http://angularjs.org).
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
- Provide documentation for any deployments and also how test submitted app with steps.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.