Progressive Web Apps mit Angular 2, Meetup at @thelondonjs

Transcript

1. Progressive Web Apps with Angular 2 Manfred Steyer
2. About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert (GDE) Page  2
3. Contents Overview Offline with Service Workers Immediate Value with AppShell Background Sync Push Angular Mobile Toolkit
4. Overview
5. Web Apps No installation Cross- Plattform Easy Deployment Easy to update Searchable Links/ Bookmarks
6. Native Apps Easy to launch Immetiate Value Offline Slow Connections Push Notifications Device- Access
7. Progressive Web Apps provide the best of both worlds
8. Progressive Enhancements: Offline, Caching, Home-Screen etc.
9. App must also be useful without those enhancements!
10. vs.
12. [http://alistapart.com/article/understandingprogressiveenhancement] Content Layout Scripting with Progressive Enh.
13. How to implement progressive enhancements?
14. Implementing PWAs Modern Browser Technologies •Service Worker •Web App Manifest •IndexedDb & Co. Patterns •Caching Patterns •App Shell Pattern •Universal JS
15. Case Study
16. Features Offline Background Sync Push Home- Screen Immediate Value
17. DEMO
18. Offline with Service Workers
19. What are Service Worker? • Background Tasks • Are installed by an Web App • Can run without Web App • Can decide to go idle or to re-activate themself • HTTPS only (exception: localhost) • No XHR, but fetch
20. Service Worker and Offline • Can intercept requests • Can decide how to respond to requests • Same origin policy (SOP) • Caching Pattern • Cache only • Network only • Try cache first, then network • Try network first, then cache • etc.
21. Service Worker Toolbox //sw-with-toolbox.js importScripts('/node_modules/sw-toolbox/sw-toolbox.js'); toolbox.precache(CACHE_FILES); toolbox.router.get('/(.*)', toolbox.networkOnly, {origin: 'http://www.angular.at'}); toolbox.router.default = toolbox.cacheFirst; <script src="node_modules/sw-toolbox/companion.js" data-service-worker="sw-with-toolbox.js"></script> Array can be generated
22. Browser Support
23. Fallback for Safari & Co. • AppCache • Less features • Not much choice for Caching Patterns • Cache only • Network only
24. Storing data locally
25. Storing Data while offline • LocalStroage • WebDb (deprecated but here) • IndexedDb • Good idea: Use an abstraction, like PouchDB • Challange: Quotas!
26. Scenarios • Not for: Going offline for a long period of time • Use it to bridge lacking or bad data connections
27. PouchDb const db = new PouchDB("bookingDb"); db.get('bookings').then(entity => { // do something with entity }); var entity = { _id: "bookings", bookings: bookings } db.put(entity).then(_ => { console.debug('stored!'); });
28. Immediate Value
29. App Shell • Shell is cached (Service Worker) • Uses cached data (e. g. PouchDb) • Can be displayed immediately • Updates cached view with online-data when loadad App Shell Content
30. "Install" to Home Screen { "name": "Flight PWA-Demo", "short_name": "Flight-PWA", "icons": [{ "src": "images/touch/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, […] ], "start_url": "/index.html?homescreen=1", "display": "standalone", […] }
31. Referencing the Manifest <!-- Web Application Manifest --> <link rel="manifest" href="manifest.json"> <!-- Add to homescreen for Safari on iOS --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Web Starter Kit"> <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
32. Background Sync
33. Background Sync • App can request Background Sync • Service Worker triggers Sync Event when it is appropriate (Network, Battery …) • Also plans for periodic Background Sync
34. Push Notifications
35. Push Notifications Browser Push-Service Web API 4. Notification 2. URL + Id 3. Notification for Browser(s) 1. Register
36. Angular Mobile Toolkit
37. Mobile Toolkit • Scaffolding Angular 2 PWA with Angular CLI • Helps to get started • Generates Web App Manifest • Generates App Shell • Angular Universal • Service Worker for Caching • AppCache as Fallback for Safari & Co.
38. Getting Started > npm install -g angular-cli > ng new hello-mobile --mobile Infos and Guids: mobile.angular.io
39. Summary Best of Web and Native Progressive Enhancements No installation Easy deployment Cross Plattform No App Store Offline Browser DBs Background Sync Push Angular Mobile Toolkit M&M's solve nearly all problems ;-)
40. Contact [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer