No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
.vscode
app
data
dist
images
img
.dockerignore
.editorconfig
.gitignore
declarations.d.ts
favicon.ico
index.html
manifest.json
package.json
readme.md
styles.css
sw-boot.js
tsconfig.json
typings.json
webpack.app.config.js
webpack.config.js
webpack.sw.config.js

readme.md

#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

  • NodeJS (nodejs.org)

Installation

npm install

Bundling

npm run webpack

Starting

After Bundling run:

npm run http-server

This starts a http-server at localhost:8080

Trying out Sample

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

Sending push messages via HTTP

  1. Start app and go to F12-Dev-Tools
  2. The console should display a "push endpoint"
  3. 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.

Credits