introduction to progressive web app (pwa)

51
Introduction to Progressive web app (PWA) Zhentian Wan

Upload: zhentian-wan

Post on 16-Apr-2017

375 views

Category:

Documents


1 download

TRANSCRIPT

Introduction to Progressive web app (PWA)Zhentian Wan

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

Study Case

https://developers.google.com/web/showcase/2016/flipkart

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?

Manifest.json

Splash Screen

Add to Home Screen

HTTPS

HTTPS Firebase

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)

Without SWOnline first solution

Online first solution

Browser

Server

1. Send Requests

Online first solution

Browser

Server

1. Send Requests2. Get data

Online first solution

Browser

Server

1. Send Requests2. Get data

3. Response

Online first solution

Browser

Server

1. Send Requests2. Get data

3. Response

Depend on network connection!

Switch to Offline first solution

Offline first solution

Browser

ServerService worker

1. Send Requests

Offline first solution

Browser

ServerService worker

1. Send Requests

Cache

Offline first solution

Browser

ServerService worker

2. Check from cache if any

Cache

Offline first solution

Browser

ServerService worker

3. Return cache results

Cache

Offline first solution

Browser

ServerService worker

4. Send request to server

Cache

Offline first solution

Browser

ServerService worker

5. Get data

Cache

Offline first solution

Browser

ServerService worker

6. Return the data

Cache

Offline first solution

Browser

ServerService worker

7. Update cache

Cache

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

OFFLINE APP DEMO

Caching Strategies

SW-TOOLBOX

Network first, cache fallback

Cache first, network fallback

Cache only

Network only

Service worker life cycle

Service worker life cycle

PUSH NOTIFICATION APP DEMO

https://www.youtube.com/watch?v=Zq-tRtBN3ws

Firebase Hosting DEMO

Resources

Code Lab: https://codelabs.developers.google.com/pwa-dev-summit

Udacity:

● Offline web app● Progressive web app

SW-PRECACHE

https://github.com/GoogleChrome/sw-precache

Angular CLI

https://github.com/angular/angular-cli

Webpack Offline Plugin

https://github.com/NekR/offline-plugin

Questions?

THANKS!

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