SlideShare ist ein Scribd-Unternehmen logo
1 von 24
Downloaden Sie, um offline zu lesen
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
26.09.2016
2
Inhalt
Überblick
Offline mit Service Worker
Sofortiger Nutzen mit AppShell-Muster
Background Sync
Push
Angular Mobile Toolkit
Überblick
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
26.09.2016
4
Progressive Web Apps bieten
das Beste aus beiden Welten
Progressive Enhancements:
Offline, Caching, Home-Screen etc.
26.09.2016
5
App muss auch ohne Browser-
Unterstützung für diese
Erweiterungen Nutzen bieten!
vs.
26.09.2016
6
[http://alistapart.com/article/understandingprogressiveenhancement]
Inhalt
Layout
Scripting mit
Progressive Ext.
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
26.09.2016
8
Case Study
Features
Offline
Background
Sync
Push
Home-
Screen
Sofortiger
Nutzen
26.09.2016
9
DEMO
Offline mit Service Worker
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.
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));
});
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
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
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!
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!');
});
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
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">
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
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')));
}
});
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
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'
})));
});
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.
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!
26.09.2016
24
Kontakt
[mail] manfred.steyer@SOFTWAREarchitekt.at
[web] SOFTWAREarchitekt.at
[twitter] ManfredSteyer

Weitere ähnliche Inhalte

Was ist angesagt?

.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScriptManfred Steyer
 
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScriptManfred Steyer
 
Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1Manfred Steyer
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Manfred Steyer
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenHendrik Lösch
 

Was ist angesagt? (6)

.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript
 
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
 
Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf Steroiden
 

Andere mochten auch

Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2Manfred Steyer
 
Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...
Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...
Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...Stephan Hochdörfer
 
Universal UI - Geräteübergreifendes Interaktionsdesign
Universal UI - Geräteübergreifendes InteraktionsdesignUniversal UI - Geräteübergreifendes Interaktionsdesign
Universal UI - Geräteübergreifendes InteraktionsdesignSENSORY-MINDS
 
Top 5 Javascript Frameworks for Web and Mobile App Development
Top 5 Javascript Frameworks for Web and Mobile App DevelopmentTop 5 Javascript Frameworks for Web and Mobile App Development
Top 5 Javascript Frameworks for Web and Mobile App DevelopmentAjeet Singh
 
Beyond GUI - Die Zukunft digitaler Interfaces
Beyond GUI - Die Zukunft digitaler InterfacesBeyond GUI - Die Zukunft digitaler Interfaces
Beyond GUI - Die Zukunft digitaler InterfacesSENSORY-MINDS
 
Real World Dependency Injection - oscon13
Real World Dependency Injection - oscon13Real World Dependency Injection - oscon13
Real World Dependency Injection - oscon13Stephan Hochdörfer
 
Pavone Project Management Was Ist Neu 9.5
Pavone Project Management Was Ist Neu 9.5Pavone Project Management Was Ist Neu 9.5
Pavone Project Management Was Ist Neu 9.5Bjoern Reinhold
 
WEIDMULLER marker TERMINAL BLOCK - mail@akbartrading.com
WEIDMULLER marker TERMINAL BLOCK - mail@akbartrading.comWEIDMULLER marker TERMINAL BLOCK - mail@akbartrading.com
WEIDMULLER marker TERMINAL BLOCK - mail@akbartrading.comAKBAR TRADING
 
Google Plus für Business
Google Plus für BusinessGoogle Plus für Business
Google Plus für BusinessDAVIES MEYER
 
Intro to AutoCAD 2016 2D | 03 - user interface
Intro to AutoCAD 2016  2D | 03 - user interfaceIntro to AutoCAD 2016  2D | 03 - user interface
Intro to AutoCAD 2016 2D | 03 - user interfaceMoataz Mongi
 
Graphical User Interface
Graphical User Interface Graphical User Interface
Graphical User Interface Bivek Pakuwal
 
Recognizing ego states (Transactional analysis / TA is an integrative approac...
Recognizing ego states (Transactional analysis / TA is an integrative approac...Recognizing ego states (Transactional analysis / TA is an integrative approac...
Recognizing ego states (Transactional analysis / TA is an integrative approac...Manu Melwin Joy
 
Angular 2 - Core Concepts
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core ConceptsFabio Biondi
 
Lecture 7 Software Engineering and Design User Interface Design
Lecture 7 Software Engineering and Design User Interface Design Lecture 7 Software Engineering and Design User Interface Design
Lecture 7 Software Engineering and Design User Interface Design op205
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2Knoldus Inc.
 
From AMP to PWA
From AMP to PWAFrom AMP to PWA
From AMP to PWAIdo Green
 

Andere mochten auch (20)

Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2
 
Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...
Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...
Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...
 
Universal UI - Geräteübergreifendes Interaktionsdesign
Universal UI - Geräteübergreifendes InteraktionsdesignUniversal UI - Geräteübergreifendes Interaktionsdesign
Universal UI - Geräteübergreifendes Interaktionsdesign
 
Top 5 Javascript Frameworks for Web and Mobile App Development
Top 5 Javascript Frameworks for Web and Mobile App DevelopmentTop 5 Javascript Frameworks for Web and Mobile App Development
Top 5 Javascript Frameworks for Web and Mobile App Development
 
Beyond GUI - Die Zukunft digitaler Interfaces
Beyond GUI - Die Zukunft digitaler InterfacesBeyond GUI - Die Zukunft digitaler Interfaces
Beyond GUI - Die Zukunft digitaler Interfaces
 
Real World Dependency Injection - oscon13
Real World Dependency Injection - oscon13Real World Dependency Injection - oscon13
Real World Dependency Injection - oscon13
 
Pavone Project Management Was Ist Neu 9.5
Pavone Project Management Was Ist Neu 9.5Pavone Project Management Was Ist Neu 9.5
Pavone Project Management Was Ist Neu 9.5
 
Caso Plantas de Celulosa, Rio Uruguay, CIJ
Caso Plantas de Celulosa, Rio Uruguay, CIJCaso Plantas de Celulosa, Rio Uruguay, CIJ
Caso Plantas de Celulosa, Rio Uruguay, CIJ
 
Ludica
LudicaLudica
Ludica
 
WEIDMULLER marker TERMINAL BLOCK - mail@akbartrading.com
WEIDMULLER marker TERMINAL BLOCK - mail@akbartrading.comWEIDMULLER marker TERMINAL BLOCK - mail@akbartrading.com
WEIDMULLER marker TERMINAL BLOCK - mail@akbartrading.com
 
Google Plus für Business
Google Plus für BusinessGoogle Plus für Business
Google Plus für Business
 
Kalsel
KalselKalsel
Kalsel
 
Intro to AutoCAD 2016 2D | 03 - user interface
Intro to AutoCAD 2016  2D | 03 - user interfaceIntro to AutoCAD 2016  2D | 03 - user interface
Intro to AutoCAD 2016 2D | 03 - user interface
 
Graphical User Interface
Graphical User Interface Graphical User Interface
Graphical User Interface
 
Angular 2
Angular 2Angular 2
Angular 2
 
Recognizing ego states (Transactional analysis / TA is an integrative approac...
Recognizing ego states (Transactional analysis / TA is an integrative approac...Recognizing ego states (Transactional analysis / TA is an integrative approac...
Recognizing ego states (Transactional analysis / TA is an integrative approac...
 
Angular 2 - Core Concepts
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core Concepts
 
Lecture 7 Software Engineering and Design User Interface Design
Lecture 7 Software Engineering and Design User Interface Design Lecture 7 Software Engineering and Design User Interface Design
Lecture 7 Software Engineering and Design User Interface Design
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
From AMP to PWA
From AMP to PWAFrom AMP to PWA
From AMP to PWA
 

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

Einführung Progressive Web App
Einführung Progressive Web AppEinführung Progressive Web App
Einführung Progressive Web AppSebastian Blum
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Azure Bootcamp Hamburg
Azure Bootcamp Hamburg Azure Bootcamp Hamburg
Azure Bootcamp Hamburg Lennart Passig
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009Andreas Schulte
 
Einführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core MiddlewaresEinführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core MiddlewaresMatthias Jauernig
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5kkramhoeft
 
Applikationsmodernisierung: Der Weg von Legacy in die Cloud
Applikationsmodernisierung: Der Weg von Legacy in die CloudApplikationsmodernisierung: Der Weg von Legacy in die Cloud
Applikationsmodernisierung: Der Weg von Legacy in die CloudAarno Aukia
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Jürg Stuker
 
Rapid Application Development mit Openobject
Rapid Application Development mit OpenobjectRapid Application Development mit Openobject
Rapid Application Development mit Openobjectopenbig
 
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...Knut Herrmann
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...Marc Müller
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der CloudTorsten Fink
 
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application VirtualizationDesktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application VirtualizationGWAVA
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenDanny Linden
 
Webcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing ToolsWebcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing ToolsPatric Dahse
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftDavid Schneider
 

Ähnlich wie Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2 (20)

Einführung Progressive Web App
Einführung Progressive Web AppEinführung Progressive Web App
Einführung Progressive Web App
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
 
Azure Bootcamp Hamburg
Azure Bootcamp Hamburg Azure Bootcamp Hamburg
Azure Bootcamp Hamburg
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 
Ionic 3
Ionic 3Ionic 3
Ionic 3
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009
 
Einführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core MiddlewaresEinführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core Middlewares
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Applikationsmodernisierung: Der Weg von Legacy in die Cloud
Applikationsmodernisierung: Der Weg von Legacy in die CloudApplikationsmodernisierung: Der Weg von Legacy in die Cloud
Applikationsmodernisierung: Der Weg von Legacy in die Cloud
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
Rapid Application Development mit Openobject
Rapid Application Development mit OpenobjectRapid Application Development mit Openobject
Rapid Application Development mit Openobject
 
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application VirtualizationDesktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny Linden
 
Webcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing ToolsWebcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing Tools
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 
3. Night of the pack
3. Night of the pack3. Night of the pack
3. Night of the pack
 

Mehr von Manfred Steyer

Datengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity FrameworkDatengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity FrameworkManfred Steyer
 
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0Manfred Steyer
 
The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")Manfred Steyer
 
Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2Manfred Steyer
 
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId ConnectModern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId ConnectManfred Steyer
 
Der neueste neue Router (Version 3) für Angular 2
Der neueste neue Router (Version 3) für Angular 2Der neueste neue Router (Version 3) für Angular 2
Der neueste neue Router (Version 3) für Angular 2Manfred Steyer
 
ASP.NET Core 1 for MVC- and WebAPI-Devs
ASP.NET Core 1 for MVC- and WebAPI-DevsASP.NET Core 1 for MVC- and WebAPI-Devs
ASP.NET Core 1 for MVC- and WebAPI-DevsManfred Steyer
 
EF Core 1: News features and changes
EF Core 1: News features and changesEF Core 1: News features and changes
EF Core 1: News features and changesManfred Steyer
 
Angular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 LondonAngular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 LondonManfred Steyer
 
Angular 2 - SSD 2016 London
Angular 2 - SSD 2016 LondonAngular 2 - SSD 2016 London
Angular 2 - SSD 2016 LondonManfred Steyer
 
ASP.NET Web API Deep Dive - SSD 2016 London
ASP.NET Web API Deep Dive - SSD 2016 LondonASP.NET Web API Deep Dive - SSD 2016 London
ASP.NET Web API Deep Dive - SSD 2016 LondonManfred Steyer
 
Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1Manfred Steyer
 
Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Manfred Steyer
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co. Manfred Steyer
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co. Manfred Steyer
 
Komponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep DiveKomponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep DiveManfred Steyer
 
Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1Manfred Steyer
 

Mehr von Manfred Steyer (20)

Datengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity FrameworkDatengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity Framework
 
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
 
The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")
 
Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2
 
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId ConnectModern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
 
Der neueste neue Router (Version 3) für Angular 2
Der neueste neue Router (Version 3) für Angular 2Der neueste neue Router (Version 3) für Angular 2
Der neueste neue Router (Version 3) für Angular 2
 
Webpack
WebpackWebpack
Webpack
 
ASP.NET Core 1 for MVC- and WebAPI-Devs
ASP.NET Core 1 for MVC- and WebAPI-DevsASP.NET Core 1 for MVC- and WebAPI-Devs
ASP.NET Core 1 for MVC- and WebAPI-Devs
 
EF Core 1: News features and changes
EF Core 1: News features and changesEF Core 1: News features and changes
EF Core 1: News features and changes
 
Angular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 LondonAngular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 London
 
Angular 2 - SSD 2016 London
Angular 2 - SSD 2016 LondonAngular 2 - SSD 2016 London
Angular 2 - SSD 2016 London
 
ASP.NET Web API Deep Dive - SSD 2016 London
ASP.NET Web API Deep Dive - SSD 2016 LondonASP.NET Web API Deep Dive - SSD 2016 London
ASP.NET Web API Deep Dive - SSD 2016 London
 
Was bringt Angular 2?
Was bringt Angular 2?Was bringt Angular 2?
Was bringt Angular 2?
 
Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1
 
Angular 2: Routing
Angular 2: RoutingAngular 2: Routing
Angular 2: Routing
 
Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.
 
Komponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep DiveKomponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep Dive
 
Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1
 

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

  • 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. 26.09.2016 2 Inhalt Überblick Offline mit Service Worker Sofortiger Nutzen mit AppShell-Muster Background Sync Push Angular Mobile Toolkit Überblick
  • 4. 26.09.2016 4 Progressive Web Apps bieten das Beste aus beiden Welten Progressive Enhancements: Offline, Caching, Home-Screen etc.
  • 5. 26.09.2016 5 App muss auch ohne Browser- Unterstützung für diese Erweiterungen Nutzen bieten! vs.
  • 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
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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!