Introduction to Progressive web app (PWA)
-
Upload
zhentian-wan -
Category
Documents
-
view
376 -
download
1
Transcript of Introduction to Progressive web app (PWA)
What is PWAProgressive 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
PWA
● Web App● Progressive enhancement
○ Means even some browser doesn’t support PWA, you website should still work as normal
PWA
● Web App● Progressive enhancement
(https://jakearchibald.github.io/isserviceworkerready/)
What is PWA
● Service Worker (Offline Experience)● App Shell (Fast Loading)● Manifest.json (Home Screen)
APP Shell
The min HTML, CSS, JS that required to power up user interface.
Design Idea: What need to be displayed on screen immediately?
APP Shell
The min HTML, CSS, JS that required to power up user interface.
Design Idea: What need to be displayed on screen immediately?
Firebase Hosting
1. Create a app on Firebase2. Install firebase-toolbox3. firebase login4. firebase init5. firebase deploy
Firebase Hosting
1. Create a app on Firebase2. Install firebase-toolbox3. firebase login4. firebase init5. firebase deploy (After first time)
Online first solution
Browser
Server
1. Send Requests2. Get data
3. Response
Depend on network connection!
Offline first solution
Browser
ServerService worker
Cache
8. Send copy response back,Update the interface
Offline first solution
Browser
ServerService worker
Cache
LOCAL NETWORK
Requests
Fetch from cache
Response No longer depend on network connection
Offline first solution
Browser
ServerService worker
Cache
LOCAL NETWORK
Requests
Fetch from cache
Response Offline
Resources
Code Lab: https://codelabs.developers.google.com/pwa-dev-summit
Udacity:
● Offline web app● Progressive web app