Introduction about caching (PWA)

gistfile1.txt

This is the current flow and some details about the implemented features:

1. When the user visits the app, the service worker caches the "index.html" file and the "static assets", 
after that, every page that the user visits it, the service worker caches, 
so for example, if we go to "reports" page, after visiting will cache that page, 
if we go to "surveys" page after visiting will cache and so on. 
If the user disconnect the internet connection (or turn "offline" mode in the browser's dev tools, on network section) and 
refresh the page, the app should still load and the user can navigate between the "cached pages". 

2. We are caching the following resources:
a. index.html page
b. App static assets (css, js and fonts)
c. http "GET" requests from the backend (by default from the addon)

3. By default the service worker is not active on develop and testing environment, 
if we want to activate in development environment, we need to change in the file `ember-cli-build.js` in the `ember-service-worker` attribute `enabled` set to `true`:

```
'ember-service-worker': {
  enabled: true,
  versionStrategy: 'every-build'
},
```

After that if you make a new change on the app, this will be not reflected until you do a new build of the app 
(stop the cli and start again) or in chrome console, in "Application" tab, on "Service Worker" section 
mark the checkbox of "Update on reload".

Some notes: Today 05/29 we found an important thing to note, always you need to verify if the most recent 
service worker file is working when you run the application. 
You can verify in chrome console, in "Application" tab, on "Service Worker" section.

4. Every time when we have a connection event from the browser (online event or offline event) 
a notification message appears in the top corner of the page, to communicate the state of the connection to the user.

5. When is "offline", the map doesn't renders and all buttons related to create, update and delete are disabled 
on the main pages (index of each page). When the connection back, the map renders and all buttons are enabled again.

6. Versioning
Each time when build the app a new version is created, a new version of service worker is created together, 
when the user navigates the page the user receives a notification with a message: 
"there is a new version of the app..." a call to do a manual reload, after the reloading, 
he new service worker is installed in the browser.

7. Make installable (Progressive Web Application feature)
With this feature, a notification from the browser appears requesting to the user if he/she wants to install in the device 
on desktop(chrome), tablet or mobile. We need yet to test this feature on a real device doing a deploy on staging environment, 
because I have not success to test in my phone, but I tested in browserstack and works.