progressive web apps - covering the best of both worlds

57

Upload: christian-heilmann

Post on 22-Jan-2018

365 views

Category:

Education


2 download

TRANSCRIPT

aka.ms/mobile-era

Chris Heilmann @codepo8

PWA is

too much to ask

and that’s OK

aka.ms/whats-a-pwa

development approach

web content to be app-like

experiences

Progressive

opportunity

clean up and speed up current

web based projects

reconsider what

we call apps

doesn’t work

https://demo.vaadin.com/expense-manager

• Link as simple distribution model

• Simple, atomic updates

• Flexible layout options (grids,

flexbox, media queries, vw, vh)

• Small data footprint, loading on

demand and environment

• Reusability of code – conversion

to other form factors

• Offline capabilities by design

• Full access to hardware

• Authenticated, verified device

access

• High trust distribution model

• Easy payments

• Bleeding edge tech (as a

competitive advantage)

NativeWeb

POSITIVES

• Verification and authentication is

hard

• Patchy access to hardware

• Huge fragmentation of devices

and displays

• Patchy trust in capabilities

• Payments are not easy or

expected

NativeWeb• Huge data footprint with non-

atomic updates

• Slow update cycles because of

negotiation overhead

• High expectations and breakneck

competition (price race to bottom)

• Bespoke development for each

platform with only minor re-use

NEGATIVES

needs to be served from a secure origin

needs to have an app manifest

just another resource

index and ingest

Store & Bing

ServiceWorker

Act as proxy servers that sit

between web apps, the browser,

and the network.

Define the rules what should be

cached and loaded from where –

no more hoping the browser

caches your work.

Intercept network requests and

define what happens. Serve from

cache, refresh, convert before

display, etc….

Refresh your app in the

background, pull new content

and notify the user with push

notifications that something new

is available.

aka.ms/serviceworkers

aka.ms/workbox

aka.ms/pwa-builder

aka.ms/pwa-builder

aka.ms/google-lighthouse

aka.ms/webcando

aka.ms/pwa-directory

aka.ms/pwa-stats

“try before you buy”

do what they came for

change their device

where they are

new users will enjoy your products

brings the best of the web

• Link as simple distribution model

• Simple, atomic updates

• Flexible layout options (grids,

flexbox, media queries, vw, vh)

• Small data footprint, loading on

demand and environment

• Reusability of code – conversion

to other form factors

• Offline capabilities by design

• Full access to hardware

• Authenticated, verified device

access

• High trust distribution model

• Easy payments

• Bleeding edge tech (as a

competitive advantage)

NativeWeb

POSITIVES

• Verification and authentication is

hard

• Patchy access to hardware

• Huge fragmentation of devices

and displays

• Patchy trust in capabilities

• Payments are not easy or

expected

NativeWeb• Huge data footprint with non-

atomic updates

• Slow update cycles because of

negotiation overhead

• High expectations and breakneck

competition (price race to bottom)

• Bespoke development for each

platform with only minor re-use

NEGATIVES

Thank you.Now show me what you got!

aka.ms/mobile-era