Progressive Web Apps (PWA) with Angular 2 Show Case

This sample shows:

PWA with Angular 2
Bundling Service Worker and App with webpack
Caching with Service Worker and the Service Worker Toolbox
Storing data with PouchDB (which uses IndexedDb, WebDb or LocalStorage)
AppShell Pattern with Caching to quickly provide value to the user
Web App Manifest and a Fallback using Meta-Tags to install the App to the Home Screen
Background Synchronisation with Service Workers
Push Notifications with Service Worksers

Prerequisites

npm install

npm run webpack

After Bundling run:

npm run http-server

This starts a http-server at localhost:8080

Go to http://localhost:8080
Stop http-server and refresh browser
Web-Site should still load due to its service-worker based offline capabilities
Disconnect from the web
Alter the state of some bookings in the browser (check in/ check out).
Open F12-Dev-Tools
Reconnect to the web
Some time after reconnecting, you should see that the app is syncing the booking states with the server
Start http-server again (npm run http-server)
In chrome, go to F12-Dev-Tools (F12) | Application | Service Worker
Press 'Push' to simulate a push-message
You should see a push-message

Start app and go to F12-Dev-Tools
The console should display a "push endpoint"
Send the following HTTP message to this push-endpoint to notify chrome. The auth key can be created within the google api console. See this post for further infos.

POST https://android.googleapis.com/gcm/send/dt1JdJT[...]
Content-Length: 0
Authorization: key=AIzaSyDGFJo7_qMFJRa5tVjHAfyPWjFEQBOe47o
TTL: 10

Note: To notify firefox, you don't need an auth key. The rest of the message is the same.