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.

Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2

1,055 views

Published on

Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2

  1. 1. 26.09.2016 1 Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2 Manfred Steyer ManfredSteyer Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • GDE & MVP • Focus: Angular 2 Page  2 ManfredSteyer
  2. 2. 26.09.2016 2 Inhalt Überblick Offline mit Service Worker Sofortiger Nutzen mit AppShell-Muster Background Sync Push Angular Mobile Toolkit Überblick
  3. 3. 26.09.2016 3 Web Apps Keine Installation Cross- Plattform Einfaches Deployment Einfaches Update Durchsuchbar Links/ Bookmarks Native Apps Einfach zu starten Sofortiger Nutzen Offline Langsame Verbindungen Push Notifications Gerätezugriff
  4. 4. 26.09.2016 4 Progressive Web Apps bieten das Beste aus beiden Welten Progressive Enhancements: Offline, Caching, Home-Screen etc.
  5. 5. 26.09.2016 5 App muss auch ohne Browser- Unterstützung für diese Erweiterungen Nutzen bieten! vs.
  6. 6. 26.09.2016 6 [http://alistapart.com/article/understandingprogressiveenhancement] Inhalt Layout Scripting mit Progressive Ext.
  7. 7. 26.09.2016 7 Wie implementiert man Progressive Enhancements und PWA? PWAs implementieren Moderne Browser Technologien •Service Worker •Web App Manifest •IndexedDb & Co. Muster •Caching Patterns •App Shell Pattern •Universal JS
  8. 8. 26.09.2016 8 Case Study Features Offline Background Sync Push Home- Screen Sofortiger Nutzen
  9. 9. 26.09.2016 9 DEMO Offline mit Service Worker
  10. 10. 26.09.2016 10 Was sind Service Worker? • Hintergrund-Tasks • Werden von Web App installiert • Können ohne Web App laufen • Können sich deaktivieren und bei Ereignissen wieder aktivieren • Nur HTTPS (außer localhost) • Kein XHR, aber fetch Service Worker und Offline • Anfragen abfangen • Entscheiden, wie auf Anfragen zu antworten ist • Caching Muster • Cache only • Network only • Try cache first, then network • Try network first, then cache • etc.
  11. 11. 26.09.2016 11 Service Worker registrieren if('serviceWorker' in navigator) { navigator .serviceWorker .register('/sw.js', { scope: '/' }) .then((r) => { console.debug('service worker started!'); }); } Service Worker Script var context: any = self; context.addEventListener('install', function(e:any) { e.waitUntil(fillCache().then(() => context.skipWaiting())); }); context.addEventListener('activate', function(e) { e.waitUntil(clearOldCaches().then(() => context.clients.claim())); }); context.addEventListener('fetch', function(event: any) { event.respondWith(cacheFirst(event.request)); });
  12. 12. 26.09.2016 12 FillCache and CacheFirst function fillCache() { return caches.open(CACHE_NAME) .then(cache => cache.addAll(CACHE_FILES)); } function cacheFirst(request) { return caches.match(request) .then(response => response || fetch(request)); } 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
  13. 13. 26.09.2016 13 Browser Support Fallback für Safari & Co. • AppCache • Weniger Feature • Keine große Auswahl an Caching Patterns • Cache only • Network only
  14. 14. 26.09.2016 14 Daten lokal speichern Daten offline speichern • LocalStroage • WebDb (deprecated aber hier) • IndexedDb • Gute Idee: Abstraction nutzen, z. B. PouchDB • Herausforderung: Quotas!
  15. 15. 26.09.2016 15 Fokus • Kein langfristiger Offlinebetrieb • Überbrücken langsamer oder fehlender Datenverbindungen 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!'); });
  16. 16. 26.09.2016 16 Sofortiger Nutzen App Shell • Shell im Cache (Service Worker) • Daten aus Cache (e. g. PouchDb) • Kann sofort angezeigt werden • Daten aus Cache werden nach dem Laden durch aktuelle Daten ersetzt App Shell Content
  17. 17. 26.09.2016 17 "Installation" am 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">
  18. 18. 26.09.2016 18 Background Sync Background Sync • App fordert Background Sync an • Service Worker führt Sync Event aus, wenn es passend erscheint (Netzwerk, Akku, …) • Pläne für periodische Background Sync
  19. 19. 26.09.2016 19 Background Sync anfordern 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'))); } });
  20. 20. 26.09.2016 20 Push Notifications Push Notifications Browser Push-Service Web API 4. Benachrichtigung 2. Url + ID 3. Benachrichtigung für Browser 1. Anmelden
  21. 21. 26.09.2016 21 Für Push registrieren 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) { […] }); } Auf Push in Service Worker reagieren 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' }))); });
  22. 22. 26.09.2016 22 Angular Mobile Toolkit Mobile Toolkit • Scaffolding für Angular 2 PWA mit Angular CLI • Hilft beim Start • Generiert Web App Manifest • Generiert App Shell • Angular Universal • Service Worker für Caching • AppCache as Fallback for Safari & Co.
  23. 23. 26.09.2016 23 Getting Started > npm install -g angular-cli > ng new hello-mobile --mobile Infos and Guids: mobile.angular.io Summary Das Beste von Web und Native Progressive Enhancements Offline Browser DBs Background Sync Push Angular Mobile Toolkit M&M's können den Tag retten!
  24. 24. 26.09.2016 24 Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer

×