1 of 22

Progressive Web Apps

Dirk Luijk

2 of 22

"An innovative new way to create applications for mobile devices"

3 of 22

"You can write amazing apps that look and behave exactly like apps on the phone"

4 of 22

Progressive Web Apps?

5 of 22

6 of 22

7 of 22

(2012)

8 of 22

Voordelen van native apps

  • Performance
  • Push notificaties
  • Instant loading & offline support
  • Integratie met OS
  • Distributie (app store)

9 of 22

Nadelen van native apps

  • Distributieproblemen
  • Updaten gaat moeizamer en langzamer
  • Kostbaar i.v.m. meerdere platforms
  • Afhankelijkheid app stores
  • Verscheidenheid aan mobiele devices

10 of 22

Progressive Web Apps!

beste van beide werelden?

11 of 22

Progressive Web Apps

  • Secure
  • Responsive design
  • Offline support
  • Add to Homescreen
  • App-like Interaction
  • Push Notifications

12 of 22

Technologie

  • Service Workers
    • Offline support
    • Push Notifications
  • App Manifest
    • Add to Homescreen
  • App Shell (server-side rendering)
    • App-like interaction

13 of 22

Service Workers

14 of 22

Service Worker�Caching Strategies

15 of 22

cache only

16 of 22

network only

17 of 22

cache, network fallback (performance)

18 of 22

network, cache fallback (freshness)

19 of 22

App Manifest

20 of 22

manifest.json

21 of 22

Live demo

22 of 22

Demo

ng-chat-41dd7.firebaseapp.com

​

  • Progressive Chat App
  • Angular Material + Firebase
  • Angular Service Workers
  • App Manifest�
  • App Shell (bonus)