progressive web apps og payment request

Progressive Web Apps

Filip Bruun Bech-Larsen@filipbech

Filip

Web vs native• Performance

• Hardware

• Offline

• Re-engangement

• Kun én platform

• Ingen gate-keepers

• Let/hurtigt deploy/update

• the link…

Lad os løse problemerne

• Performance => RAIL

• Hardware => Standard APIs

• Offline => ServiceWorker

• Re-engangement => Push events + notifications

Progressive Web Apps

• RAIL

• Responsive design

• Secure (kun HTTPS)

• Offline ServiceWorker

RAIL Performance

• Response (100ms)

• Animation (5-10ms) (transform+opacity & will-change)

• Idle (50ms)

• Load (1s)

Serviceworker• Javascript worker

• Kører i baggrunden også efter siden lukkes

• En proxy for alt på netværket

• Sync

• Push (og notificationclicks)

gamle browsere

• “progressive”

ok, vis nu noget kode

use sw-toolbox.js for caching

Web vs native

The Web haler ind, og selvom native altid vil være forrest, har vi et seriøst alternativ med

PWAs.

Største problem pt er iOS-supportSkriv lige til Tim Cook tcook@apple.com

Moderne javascript• “Bagud-kompatibilitet” er en kæmpe styrke

ved The Web, men det er også det største problem (vi kan ikke bare lave ny version og indføre breaking changes)

• I årevis betød det at der intet skete

• Men nu er der faktist kommet godt gang i udviklingen igen

EcmaScript

• ES6, ES2015, ES2017 osv…

Nye features • Class

• Fat arrow

• Destructuring

• Default parameters

• Rest+spread

• Symbols

• Generators

lets see some more code…

DemoSource:

https://github.com/filipbech/filipbech.github.io/tree/master/demos/push/

Fede ES6-featuresbrug dem idag - transpiler for kompatibilitet

og sikkert også…

• Async functions (await)

• Decorators

• Observables…

PaymentRequest• En ny feature i Chrome 53 (pt i beta)

• Tager imod info+betaling fra kunden

• Perfekt eksempel på progressive enhancement

• OBS: Kræver SSL, Kun Android, mulig PCI-cert.

• First impressions

Demo(Chrome 53, Android)

https://github.com/filipbech/filipbech.github.io/tree/master/demos/paymentrequest

det er alt sammen godtmen hvad med mit projekt, mit framework, osv…

Start idag

• Alle frameworks (eller uden framework)

• Husk “progressive” enhancement

• Start med simpel ressource-caching, og arbejd derfra

Thanks

• @filipbech

• filipbech.github.io