progressive web app

23
Progressive Web Apps Vinci Rufus @areai51

Upload: vinci-rufus

Post on 21-Apr-2017

46 views

Category:

Internet


1 download

TRANSCRIPT

Page 1: Progressive Web App

Progressive Web Apps

Vinci Rufus@areai51

Page 2: Progressive Web App

Progressive Web Apps are user experiences that have the reach of the web, and are

Reliable | Fast | Engaging

Page 3: Progressive Web App

HTTPS App ShellModel

Offline Support

In technical terms

60 fpsAdd to Home Screen

Page 4: Progressive Web App

ProgressiveThe is the ‘Important’ Keyword

Page 5: Progressive Web App

Web AppEnd of the day it’s a

Page 6: Progressive Web App
Page 7: Progressive Web App

HTTPS

Not so difficult nor expensive any more

Firebase

Page 8: Progressive Web App

App Shell

Page 9: Progressive Web App

Offline Support

Page 10: Progressive Web App

Service Worker

Page 11: Progressive Web App

Service worker (lifecycle events)

Install

Activated

Idle

Terminated

Fetch / Message

Error

Register

Page 12: Progressive Web App
Page 13: Progressive Web App

60fps

Page 14: Progressive Web App

Add to Home Screen

Page 15: Progressive Web App

Minimal Viable PWA• App Shell AppComponent (Root Component)

• Add to Home Screen Manifest.json• Full Screen Manifest.json• Offline Support Service Worker

Page 16: Progressive Web App

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

Page 17: Progressive Web App

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

Page 18: Progressive Web App

Are you a PWA ?

• Lighthousehttps://developers.google.com/web/tools/lighthouse/

Page 19: Progressive Web App

Tools to build PWA

SW Tool Box

Page 20: Progressive Web App

http://bit.ly/prevent-default

Page 21: Progressive Web App

SN Accelerators2016 Oct – XT

@nisheeddroid

Page 22: Progressive Web App

Examples of PWA

https://github.com/hemanth/awesome-pwa#apps

Page 23: Progressive Web App

..and that’s a wrap@areai51