1. Introduction to Progressive web
app (PWA)
Zhentian Wan

2. What is PWA
Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users
from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the App over
time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has
an icon on the home screen and loads as a top-level, full screen experience.
● Fast loading
● Native mobile feeling (Home screen, Push notification)
● Offline experience

3. Study Case
https://developers.google.com/web/showcase/2016/flipkart

4. PWA
● Web App
● Progressive enhancement
○ Means even some browser doesn’t support PWA, you website should still work as normal

5. PWA
● Web App
● Progressive enhancement
(https://jakearchibald.github.io/isserviceworkerready/)

6. What is PWA
● Service Worker (Offline Experience)
● App Shell (Fast Loading)
● Manifest.json (Home Screen)

7. APP Shell
The min HTML, CSS, JS that required to power up user interface.
Design Idea: What need to be displayed on screen immediately?

8. APP Shell
The min HTML, CSS, JS that required to power up user interface.
Design Idea: What need to be displayed on screen immediately?

9. Manifest.json

10. Splash Screen

11. Add to Home Screen

12. Service Worker

13. HTTPS

14. HTTPS Firebase

15. Firebase Hosting
1. Create a app on Firebase
2. Install firebase-toolbox
3. firebase login
4. firebase init
5. firebase deploy

16. Firebase Hosting
1. Create a app on Firebase
2. Install firebase-toolbox
3. firebase login
4. firebase init
5. firebase deploy (After first time)

17. Without SW
Online first solution

18. Online first solution
Browser
Server
1. Send Requests

19. Online first solution
Browser
Server
1. Send Requests
2. Get data

20. Online first solution
Browser
Server
1. Send Requests
2. Get data
3. Response

21. Online first solution
Browser
Server
1. Send Requests
2. Get data
3. Response
Depend on
network
connection!

22. Switch to Offline first solution

23. Offline first solution
Browser
ServerService
worker
1. Send
Requests

24. Offline first solution
Browser
ServerService
worker
1. Send
Requests
Cache

25. Offline first solution
Browser
ServerService
worker
2. Check from
cache if any
Cache

26. Offline first solution
Browser
ServerService
worker
3. Return cache
results
Cache

27. Offline first solution
Browser
ServerService
worker
4. Send request to
server
Cache

28. Offline first solution
Browser
ServerService
worker
5. Get data
Cache

29. Offline first solution
Browser
ServerService
worker
6. Return the data
Cache

30. Offline first solution
Browser
ServerService
worker
7. Update cache
Cache

31. Offline first solution
Browser
ServerService
worker
Cache
8. Send copy response back,
Update the interface

32. Offline first solution
Browser
ServerService
worker
Cache
LOCAL NETWORK
Requests
Fetch from
cache
Response No longer
depend on
network
connection

33. Offline first solution
Browser
ServerService
worker
Cache
LOCAL NETWORK
Requests
Fetch from
cache
Response
Offline

34. OFFLINE APP DEMO

35. Caching Strategies
SW-TOOLBOX

36. Network first, cache fallback

37. Cache first, network fallback

38. Cache only

39. Network only

41. Service worker life cycle

42. Service worker life cycle

43. PUSH NOTIFICATION APP DEMO
https://www.youtube.com/watch?v=Zq-tRtBN3ws

44. Firebase Hosting DEMO

45. Resources
Code Lab: https://codelabs.developers.google.com/pwa-dev-summit
Udacity:
● Offline web app
● Progressive web app

46. SW-PRECACHE
https://github.com/GoogleChrome/sw-precache

47. Angular CLI
https://github.com/angular/angular-cli

48. Webpack Offline Plugin
https://github.com/NekR/offline-plugin

49. Questions?

50. THANKS!

51. Offline first solution
Browser
ServerService
worker
1. Send
Requests
Cache IndexDB
2. Check from
cache /DB if any
3. Return cache
results
4. Send request to
server
5. Get data
6. Return the data