SlideShare ist ein Scribd-Unternehmen logo
Progressive Web Apps
Jonas Moosmann 15. Juni 2016
2
Jonas Moosmann
Softwareentwickler (M.Sc.)
@JonasMoosmann
MobileWeb .NET
● Nativ
○ Viele Schritte bis zur Verwendung der App nötig
○ 1,6 Millionen im Play Store [Statista, Juli 2015]
○ 1,5 Millionen im App Store [Statista, Juli 2015]
● Web
○ App direkt nutzbar
○ Funktionsumfang geringer (!?)
○ Bedienbarkeit schlechter
3
Mobiles Umfeld: heute
4
● Bestehende Technologien
○ App Cache und Co. sind problembehaftet
● Frameworks
○ limitiert durch Browser
● Proprietäre Ansätze
○ hoher Aufwand und plattformabhängig
Lösungen im Web: heute
5
‘Progressive Web Apps take advantage of new
technologies to bring the best of mobile sites and
native apps to users.’
Quelle: Google Developers
6
● Service Workers
● Wieso nicht App Cache?
● Web App Manifest
● Push API
Überblick
● Hintergrundprozess im Browser
○ Aktivität immer möglich
○ Fungiert als Interceptor
○ Verschiedene Zustände
● Nur unter HTTPS möglich
● Verwendung
○ Caching
○ Offlinefähigkeit
7
Service Workers
8
Service Workers - Beispiel
9
“Application Cache is a Douchebag.”
Quelle: Jake Archibald - A List Apart
10
● Manifest legt Cache fest
● wenig flexibel
○ keine eigene Logik möglich
● einige “Besonderheiten”
○ bedient immer aus dem Cache
○ Updates nur bei Änderung des Manifests
○ Caching des Manifests möglich (!!!)
○ Untergeordnete Ressourcen müssen referenziert werden
Wieso nicht einfach App Cache?
● Zentraler Ort für Metadaten
● JSON-Format
● Löst proprietäre Ansätze ab
● “Installierbarkeit”
● Metadaten, z.B.
○ Name
○ Kurzname
○ Icons
11
Web App Manifest
12
Web App Manifest - Beispiel
● Push-Nachrichten in Web Apps
● Ermöglicht durch Service Worker
○ HTTPS
○ Handling des Push-Events
● Berechtigung nötig
● Push Service wird benötigt
○ Interaktion nicht spezifiziert
13
Push API
14
Push API - Beispiel
15
Kompatibilität
Web App Manifest
Service Workers
Push API
16
Demo
● App zum Empfang von Push-Nachrichten
● Technologien
○ Service Worker
○ Push-API
○ Web App Manifest
● Ausgeführt unter Android/Chrome
17
Hinzufügen zum Startbildschirm
- Adressleiste sichtbar
- Shortname aus Manifest
- “Installieren” der Web App
- Teilweise nicht aus Spezifikation
18
Öffnen der Web App
- Kein Splashscreen im Manifest
- Generierter Splashscreen
- Titel aus Manifest
- Teilweise nicht aus Spezifikation
19
Darstellung der Web App
- Ansicht “Standalone”
- Adressleiste nicht sichtbar
- Ähnlichkeit zu nativer App
20
Empfang einer Push-Nachricht
- Ansicht Lockscreen
- Gewöhnliche Push-Nachricht
21
● Progressive Web Apps eröffnen neue Möglichkeiten
○ Caching (komplexe Strategien)
○ Push-Nachrichten
○ Metainformationen
● Einsetzbarkeit
○ Android → ja
○ Windows Phone → bald!?
○ iOS → nein
● Weitere Spezifikationen notwendig
Fazit
22
● Chrome & Firefox
○ Bereits einsetzbar
● Edge
○ In Arbeit
● Safari
○ positive Signale ➝ 5-year plan
● Weitere Technologien
○ Web Background Sync
Ausblick
Vielen Dank
Jonas Moosmann
Softwareentwickler
inovex GmbH
Ludwig-Erhard-Allee 6
76131 Karlsruhe
jonas.moosmann@inovex.de

Weitere ähnliche Inhalte

Andere mochten auch

Infrastructure as code: Cloud-Umgebungen mit Terraform verwalten
Infrastructure as code: Cloud-Umgebungen mit Terraform verwaltenInfrastructure as code: Cloud-Umgebungen mit Terraform verwalten
Infrastructure as code: Cloud-Umgebungen mit Terraform verwalteninovex GmbH
 
Erfolgsfaktoren von Datenprodukten
Erfolgsfaktoren von DatenproduktenErfolgsfaktoren von Datenprodukten
Erfolgsfaktoren von Datenprodukteninovex GmbH
 
Gitlab meets Kubernetes
Gitlab meets KubernetesGitlab meets Kubernetes
Gitlab meets Kubernetesinovex GmbH
 
Cloud Wars – what‘s the smartest data platform? Vergleich Microsoft Azure, Am...
Cloud Wars – what‘s the smartest data platform? Vergleich Microsoft Azure, Am...Cloud Wars – what‘s the smartest data platform? Vergleich Microsoft Azure, Am...
Cloud Wars – what‘s the smartest data platform? Vergleich Microsoft Azure, Am...inovex GmbH
 
SysDig Metriken zentralisieren
SysDig Metriken zentralisierenSysDig Metriken zentralisieren
SysDig Metriken zentralisiereninovex GmbH
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...Robert Nyman
 
Advanced Cojure Microservices
Advanced Cojure MicroservicesAdvanced Cojure Microservices
Advanced Cojure Microservicesinovex GmbH
 
Stackstorm – Event driven Automation
Stackstorm – Event driven AutomationStackstorm – Event driven Automation
Stackstorm – Event driven Automationinovex GmbH
 
Prometheus Monitoring
Prometheus MonitoringPrometheus Monitoring
Prometheus Monitoringinovex GmbH
 
31 la generosidad-andres
31 la generosidad-andres31 la generosidad-andres
31 la generosidad-andresAndres797
 
Procés d’adequació a la normativa de protecció de dades personals
Procés d’adequació a la normativa de protecció de dades personalsProcés d’adequació a la normativa de protecció de dades personals
Procés d’adequació a la normativa de protecció de dades personalsPrivadesa
 
GLOBALISATION IN INDIA - GATEWAYS AND PITFALLS
GLOBALISATION IN INDIA - GATEWAYS AND PITFALLSGLOBALISATION IN INDIA - GATEWAYS AND PITFALLS
GLOBALISATION IN INDIA - GATEWAYS AND PITFALLSIAEME Publication
 
Introducing OSGi Technology to Existing Projects - Nils Hofseth Andersen
Introducing OSGi Technology to Existing Projects - Nils Hofseth AndersenIntroducing OSGi Technology to Existing Projects - Nils Hofseth Andersen
Introducing OSGi Technology to Existing Projects - Nils Hofseth Andersenmfrancis
 
Plano de representação no Brasil para operadores estrangeiros
Plano de representação no Brasil para operadores estrangeirosPlano de representação no Brasil para operadores estrangeiros
Plano de representação no Brasil para operadores estrangeirosJulian Aude
 
29 nociones de power point andres
29 nociones de power point andres29 nociones de power point andres
29 nociones de power point andresAndres797
 
Somnath City Plots For resale,8459137252
Somnath City Plots For resale,8459137252Somnath City Plots For resale,8459137252
Somnath City Plots For resale,8459137252somnathbuildtech
 
31 ébola andres
31 ébola andres31 ébola andres
31 ébola andresAndres797
 
Socratic Presentation_JWW
Socratic Presentation_JWWSocratic Presentation_JWW
Socratic Presentation_JWWpappy76
 

Andere mochten auch (18)

Infrastructure as code: Cloud-Umgebungen mit Terraform verwalten
Infrastructure as code: Cloud-Umgebungen mit Terraform verwaltenInfrastructure as code: Cloud-Umgebungen mit Terraform verwalten
Infrastructure as code: Cloud-Umgebungen mit Terraform verwalten
 
Erfolgsfaktoren von Datenprodukten
Erfolgsfaktoren von DatenproduktenErfolgsfaktoren von Datenprodukten
Erfolgsfaktoren von Datenprodukten
 
Gitlab meets Kubernetes
Gitlab meets KubernetesGitlab meets Kubernetes
Gitlab meets Kubernetes
 
Cloud Wars – what‘s the smartest data platform? Vergleich Microsoft Azure, Am...
Cloud Wars – what‘s the smartest data platform? Vergleich Microsoft Azure, Am...Cloud Wars – what‘s the smartest data platform? Vergleich Microsoft Azure, Am...
Cloud Wars – what‘s the smartest data platform? Vergleich Microsoft Azure, Am...
 
SysDig Metriken zentralisieren
SysDig Metriken zentralisierenSysDig Metriken zentralisieren
SysDig Metriken zentralisieren
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
 
Advanced Cojure Microservices
Advanced Cojure MicroservicesAdvanced Cojure Microservices
Advanced Cojure Microservices
 
Stackstorm – Event driven Automation
Stackstorm – Event driven AutomationStackstorm – Event driven Automation
Stackstorm – Event driven Automation
 
Prometheus Monitoring
Prometheus MonitoringPrometheus Monitoring
Prometheus Monitoring
 
31 la generosidad-andres
31 la generosidad-andres31 la generosidad-andres
31 la generosidad-andres
 
Procés d’adequació a la normativa de protecció de dades personals
Procés d’adequació a la normativa de protecció de dades personalsProcés d’adequació a la normativa de protecció de dades personals
Procés d’adequació a la normativa de protecció de dades personals
 
GLOBALISATION IN INDIA - GATEWAYS AND PITFALLS
GLOBALISATION IN INDIA - GATEWAYS AND PITFALLSGLOBALISATION IN INDIA - GATEWAYS AND PITFALLS
GLOBALISATION IN INDIA - GATEWAYS AND PITFALLS
 
Introducing OSGi Technology to Existing Projects - Nils Hofseth Andersen
Introducing OSGi Technology to Existing Projects - Nils Hofseth AndersenIntroducing OSGi Technology to Existing Projects - Nils Hofseth Andersen
Introducing OSGi Technology to Existing Projects - Nils Hofseth Andersen
 
Plano de representação no Brasil para operadores estrangeiros
Plano de representação no Brasil para operadores estrangeirosPlano de representação no Brasil para operadores estrangeiros
Plano de representação no Brasil para operadores estrangeiros
 
29 nociones de power point andres
29 nociones de power point andres29 nociones de power point andres
29 nociones de power point andres
 
Somnath City Plots For resale,8459137252
Somnath City Plots For resale,8459137252Somnath City Plots For resale,8459137252
Somnath City Plots For resale,8459137252
 
31 ébola andres
31 ébola andres31 ébola andres
31 ébola andres
 
Socratic Presentation_JWW
Socratic Presentation_JWWSocratic Presentation_JWW
Socratic Presentation_JWW
 

Ähnlich wie Progressive Web Apps

Progressive Web Apps Presentation
Progressive Web Apps PresentationProgressive Web Apps Presentation
Progressive Web Apps PresentationSteffen Wagner
 
SharePoint 2013 – Tech-Track
SharePoint 2013 – Tech-TrackSharePoint 2013 – Tech-Track
SharePoint 2013 – Tech-TrackUnic
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Koombea
 
Was ist eigentlich SharePoint
Was ist eigentlich SharePointWas ist eigentlich SharePoint
Was ist eigentlich SharePointMax Nowack
 
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
 
Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit AngularJens Binfet
 
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Manfred Steyer
 
OSMC 2009 | NagVis 1.4 - What´s new by Lars Michaelsen
OSMC 2009 | NagVis 1.4 - What´s new by Lars MichaelsenOSMC 2009 | NagVis 1.4 - What´s new by Lars Michaelsen
OSMC 2009 | NagVis 1.4 - What´s new by Lars MichaelsenNETWAYS
 
A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS
A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJSA/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS
A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJSOptimizely
 
Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?gedoplan
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Bastian Grimm
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Bastian Grimm
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenMarkus Eiglsperger
 
20150611 track4 2_ae21_salesforce and ibm software
20150611 track4 2_ae21_salesforce and ibm software20150611 track4 2_ae21_salesforce and ibm software
20150611 track4 2_ae21_salesforce and ibm softwareDNUG e.V.
 
DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrieren
DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrierenDNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrieren
DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrierenAndreas Rosen
 
Ajax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittAjax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittdominion
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft AG
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsRalf Lütke
 
Einführung Progressive Web App
Einführung Progressive Web AppEinführung Progressive Web App
Einführung Progressive Web AppSebastian Blum
 

Ähnlich wie Progressive Web Apps (20)

Progressive Web Apps Presentation
Progressive Web Apps PresentationProgressive Web Apps Presentation
Progressive Web Apps Presentation
 
SharePoint 2013 – Tech-Track
SharePoint 2013 – Tech-TrackSharePoint 2013 – Tech-Track
SharePoint 2013 – Tech-Track
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
 
Was ist eigentlich SharePoint
Was ist eigentlich SharePointWas ist eigentlich SharePoint
Was ist eigentlich SharePoint
 
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
 
Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit Angular
 
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
 
OSMC 2009 | NagVis 1.4 - What´s new by Lars Michaelsen
OSMC 2009 | NagVis 1.4 - What´s new by Lars MichaelsenOSMC 2009 | NagVis 1.4 - What´s new by Lars Michaelsen
OSMC 2009 | NagVis 1.4 - What´s new by Lars Michaelsen
 
A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS
A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJSA/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS
A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS
 
Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
 
20150611 track4 2_ae21_salesforce and ibm software
20150611 track4 2_ae21_salesforce and ibm software20150611 track4 2_ae21_salesforce and ibm software
20150611 track4 2_ae21_salesforce and ibm software
 
DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrieren
DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrierenDNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrieren
DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrieren
 
Ajax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittAjax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schritt
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
 
Einführung Progressive Web App
Einführung Progressive Web AppEinführung Progressive Web App
Einführung Progressive Web App
 
iOS Network Extensions
iOS Network ExtensionsiOS Network Extensions
iOS Network Extensions
 

Mehr von inovex GmbH

lldb – Debugger auf Abwegen
lldb – Debugger auf Abwegenlldb – Debugger auf Abwegen
lldb – Debugger auf Abwegeninovex GmbH
 
Are you sure about that?! Uncertainty Quantification in AI
Are you sure about that?! Uncertainty Quantification in AIAre you sure about that?! Uncertainty Quantification in AI
Are you sure about that?! Uncertainty Quantification in AIinovex GmbH
 
Why natural language is next step in the AI evolution
Why natural language is next step in the AI evolutionWhy natural language is next step in the AI evolution
Why natural language is next step in the AI evolutioninovex GmbH
 
Network Policies
Network PoliciesNetwork Policies
Network Policiesinovex GmbH
 
Interpretable Machine Learning
Interpretable Machine LearningInterpretable Machine Learning
Interpretable Machine Learninginovex GmbH
 
Jenkins X – CI/CD in wolkigen Umgebungen
Jenkins X – CI/CD in wolkigen UmgebungenJenkins X – CI/CD in wolkigen Umgebungen
Jenkins X – CI/CD in wolkigen Umgebungeninovex GmbH
 
AI auf Edge-Geraeten
AI auf Edge-GeraetenAI auf Edge-Geraeten
AI auf Edge-Geraeteninovex GmbH
 
Prometheus on Kubernetes
Prometheus on KubernetesPrometheus on Kubernetes
Prometheus on Kubernetesinovex GmbH
 
Deep Learning for Recommender Systems
Deep Learning for Recommender SystemsDeep Learning for Recommender Systems
Deep Learning for Recommender Systemsinovex GmbH
 
Representation Learning von Zeitreihen
Representation Learning von ZeitreihenRepresentation Learning von Zeitreihen
Representation Learning von Zeitreiheninovex GmbH
 
Talk to me – Chatbots und digitale Assistenten
Talk to me – Chatbots und digitale AssistentenTalk to me – Chatbots und digitale Assistenten
Talk to me – Chatbots und digitale Assistenteninovex GmbH
 
Künstlich intelligent?
Künstlich intelligent?Künstlich intelligent?
Künstlich intelligent?inovex GmbH
 
Das Android Open Source Project
Das Android Open Source ProjectDas Android Open Source Project
Das Android Open Source Projectinovex GmbH
 
Machine Learning Interpretability
Machine Learning InterpretabilityMachine Learning Interpretability
Machine Learning Interpretabilityinovex GmbH
 
Performance evaluation of GANs in a semisupervised OCR use case
Performance evaluation of GANs in a semisupervised OCR use casePerformance evaluation of GANs in a semisupervised OCR use case
Performance evaluation of GANs in a semisupervised OCR use caseinovex GmbH
 
People & Products – Lessons learned from the daily IT madness
People & Products – Lessons learned from the daily IT madnessPeople & Products – Lessons learned from the daily IT madness
People & Products – Lessons learned from the daily IT madnessinovex GmbH
 
Infrastructure as (real) Code – Manage your K8s resources with Pulumi
Infrastructure as (real) Code – Manage your K8s resources with PulumiInfrastructure as (real) Code – Manage your K8s resources with Pulumi
Infrastructure as (real) Code – Manage your K8s resources with Pulumiinovex GmbH
 

Mehr von inovex GmbH (20)

lldb – Debugger auf Abwegen
lldb – Debugger auf Abwegenlldb – Debugger auf Abwegen
lldb – Debugger auf Abwegen
 
Are you sure about that?! Uncertainty Quantification in AI
Are you sure about that?! Uncertainty Quantification in AIAre you sure about that?! Uncertainty Quantification in AI
Are you sure about that?! Uncertainty Quantification in AI
 
Why natural language is next step in the AI evolution
Why natural language is next step in the AI evolutionWhy natural language is next step in the AI evolution
Why natural language is next step in the AI evolution
 
WWDC 2019 Recap
WWDC 2019 RecapWWDC 2019 Recap
WWDC 2019 Recap
 
Network Policies
Network PoliciesNetwork Policies
Network Policies
 
Interpretable Machine Learning
Interpretable Machine LearningInterpretable Machine Learning
Interpretable Machine Learning
 
Jenkins X – CI/CD in wolkigen Umgebungen
Jenkins X – CI/CD in wolkigen UmgebungenJenkins X – CI/CD in wolkigen Umgebungen
Jenkins X – CI/CD in wolkigen Umgebungen
 
AI auf Edge-Geraeten
AI auf Edge-GeraetenAI auf Edge-Geraeten
AI auf Edge-Geraeten
 
Prometheus on Kubernetes
Prometheus on KubernetesPrometheus on Kubernetes
Prometheus on Kubernetes
 
Deep Learning for Recommender Systems
Deep Learning for Recommender SystemsDeep Learning for Recommender Systems
Deep Learning for Recommender Systems
 
Azure IoT Edge
Azure IoT EdgeAzure IoT Edge
Azure IoT Edge
 
Representation Learning von Zeitreihen
Representation Learning von ZeitreihenRepresentation Learning von Zeitreihen
Representation Learning von Zeitreihen
 
Talk to me – Chatbots und digitale Assistenten
Talk to me – Chatbots und digitale AssistentenTalk to me – Chatbots und digitale Assistenten
Talk to me – Chatbots und digitale Assistenten
 
Künstlich intelligent?
Künstlich intelligent?Künstlich intelligent?
Künstlich intelligent?
 
Dev + Ops = Go
Dev + Ops = GoDev + Ops = Go
Dev + Ops = Go
 
Das Android Open Source Project
Das Android Open Source ProjectDas Android Open Source Project
Das Android Open Source Project
 
Machine Learning Interpretability
Machine Learning InterpretabilityMachine Learning Interpretability
Machine Learning Interpretability
 
Performance evaluation of GANs in a semisupervised OCR use case
Performance evaluation of GANs in a semisupervised OCR use casePerformance evaluation of GANs in a semisupervised OCR use case
Performance evaluation of GANs in a semisupervised OCR use case
 
People & Products – Lessons learned from the daily IT madness
People & Products – Lessons learned from the daily IT madnessPeople & Products – Lessons learned from the daily IT madness
People & Products – Lessons learned from the daily IT madness
 
Infrastructure as (real) Code – Manage your K8s resources with Pulumi
Infrastructure as (real) Code – Manage your K8s resources with PulumiInfrastructure as (real) Code – Manage your K8s resources with Pulumi
Infrastructure as (real) Code – Manage your K8s resources with Pulumi
 

Progressive Web Apps

  • 1. Progressive Web Apps Jonas Moosmann 15. Juni 2016
  • 3. ● Nativ ○ Viele Schritte bis zur Verwendung der App nötig ○ 1,6 Millionen im Play Store [Statista, Juli 2015] ○ 1,5 Millionen im App Store [Statista, Juli 2015] ● Web ○ App direkt nutzbar ○ Funktionsumfang geringer (!?) ○ Bedienbarkeit schlechter 3 Mobiles Umfeld: heute
  • 4. 4 ● Bestehende Technologien ○ App Cache und Co. sind problembehaftet ● Frameworks ○ limitiert durch Browser ● Proprietäre Ansätze ○ hoher Aufwand und plattformabhängig Lösungen im Web: heute
  • 5. 5 ‘Progressive Web Apps take advantage of new technologies to bring the best of mobile sites and native apps to users.’ Quelle: Google Developers
  • 6. 6 ● Service Workers ● Wieso nicht App Cache? ● Web App Manifest ● Push API Überblick
  • 7. ● Hintergrundprozess im Browser ○ Aktivität immer möglich ○ Fungiert als Interceptor ○ Verschiedene Zustände ● Nur unter HTTPS möglich ● Verwendung ○ Caching ○ Offlinefähigkeit 7 Service Workers
  • 9. 9 “Application Cache is a Douchebag.” Quelle: Jake Archibald - A List Apart
  • 10. 10 ● Manifest legt Cache fest ● wenig flexibel ○ keine eigene Logik möglich ● einige “Besonderheiten” ○ bedient immer aus dem Cache ○ Updates nur bei Änderung des Manifests ○ Caching des Manifests möglich (!!!) ○ Untergeordnete Ressourcen müssen referenziert werden Wieso nicht einfach App Cache?
  • 11. ● Zentraler Ort für Metadaten ● JSON-Format ● Löst proprietäre Ansätze ab ● “Installierbarkeit” ● Metadaten, z.B. ○ Name ○ Kurzname ○ Icons 11 Web App Manifest
  • 12. 12 Web App Manifest - Beispiel
  • 13. ● Push-Nachrichten in Web Apps ● Ermöglicht durch Service Worker ○ HTTPS ○ Handling des Push-Events ● Berechtigung nötig ● Push Service wird benötigt ○ Interaktion nicht spezifiziert 13 Push API
  • 14. 14 Push API - Beispiel
  • 16. 16 Demo ● App zum Empfang von Push-Nachrichten ● Technologien ○ Service Worker ○ Push-API ○ Web App Manifest ● Ausgeführt unter Android/Chrome
  • 17. 17 Hinzufügen zum Startbildschirm - Adressleiste sichtbar - Shortname aus Manifest - “Installieren” der Web App - Teilweise nicht aus Spezifikation
  • 18. 18 Öffnen der Web App - Kein Splashscreen im Manifest - Generierter Splashscreen - Titel aus Manifest - Teilweise nicht aus Spezifikation
  • 19. 19 Darstellung der Web App - Ansicht “Standalone” - Adressleiste nicht sichtbar - Ähnlichkeit zu nativer App
  • 20. 20 Empfang einer Push-Nachricht - Ansicht Lockscreen - Gewöhnliche Push-Nachricht
  • 21. 21 ● Progressive Web Apps eröffnen neue Möglichkeiten ○ Caching (komplexe Strategien) ○ Push-Nachrichten ○ Metainformationen ● Einsetzbarkeit ○ Android → ja ○ Windows Phone → bald!? ○ iOS → nein ● Weitere Spezifikationen notwendig Fazit
  • 22. 22 ● Chrome & Firefox ○ Bereits einsetzbar ● Edge ○ In Arbeit ● Safari ○ positive Signale ➝ 5-year plan ● Weitere Technologien ○ Web Background Sync Ausblick
  • 23. Vielen Dank Jonas Moosmann Softwareentwickler inovex GmbH Ludwig-Erhard-Allee 6 76131 Karlsruhe jonas.moosmann@inovex.de