Download as PDF, PPTX
More Related Content
![Progressive Web Apps [pt_BR]](https://cdn.slidesharecdn.com/ss_thumbnails/pwa-170306202026-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Introduction to Progressive web app (PWA)
- 1. Introduction to Progressiveweb app (PWA) Zhentian Wan
- 2. What is PWA ProgressiveWeb 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.
- 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 minHTML, CSS, JS that required to power up user interface. Design Idea: What need to be displayed on screen immediately?
- 8. APP Shell The minHTML, CSS, JS that required to power up user interface. Design Idea: What need to be displayed on screen immediately?
- 9.
- 10.
- 11. Add to HomeScreen
- 12.
- 13.
- 14.
- 15. Firebase Hosting 1. Createa app on Firebase 2. Install firebase-toolbox 3. firebase login 4. firebase init 5. firebase deploy
- 16. Firebase Hosting 1. Createa app on Firebase 2. Install firebase-toolbox 3. firebase login 4. firebase init 5. firebase deploy (After first time)
- 17. Without SW Online firstsolution
- 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 Offlinefirst solution
- 23.
- 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 LOCALNETWORK Requests Fetch from cache Response No longer depend on network connection
- 33. Offline first solution Browser ServerService worker Cache LOCALNETWORK Requests Fetch from cache Response Offline
- 34.
- 35.
- 36. Network first, cachefallback
- 37. Cache first, networkfallback
- 38.
- 39.
- 41. Service worker lifecycle
- 42. Service worker lifecycle
- 43. PUSH NOTIFICATION APPDEMO https://www.youtube.com/watch?v=Zq-tRtBN3ws
- 44.
- 45. Resources Code Lab: https://codelabs.developers.google.com/pwa-dev-summit Udacity: ●Offline web app ● Progressive web app
- 46.
- 47.
- 48.
- 49.
- 50.
- 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