Download - Progressive Web Apps og Payment Request
![Page 1: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/1.jpg)
Progressive Web Apps
Filip Bruun Bech-Larsen@filipbech
![Page 2: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/2.jpg)
Filip
![Page 3: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/3.jpg)
![Page 4: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/4.jpg)
Web vs native• Performance
• Hardware
• Offline
• Re-engangement
• Kun én platform
• Ingen gate-keepers
• Let/hurtigt deploy/update
• the link…
![Page 5: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/5.jpg)
Lad os løse problemerne
• Performance => RAIL
• Hardware => Standard APIs
• Offline => ServiceWorker
• Re-engangement => Push events + notifications
![Page 6: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/6.jpg)
Progressive Web Apps
• RAIL
• Responsive design
• Secure (kun HTTPS)
• Offline ServiceWorker
![Page 7: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/7.jpg)
RAIL Performance
• Response (100ms)
• Animation (5-10ms) (transform+opacity & will-change)
• Idle (50ms)
• Load (1s)
![Page 8: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/8.jpg)
Serviceworker• Javascript worker
• Kører i baggrunden også efter siden lukkes
• En proxy for alt på netværket
• Sync
• Push (og notificationclicks)
![Page 9: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/9.jpg)
gamle browsere
• “progressive”
![Page 10: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/10.jpg)
ok, vis nu noget kode
![Page 11: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/11.jpg)
![Page 12: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/12.jpg)
![Page 13: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/13.jpg)
![Page 14: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/14.jpg)
![Page 16: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/16.jpg)
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 [email protected]
![Page 17: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/17.jpg)
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
![Page 18: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/18.jpg)
EcmaScript
• ES6, ES2015, ES2017 osv…
![Page 19: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/19.jpg)
Nye features • Class
• Fat arrow
• Destructuring
• Default parameters
• Rest+spread
• Symbols
• Generators
![Page 20: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/20.jpg)
lets see some more code…
![Page 21: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/21.jpg)
![Page 22: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/22.jpg)
DemoSource:
https://github.com/filipbech/filipbech.github.io/tree/master/demos/push/
![Page 23: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/23.jpg)
Fede ES6-featuresbrug dem idag - transpiler for kompatibilitet
![Page 24: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/24.jpg)
og sikkert også…
• Async functions (await)
• Decorators
• Observables…
![Page 25: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/25.jpg)
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
![Page 26: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/26.jpg)
![Page 27: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/27.jpg)
![Page 28: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/28.jpg)
![Page 29: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/29.jpg)
Demo(Chrome 53, Android)
https://github.com/filipbech/filipbech.github.io/tree/master/demos/paymentrequest
![Page 30: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/30.jpg)
det er alt sammen godtmen hvad med mit projekt, mit framework, osv…
![Page 31: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/31.jpg)
Start idag
• Alle frameworks (eller uden framework)
• Husk “progressive” enhancement
• Start med simpel ressource-caching, og arbejd derfra
![Page 33: Progressive Web Apps og Payment Request](https://reader036.vdocuments.net/reader036/viewer/2022062316/58804f711a28ab22088b5705/html5/thumbnails/33.jpg)