Progressive web apps with Angular 2

Progressive web apps with Angular 2

• 1.
  30.06.2016 1 Progressive Web Apps withAngular 2 Manfred Steyer About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular Page  2
• 2.
  30.06.2016 2 Contents Overview Offline with ServiceWorkers Immediate Value with AppShell Background Sync Push Angular Mobile Toolkit Overview
• 3.
  30.06.2016 3 Web Apps No installation Cross- Plattform Easy Deployment Easy to update Searchable Links/ Bookmarks NativeApps Easy to launch Immetiate Value Offline Slow Connections Push Notifications Device- Access
• 4.
  30.06.2016 4 Progressive Web Appsprovide the best of both worlds Progressive Enhancements: Offline, Caching, Home-Screen etc.
• 5.
  30.06.2016 5 App must alsobe useful without Browser-support for those enhancements! vs.
• 6.
  30.06.2016 6 [http://alistapart.com/article/understandingprogressiveenhancement] Content Layout Scripting with Progressive Ext.
• 7.
  30.06.2016 7 How to implement progressiveenhancements? Case Study
• 8.
  30.06.2016 8 Features Offline Background Sync Push Home- Screen Immediate Value DEMO
• 9.
  30.06.2016 9 Offline with ServiceWorkers 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.
  30.06.2016 10 Service Worker andOffline • 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.
  30.06.2016 11 Browser Support Fallback forSafari & Co. • AppCache • Less features • Not much choice for Caching Patterns • Cache only • Network only
• 12.
  30.06.2016 12 Storing data locally StoringData while offline • LocalStroage • WebDb (deprecated but here) • IndexedDb • Good idea: Use an abstraction, like PouchDB • Challange: Quotas!
• 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.
  30.06.2016 14 "Install" to HomeScreen { "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.
  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.
  30.06.2016 16 Request Background Syncin 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.
  30.06.2016 17 Push Notifications Push Notifications Browser Push-Service WebAPI 4. Notification 2. Passing Id 3. Notification for Browser(s) 1. Register
• 18.
  30.06.2016 18 Registering for Pushin 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.
  30.06.2016 19 Angular Mobile Toolkit MobileToolkit • 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.
  30.06.2016 20 Getting Started > npminstall -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.
  30.06.2016 21 Contact manfred.steyer@SOFTWAREarchitekt.at SOFTWAREarchitekt.at ManfredSteyer