Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressive web apps with Angular 2

9,038 views

Published on

Talk from Angular Camp 2016 in Barcelona

Published in: Internet

Progressive web apps with Angular 2

  1. 1. 30.06.2016 1 Progressive Web Apps with Angular 2 Manfred Steyer About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular Page  2
  2. 2. 30.06.2016 2 Contents Overview Offline with Service Workers Immediate Value with AppShell Background Sync Push Angular Mobile Toolkit Overview
  3. 3. 30.06.2016 3 Web Apps No installation Cross- Plattform Easy Deployment Easy to update Searchable Links/ Bookmarks Native Apps Easy to launch Immetiate Value Offline Slow Connections Push Notifications Device- Access
  4. 4. 30.06.2016 4 Progressive Web Apps provide the best of both worlds Progressive Enhancements: Offline, Caching, Home-Screen etc.
  5. 5. 30.06.2016 5 App must also be useful without Browser-support for those enhancements! vs.
  6. 6. 30.06.2016 6 [http://alistapart.com/article/understandingprogressiveenhancement] Content Layout Scripting with Progressive Ext.
  7. 7. 30.06.2016 7 How to implement progressive enhancements? Case Study
  8. 8. 30.06.2016 8 Features Offline Background Sync Push Home- Screen Immediate Value DEMO
  9. 9. 30.06.2016 9 Offline with Service Workers 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 them self • HTTPS only • No XHR, but fetch
  10. 10. 30.06.2016 10 Service Worker and Offline • Can intercept requests • Can decide how to respond to requests • Caching Pattern • Cache only • Network only • Try cache first, then network • Try network first, then cache • etc. 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
  11. 11. 30.06.2016 11 Browser Support Fallback for Safari & Co. • AppCache • Less features • Not much choice for Caching Patterns • Cache only • Network only
  12. 12. 30.06.2016 12 Storing data locally Storing Data while offline • LocalStroage • WebDb (deprecated but here) • IndexedDb • Good idea: Use an abstraction, like PouchDB • Challange: Quotas!
  13. 13. 30.06.2016 13 Immediate Value 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
  14. 14. 30.06.2016 14 "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", […] } 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">
  15. 15. 30.06.2016 15 Background Sync Background Sync • App can request Background Sync • Service Worker triggers Sync Event when it is appropriate (Network, Battery …) • Also plans for periodic Background Sync
  16. 16. 30.06.2016 16 Request Background Sync in App let nav: any = navigator; if ('serviceWorker' in nav && 'SyncManager' in window) { nav.serviceWorker.ready .then(reg => { return reg.sync.register('upload'); }) .catch(_ => { return this.buchungService.upload(); }); } else { this.buchungService.upload(); } Tag Sync Event in Service Worker context.addEventListener('sync', function(event) { console.debug("Service Worker: sync, tag=" + event.tag); if (event.tag == 'upload') { event.waitUntil(bs.upload().then(_ => console.debug('background-upload finished'))); } });
  17. 17. 30.06.2016 17 Push Notifications Push Notifications Browser Push-Service Web API 4. Notification 2. Passing Id 3. Notification for Browser(s) 1. Register
  18. 18. 30.06.2016 18 Registering for Push in App let nav:any = navigator; if ('serviceWorker' in navigator) { nav.serviceWorker.ready.then(function(reg) { reg.pushManager.subscribe({ userVisibleOnly: true }).then(function(sub) { console.log('endpoint:', sub.endpoint); // Send endpoint with id over to web api }); }).catch(function(error) { […] }); } React to Push in Service Worker context.addEventListener('push', function(event: any) { event.waitUntil(bs.sync().then(p => context.registration.showNotification("Delay", { body: 'Your flight is delayed', icon: '/images/touch/icon-128x128.png', tag: 'my-tag' }))); });
  19. 19. 30.06.2016 19 Angular Mobile Toolkit 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.
  20. 20. 30.06.2016 20 Getting Started > npm install -g angular-cli > ng new hello-mobile --mobile Infos and Guids: mobile.angular.io Summary Best of Web and Native Progressive Enhancements Offline Browser DBs Background Sync Push Angular Mobile Toolkit M&M's solve nearly all problems ;-)
  21. 21. 30.06.2016 21 Contact manfred.steyer@SOFTWAREarchitekt.at SOFTWAREarchitekt.at ManfredSteyer

×