SlideShare ist ein Scribd-Unternehmen logo
PWA
Progressive Web Apps
Daud Nasir
Steffen Wagner
Natalina Radosevic
Hochschule Mannheim
E-Business SS18 bei Prof. Dr. Michael Gröschel
Agenda
● Anforderungen
● Rückblick
● Einführung in PWA - Grundlagen
● Einführung in PWA - Technische Grundlagen
● Bewertungen und Ausblick
● Hands-On
● Selbstübung
2
Anforderungen
3
App - Anforderungen (Unternehmenssicht)
● Wettbewerbsvorteil
● Hohe Reichweite durch Multiplattform-Präsenz
● Kundenbindung erhöhen (Bestandskunden)
● Benutzerfreundlichkeit
● Geringe Entwicklungs- und Wartungskosten
● Einfache Wartbarkeit
● Geringe Ausgaben für Fortbildung (z.B. neue Programmiersprachen)
● Nutzung von gerätespezifischen Funktionen (z.B. Kamera)
4
Rückblick
5
Native Apps
● Smartphone-App
● Objective C (iOS) | Java (Android) | C# (Windows)
● Schnelle Leistung
● Zuverlässigkeit
● Im App-Store zu finden
● Negativ:
○ Nicht Plattformunabhängig
○ Hoher Preis- und Zeitaufwand
6
Cross-Platform Native Apps
● "write code once, run on multiple platforms"
● Xamarin: Microsoft | C#
● React Native: Facebook | JavaScript
● Titanium: JavaScript, eigene APIs
7
Hybrid Apps
● Teilweise native Apps, teilweise Web-Apps
● Im App-Store zu finden
● JavaScript, HTML, CSS
● Zugriff auf Hardware
● Laufen in einem Webbrowser
● Frameworks:
○ PhoneGap/Cordova
○ Canvas
8
Einführung in PWA
Grundlagen
9
Fragen an Sie!
● Wann hast Du zum letzten Mal die mobile Webseite einer App und nicht das
Pendant ihrer nativen App besucht?
● Hat die Web App länger benötigt zum Laden?
● War es eine angenehme Erfahrung? Was hat Dir daran gefallen? Was hätte
besser sein können?
10
Was ist eine Progressive Web App?
“Progressive Web App (PWA) ist eine Webseite, die ähnlich wie eine
native App zu bedienen ist. Sie wird mit HTML, CSS und JavaScript
erstellt, sind aber bezüglich Optik und Bedienung einer native App
ähnlich, z.B. können sie Offline-fähig und können auf dem
Desktop/Homescreen verankert werden.”
Quelle: www.it-visions.de
11
Quelle: Sheppard, Dennis: Beginning Progressive Web App Development
PWA - Beispiele
12
PWA - Merkmale
● Progressive - Browserunabhängig (Progressive Enhancement)
● Responsive - Automatische Skalierung
● Offline-Funktion
● Sicher - HTTPS
● Kundenbindung - Push-Benachrichtigungen
● Keine Installation - “Add to Home Screen”
● Auffindbar – Suchmaschine
● Verlinkbar - via URL
● App-ähnlich
13
Progressive
Web
App
Workflow App-Distribution
● Native Apps werden über App-Stores ausgeliefert
○ Zentraler Marktplatz auf jeder Plattform
○ Updates müssen manuell eingespielt werden
○ Vorgegebene Qualitätsstandards, eventuell schwieriger
Veröffentlichungsprozess
● Progressive Web Apps: Browserview auf dem Homescreen
○ Manifest definiert u.a. Name, Icons, Start URL, …
○ Manuelles “hinzufügen” einer PWA über die jeweilige Webseite
■ “PWA Store” sind Suchmaschinen
14
Einführung in PWA
Technische Grundlagen
15
PWA - Technische Bestandteile
16
PWA - Service Worker
17
● Typ von Web Worker
● “Vermittler” - HTTPS
● JavaScript-Code
● Offline Funktionalität
● Hintergrundaktualisierung
● Push Notifications
● Caching
PWA - Web App Manifest
● “Add to Home Screen”
● Definiert
○ Icons
○ Name
○ StartURL
○ Farben
○ Bildschirmmodus
18
App Shell
● Shells laden sofort bei
wiederholten Besuchen
● Dynamischer Inhalt füllt
den View
19
Applikations Shell Inhalt
Quelle: https://developers.google.com
Push API
20
Quelle: https://medium.com
● Teil vom Service Worker
● Implementierung über
PushManager
● Anfrage von Berechtigungen
● Läuft im Hintergrund
Bewertungen und Ausblick
21
Vorteile von Progressive Web Apps
● Plattformübergreifend
● Einfache Veröffentlichung
● Keine Installation nötig
● Schnell
● Sofortige Updates
● Offline verfügbar
● SEO, da es sich um HTML handelt
● Benutzerfreundlich / “angenehme Bedienung”
22
Kritische Bewertung
23
● Keine vollständige Unterstützung von allen Browsern
● Einige Hardwarefeatures werden (noch) nicht unterstützt (z.B. Fingerprint)
● Einige Berechtigungen können nicht angefragt werden
○ Telefon, Kalender, Kontakte
● Niedrigere Präsenz durch Fehlen in App-Stores
● Fehlende (externe) Qualitätssicherung (z.B. durch App Store)
PWA - Zukunft
● Große Unternehmen entwickeln PWA´s
○ Aber auch native Apps parallel
● Mögliches plattformübergreifendes App-Modell der Zukunft
● Apple folgt langsam dem PWA-Trend (ab iOS11)
● Kein vollständiger Ersatz von nativen Apps
24
Hands-On
25
Werkzeuge
26
● Beliebige WebIDE (Atom, IntelliJ,...) mit JS, HTML und CSS “Kenntnissen”
● Freie Wahl von JS Frameworks und Libraries (React, jQuery, Workbox,...)
● Debugging über Browser (Service Workers, Cache Storage) möglich
ebiCAM
● HTML/CSS/JS
● Keine externen Abhängigkeiten
● Caching per serviceWorker
● Zugriff auf Kamera per
getUserMedia()
● Speicherung der Aufnahme
● Auf dem Homescreen “ablegbar”
Run: https://bit.ly/2sltvBm
Src: https://bit.ly/2JlDhx3
27
Selbstübung
28
Ihre erste Progressive Web App - “Weather”
Was Sie lernen werden
● Wie man eine PWA designed und konstruiert (“app shell
method”)
● Wie die App offline funktioniert
● Wie man Daten für den späteren Offlinegebrauch speichert
https://goo.gl/ZyX8Yk
29
Readings & Viewings
● Google Inc., Web Fundamentals
○ URL: https://developers.google.com/web/fundamentals/codelabs
● Sheppard, Dennis: Beginning Progressive Web App Development
○ ISBN-13: 978-1-4842-3090-9
● Steiner, Thomas: What is in a Web View?
○ DOI: 10.1145/3184558.3188742
● How-to: Progressive Web Apps praktisch erklärt
○ URL: https:/https://jaxenter.de/pwa-how-to-progressive-web-apps-67624
30
Fragen?
31
Evaluation
32

Weitere ähnliche Inhalte

Was ist angesagt?

Training Webinar: Detect Performance Bottlenecks of Applications
Training Webinar: Detect Performance Bottlenecks of ApplicationsTraining Webinar: Detect Performance Bottlenecks of Applications
Training Webinar: Detect Performance Bottlenecks of Applications
OutSystems
 
Progressive Web Applications
Progressive Web ApplicationsProgressive Web Applications
Progressive Web Applications
Bartek Igielski
 
ASP.NET Core MVC + Web API with Overview
ASP.NET Core MVC + Web API with OverviewASP.NET Core MVC + Web API with Overview
ASP.NET Core MVC + Web API with Overview
Shahed Chowdhuri
 
Why Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your BusinessWhy Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your Business
Lets Grow Business
 
React Hooks
React HooksReact Hooks
React Hooks
Erez Cohen
 
Full stack development
Full stack developmentFull stack development
Full stack development
Arnav Gupta
 
How to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React CodeHow to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React Code
WrapPixel
 
Pwa.pptx
Pwa.pptxPwa.pptx
Pwa.pptx
Harish Karthick
 
The magic of flutter
The magic of flutterThe magic of flutter
The magic of flutter
Shady Selim
 
Flutter
FlutterFlutter
Flutter
Dave Chao
 
Next.js vs React | what to choose for frontend development_
Next.js vs React | what to choose for frontend development_Next.js vs React | what to choose for frontend development_
Next.js vs React | what to choose for frontend development_
ForceBolt
 
Clean architecture
Clean architectureClean architecture
Clean architecture
.NET Crowd
 
Web Development
Web DevelopmentWeb Development
Web Development
Aditya Raman
 
Rest api with node js and express
Rest api with node js and expressRest api with node js and express
Rest api with node js and express
GirlsInTechnology Nepal
 
Flutter
FlutterFlutter
REST API and CRUD
REST API and CRUDREST API and CRUD
REST API and CRUD
Prem Sanil
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Software Infrastructure
 
E commerce website proposal
E commerce website proposalE commerce website proposal
E commerce website proposal
Neha sharma
 
Pwa demystified
Pwa demystifiedPwa demystified
Pwa demystified
edynamic
 
Universal React apps in Next.js
Universal React apps in Next.jsUniversal React apps in Next.js
Universal React apps in Next.js
🐕 Łukasz Ostrowski
 

Was ist angesagt? (20)

Training Webinar: Detect Performance Bottlenecks of Applications
Training Webinar: Detect Performance Bottlenecks of ApplicationsTraining Webinar: Detect Performance Bottlenecks of Applications
Training Webinar: Detect Performance Bottlenecks of Applications
 
Progressive Web Applications
Progressive Web ApplicationsProgressive Web Applications
Progressive Web Applications
 
ASP.NET Core MVC + Web API with Overview
ASP.NET Core MVC + Web API with OverviewASP.NET Core MVC + Web API with Overview
ASP.NET Core MVC + Web API with Overview
 
Why Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your BusinessWhy Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your Business
 
React Hooks
React HooksReact Hooks
React Hooks
 
Full stack development
Full stack developmentFull stack development
Full stack development
 
How to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React CodeHow to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React Code
 
Pwa.pptx
Pwa.pptxPwa.pptx
Pwa.pptx
 
The magic of flutter
The magic of flutterThe magic of flutter
The magic of flutter
 
Flutter
FlutterFlutter
Flutter
 
Next.js vs React | what to choose for frontend development_
Next.js vs React | what to choose for frontend development_Next.js vs React | what to choose for frontend development_
Next.js vs React | what to choose for frontend development_
 
Clean architecture
Clean architectureClean architecture
Clean architecture
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Rest api with node js and express
Rest api with node js and expressRest api with node js and express
Rest api with node js and express
 
Flutter
FlutterFlutter
Flutter
 
REST API and CRUD
REST API and CRUDREST API and CRUD
REST API and CRUD
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
E commerce website proposal
E commerce website proposalE commerce website proposal
E commerce website proposal
 
Pwa demystified
Pwa demystifiedPwa demystified
Pwa demystified
 
Universal React apps in Next.js
Universal React apps in Next.jsUniversal React apps in Next.js
Universal React apps in Next.js
 

Ähnlich wie Progressive Web Apps Presentation

Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit Angular
Jens Binfet
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
inovex GmbH
 
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
NETWAYS
 
JavaScript-Erweiterungen für UI und UX
JavaScript-Erweiterungen für UI und UXJavaScript-Erweiterungen für UI und UX
JavaScript-Erweiterungen für UI und UX
Kai Donato
 
ONE Konferenz: Von der Idee zur App
ONE Konferenz: Von der Idee zur AppONE Konferenz: Von der Idee zur App
ONE Konferenz: Von der Idee zur App
Netcetera
 
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
Markus Eiglsperger
 
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
Aarno Aukia
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Jens Küsters
 
Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?
gedoplan
 
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
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft AG
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
gedoplan
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
greenrobot
 
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
 
Creasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus EntwicklersichtCreasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus EntwicklersichtCreasoft AG
 
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Bokowsky + Laymann GmbH
 
Zinit.leistungen.webentwicklung.v1.0.de
Zinit.leistungen.webentwicklung.v1.0.deZinit.leistungen.webentwicklung.v1.0.de
Zinit.leistungen.webentwicklung.v1.0.de
Kenner Soft Service GmbH
 
Web-Anwendungen mit BSP
Web-Anwendungen mit BSPWeb-Anwendungen mit BSP
Web-Anwendungen mit BSP
rplantiko
 
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile WebGoing Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Webch.ch
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das web
gedoplan
 

Ähnlich wie Progressive Web Apps Presentation (20)

Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit Angular
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
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
 
JavaScript-Erweiterungen für UI und UX
JavaScript-Erweiterungen für UI und UXJavaScript-Erweiterungen für UI und UX
JavaScript-Erweiterungen für UI und UX
 
ONE Konferenz: Von der Idee zur App
ONE Konferenz: Von der Idee zur AppONE Konferenz: Von der Idee zur App
ONE Konferenz: Von der Idee zur App
 
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
 
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
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
 
Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
 
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...
 
Creasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus EntwicklersichtCreasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus Entwicklersicht
 
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
 
Zinit.leistungen.webentwicklung.v1.0.de
Zinit.leistungen.webentwicklung.v1.0.deZinit.leistungen.webentwicklung.v1.0.de
Zinit.leistungen.webentwicklung.v1.0.de
 
Web-Anwendungen mit BSP
Web-Anwendungen mit BSPWeb-Anwendungen mit BSP
Web-Anwendungen mit BSP
 
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile WebGoing Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Web
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das web
 

Progressive Web Apps Presentation

  • 1. PWA Progressive Web Apps Daud Nasir Steffen Wagner Natalina Radosevic Hochschule Mannheim E-Business SS18 bei Prof. Dr. Michael Gröschel
  • 2. Agenda ● Anforderungen ● Rückblick ● Einführung in PWA - Grundlagen ● Einführung in PWA - Technische Grundlagen ● Bewertungen und Ausblick ● Hands-On ● Selbstübung 2
  • 4. App - Anforderungen (Unternehmenssicht) ● Wettbewerbsvorteil ● Hohe Reichweite durch Multiplattform-Präsenz ● Kundenbindung erhöhen (Bestandskunden) ● Benutzerfreundlichkeit ● Geringe Entwicklungs- und Wartungskosten ● Einfache Wartbarkeit ● Geringe Ausgaben für Fortbildung (z.B. neue Programmiersprachen) ● Nutzung von gerätespezifischen Funktionen (z.B. Kamera) 4
  • 6. Native Apps ● Smartphone-App ● Objective C (iOS) | Java (Android) | C# (Windows) ● Schnelle Leistung ● Zuverlässigkeit ● Im App-Store zu finden ● Negativ: ○ Nicht Plattformunabhängig ○ Hoher Preis- und Zeitaufwand 6
  • 7. Cross-Platform Native Apps ● "write code once, run on multiple platforms" ● Xamarin: Microsoft | C# ● React Native: Facebook | JavaScript ● Titanium: JavaScript, eigene APIs 7
  • 8. Hybrid Apps ● Teilweise native Apps, teilweise Web-Apps ● Im App-Store zu finden ● JavaScript, HTML, CSS ● Zugriff auf Hardware ● Laufen in einem Webbrowser ● Frameworks: ○ PhoneGap/Cordova ○ Canvas 8
  • 10. Fragen an Sie! ● Wann hast Du zum letzten Mal die mobile Webseite einer App und nicht das Pendant ihrer nativen App besucht? ● Hat die Web App länger benötigt zum Laden? ● War es eine angenehme Erfahrung? Was hat Dir daran gefallen? Was hätte besser sein können? 10
  • 11. Was ist eine Progressive Web App? “Progressive Web App (PWA) ist eine Webseite, die ähnlich wie eine native App zu bedienen ist. Sie wird mit HTML, CSS und JavaScript erstellt, sind aber bezüglich Optik und Bedienung einer native App ähnlich, z.B. können sie Offline-fähig und können auf dem Desktop/Homescreen verankert werden.” Quelle: www.it-visions.de 11 Quelle: Sheppard, Dennis: Beginning Progressive Web App Development
  • 13. PWA - Merkmale ● Progressive - Browserunabhängig (Progressive Enhancement) ● Responsive - Automatische Skalierung ● Offline-Funktion ● Sicher - HTTPS ● Kundenbindung - Push-Benachrichtigungen ● Keine Installation - “Add to Home Screen” ● Auffindbar – Suchmaschine ● Verlinkbar - via URL ● App-ähnlich 13 Progressive Web App
  • 14. Workflow App-Distribution ● Native Apps werden über App-Stores ausgeliefert ○ Zentraler Marktplatz auf jeder Plattform ○ Updates müssen manuell eingespielt werden ○ Vorgegebene Qualitätsstandards, eventuell schwieriger Veröffentlichungsprozess ● Progressive Web Apps: Browserview auf dem Homescreen ○ Manifest definiert u.a. Name, Icons, Start URL, … ○ Manuelles “hinzufügen” einer PWA über die jeweilige Webseite ■ “PWA Store” sind Suchmaschinen 14
  • 16. PWA - Technische Bestandteile 16
  • 17. PWA - Service Worker 17 ● Typ von Web Worker ● “Vermittler” - HTTPS ● JavaScript-Code ● Offline Funktionalität ● Hintergrundaktualisierung ● Push Notifications ● Caching
  • 18. PWA - Web App Manifest ● “Add to Home Screen” ● Definiert ○ Icons ○ Name ○ StartURL ○ Farben ○ Bildschirmmodus 18
  • 19. App Shell ● Shells laden sofort bei wiederholten Besuchen ● Dynamischer Inhalt füllt den View 19 Applikations Shell Inhalt Quelle: https://developers.google.com
  • 20. Push API 20 Quelle: https://medium.com ● Teil vom Service Worker ● Implementierung über PushManager ● Anfrage von Berechtigungen ● Läuft im Hintergrund
  • 22. Vorteile von Progressive Web Apps ● Plattformübergreifend ● Einfache Veröffentlichung ● Keine Installation nötig ● Schnell ● Sofortige Updates ● Offline verfügbar ● SEO, da es sich um HTML handelt ● Benutzerfreundlich / “angenehme Bedienung” 22
  • 23. Kritische Bewertung 23 ● Keine vollständige Unterstützung von allen Browsern ● Einige Hardwarefeatures werden (noch) nicht unterstützt (z.B. Fingerprint) ● Einige Berechtigungen können nicht angefragt werden ○ Telefon, Kalender, Kontakte ● Niedrigere Präsenz durch Fehlen in App-Stores ● Fehlende (externe) Qualitätssicherung (z.B. durch App Store)
  • 24. PWA - Zukunft ● Große Unternehmen entwickeln PWA´s ○ Aber auch native Apps parallel ● Mögliches plattformübergreifendes App-Modell der Zukunft ● Apple folgt langsam dem PWA-Trend (ab iOS11) ● Kein vollständiger Ersatz von nativen Apps 24
  • 26. Werkzeuge 26 ● Beliebige WebIDE (Atom, IntelliJ,...) mit JS, HTML und CSS “Kenntnissen” ● Freie Wahl von JS Frameworks und Libraries (React, jQuery, Workbox,...) ● Debugging über Browser (Service Workers, Cache Storage) möglich
  • 27. ebiCAM ● HTML/CSS/JS ● Keine externen Abhängigkeiten ● Caching per serviceWorker ● Zugriff auf Kamera per getUserMedia() ● Speicherung der Aufnahme ● Auf dem Homescreen “ablegbar” Run: https://bit.ly/2sltvBm Src: https://bit.ly/2JlDhx3 27
  • 29. Ihre erste Progressive Web App - “Weather” Was Sie lernen werden ● Wie man eine PWA designed und konstruiert (“app shell method”) ● Wie die App offline funktioniert ● Wie man Daten für den späteren Offlinegebrauch speichert https://goo.gl/ZyX8Yk 29
  • 30. Readings & Viewings ● Google Inc., Web Fundamentals ○ URL: https://developers.google.com/web/fundamentals/codelabs ● Sheppard, Dennis: Beginning Progressive Web App Development ○ ISBN-13: 978-1-4842-3090-9 ● Steiner, Thomas: What is in a Web View? ○ DOI: 10.1145/3184558.3188742 ● How-to: Progressive Web Apps praktisch erklärt ○ URL: https:/https://jaxenter.de/pwa-how-to-progressive-web-apps-67624 30