Progressive Web Apps (PWAs) are user experiences that have the reach of the web and feel like native apps. They are reliable, fast, and engaging. Key aspects of PWAs include using HTTPS, an app shell model, service workers to enable offline support, and manifest files to allow adding the app to the home screen. The document provides an overview of core PWA concepts and technologies and how to evaluate if a web app qualifies as a PWA.

1. Progressive Web Apps
Vinci Rufus
@areai51

2. Progressive Web Apps are user experiences that
have the reach of the web, and are
Reliable | Fast | Engaging

3. HTTPS
App Shell
Model
Offline
Support
In technical terms
60 fps
Add to
Home
Screen

4. Progressive
The is the ‘Important’ Keyword

5. Web App
End of the day it’s a

7. HTTPS
Not so difficult nor expensive any more
Firebase

8. App Shell

9. Offline Support

10. Service Worker

11. Service worker (lifecycle events)
Install
Activated
Idle
Terminated
Fetch / Message
Error
Register

13. 60fps

14. Add to Home Screen

15. Minimal Viable PWA
• App Shell  AppComponent (Root Component)
• Add to Home Screen  Manifest.json
• Full Screen  Manifest.json
• Offline Support  Service Worker

16. Full-on PWA
• Push Notifications  GCM | FCM |Push API
• Deeply Integrated PWA  WebAPK
• SSR for app Shell  Universal Rendering
• Offline Transactions  Background Sync

17. Selling PWAs (.. to Your boss, client, PM..)
• It’s a replacement for your Responsive / Adaptive Web App
• Not every Native App needs to be Native.
• Chrome users on desktop & mobile get super enhanced experience.
• Offline support is not everything.
• There is nothing to lose, Everything to Gain

18. Are you a PWA ?
• Lighthouse
https://developers.google.com/
web/tools/lighthouse/

19. Tools to build PWA
SW Tool Box

20. http://bit.ly/prevent-default

21. SN Accelerators
2016 Oct – XT
@nisheeddroid

22. Examples of PWA
https://github.com/hemanth/awesome-pwa#apps

23. ..and that’s a wrap
@areai51