PWA: Portable Webanwendungen statt nativer Apps · 9 © Orientation in Objects GmbH PWA: Portable...

Orientation in Objects GmbH

Weinheimer Str. 68

68309 Mannheim

www.oio.de

info@oio.deVersion:

PWA: Portable

Webanwendungen statt

nativer Apps

PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH

Abstract

Mobile First war gestern, Offline First heißt die neue Devise.

Mit diesem Credo kommen Progressive Web Apps (PWA)

nicht nur sehr nahe an native Smartphone-Applikationen

heran, sie erhöhen vor allem die User Experience bei

fehlender oder sehr schlechter Internetverbindung und

müssen nicht mehr über App Stores ausgeliefert werden.

Anhand einer Beispielapplikation werden wir die

Grundkonzepte wie Service Worker, Application Shell,

Caching und Push Notifications diskutieren und einen

Ausblick auf die mobilen Anwendungen der Zukunft werfen.

http://www.braintime.de

OIO Braintime

Ihr Atlassian Platinum Solution Partner

Methoden, Werkzeuge und Lösungen

http://www.oio.de

Ihr Expertenhaus für Softwareentwicklung

mit Java und JavaScript

Schulung, Beratung und Programmierung

Zwei OIO Marken

Ihre Sprecher

Trainer, Berater, Entwickler

Falk Sippach (@sippsack)

Architektur

Agile Softwareentwicklung

CodequalitätCo-Organisator

Commiter DukeCon

Zusammenschluss Trivadis und OIO

• Im Mai diesen Jahres haben sich Trivadis und Orientation in Objects (OIO)

zusammengeschlossen. Gemeinsam stärken und erweitern wir unser Angebot im Bereich

Java und agiler Softwareentwicklung.

Gemeinsam bieten wir ein

zwölfmonatiges Trainee-

Programm an, das Experten

für Java- und

Webtechnologien ausbildet.

Neu finden Sie im Trivadis

Trainingsangebot auch Kurse,

die von der OIO entwickelt und

durchgeführt werden.

PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 6

To APP or to Web?

Open AppStoreFind app in AppStore

Click „Install“

Acceptpermissions

Wait for thedownload…

Start theapp

During each step an average of 20% of the

users are lost

1000 800 640 512 409 327

Installing a native app is painful!

Native Apps

Mobile WebanwendungenTop 500 Mobile Apps vs. Top 500 Mobile Websites

0 2 4 6 8 10 12 14 16 18

Ø Besucher (Millionen/Monat)

App Webseite

0 50 100 150 200

Ø Zeit pro Benutzer (Minuten/Monat)

App Webseite

Quelle: comScore Mobile Metrix, U.S, 2017

Mobile Webanwendungen

Größe App vs. Web

Hybrid Apps

# Webanwendung im Container verpackt (Cordova)

# Unterstützung für verschiedene Plattformen

# Schnittstellen zum Betriebssystem/Ressourcen

# weitere Alternative: Cross-Plattform-Apps

# Generierung von Apps (unterschiedl. Plattformen)

Cordova

Alternative PWA?

#1 Offline-First (keine oder schwache Verbindung)

#2 Progressiv und responsiv

#3 Sicher (https)

#4 Push-Benachrichtigungen

#5 Schnelle Ladezeiten, stets up-to-date

#6 Suchmaschinen-tauglich, verlinkbar

#7 "Installierbar", App-ähnliches Verhalten

1. 75 % mehr Tweets geschickt

2. Absprungrate um 20 % runter

3. Push-Nachrichten bei

geschlossener PWA

Quelle: https://pwa.bar/

Success Story: Twitter

1. Einnahmen von User

Generated Ads um 44 % hoch

2. nur 150 KB groß (Android:

9,6 MB, iOS: 56 MB)

Success Story: Pinterest

1. Ladezeiten von 11,91 auf

4,69 Sekunden

2. 90 % kleiner als die native

Android App

3. Nutzer verweilen länger

Success Story: Tinder

Hello, PWA!

App-Shell

Service Worker

Caching

UX Patterns

Ausblick

PWA – will ich auch!

Hello, PWA!

Progressive

enhancement

vs. Graceful Degradation

# Funktionalität Schritt für Schritt hinzufügen

Erste Schritte zur PWA

#1 bestehende Webseite/-anwendung (HTML/CSS/JS)

#2 HTTPS verwenden

#3 Manifest-JSON hinzufügen

#4 Service Worker hinzufügen

#5 Daten cachen und aus Cache ausliefern

#6 Push-Benachrichtigungen einrichten

Offlinefähig

App-Shell

Application Shell

Quelle: https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures

App Shell Inhalt

Application Shell

# HTML/CSS Grundgerüst

# weitere statische Ressourcen

# wenig Daten, schnell laden

# seitenspezifischen Inhalt asynchron nachladen

# statisch und optional dynamischen Inhalt cachen

Web App Manifest

# JSON (siehe https://w3c.github.io/manifest/)

# Name, Kurzname, Beschreibung der App

# Hintergrund- und Themefarbe

# verschiedengroße Icons (Home-/Splashscreen)

# Sprache, Ausrichtung, Display, Start-URL, …

Web App Manifest{

"short_name": "Hallo",

"name": "Hallo, PWA!",

"icons": [{

"src": "images/icon_128.png",

"sizes": "128x128",

"type": "image/png" }, {

"start_url": "./index.html",

"display": "standalone",

"background_color": "#2196f3",

"theme_color": "#2196f3"

Service Worker

# eine Art Interceptor/Proxy

# Steuerung des Netzwerk-Zugriffs

# Skript, das im Hintergrund läuft (Webworker)

# kein Zugriff auf den DOM

# Kommunikation mit Seite über postMessage

Initialer Seitenaufruf (1/7)

Webseite Webserver

Daten anfordern

Webseite Webserver

Service Workerzurückgeben

Webseite Webserver

Service Worker

Service Worker Installation vorbereiten

Service WorkerWebseite Webserver

Daten anfordern

Datenzurückgeben

Datencachen

Datenzurückgeben

Registrierung

// Service Worker aus JavaScript-Datei registrieren

if ('serviceWorker' in navigator) {

navigator.serviceWorker.register('/serviceWorker.js');

Registrierung

if ('serviceWorker' in navigator) {

window.addEventListener('load', function() {

navigator.serviceWorker.register('/sw.js', {scope: './'})

.then((registration) => {

console.log('Registrierung erfolgreich.')

.catch((error) => {

console.log('Registrierung fehlgeschlagen:' + error);

Online Status

// Änderungen im Netzwerkstatus abonieren

window.addEventListener('online', (event) => { ... });

window.addEventListener('offline', (event) => { ... });

// adhoc-Abfrage ob online

if (navigator.onLine) { ... }

Lebenszyklus

Quelle: https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures

Service Worker Events

self.addEventListener('install', (event) => { ... }); // InstallEvent

self.addEventListener('activate', (event) => { ... }); // ExtendableEvent

self.addEventListener('message', (event) => { ... }); // MessageEvent

self.addEventListener('fetch', (event) => { ... }); // FetchEvent

self.addEventListener('sync', (event) => { ... }); // SyncEvent

self.addEventListener('push', (event) => { ... }); // PushEvent

Nicht unterbrechen!

addEventListener('install', event => {

event.waitUntil(async function() {

// Cache befülllen

const cache = ...

Benachrichtigungen

# Notifications API (Benutzer erteilt Erlaubnis)

# App kann dem User modale Hinweise anzeigen

# Push Notifications über Drittanbieter (Google)

# User stimmt Registrierung auf Drittserver zu

# Backend schickt Nachricht an Drittserver

# Drittserver leitet Nachricht an Service Worker

Caching

Offline Seitenaufruf (1/4)

Daten anfordern

Prüfen, ob Datenbereits im Cache sind

Datenzurückgeben

Daten in den Cache

addEventListener('install', event => {

event.waitUntil(async function() {

const cache = await caches.open('static-v1');

await cache.addAll([

'/', '/about/', '/static/styles.css'

Daten aus dem Cache

addEventListener('fetch', event => {

event.respondWith(

self.caches.match(event.request)

.then((response) => {

if (response) {

return response; // cached response

const fetchRequest = event.request.clone();

return fetch(fetchRequest); // network reponse

Fehlendes nachtragenaddEventListener('fetch', event => {

event.respondWith(

self.caches.match(event.request)

.then((response) => {

if (response) {

return response; // cached response

const fetchRequest = event.request.clone();

return fetch(fetchRequest).then((response) => {

if(!response || response.status !== 200 || response.type !== 'basic') {

return response; // network reponse which should not be cached

const responseToCache = response.clone();

self.caches.open(name)

.then((cache) => cache.put(event.request, responseToCache

return response; // network reponse

Caching Strategien

#1 Network or Cache

#2 Cache only

#3 Cache and update

#4 Cache, update and refresh

#5 Embedded fallback

UX-Patterns

Paradigmenwechsel

PWA-Verhalten != Benutzer-Erwartung

#1 PWAs können mehr, als erwartet

auch offline lauffähigautomatische Updates und BenachrichtigungenWebseiten verhalten sich wie native Apps

#2 PWAs scheinen schlechter zu sein

Daten zeitweise veraltet

UX-Guidelines

#1 User führen und anleiten

#2 Zustände und Unwägbarkeiten sichtbar machen

#3 Background-Ereignisse kommunizieren

#4 Benutzer-Interaktion gewähren lassen

UX-Notifications

#1 Zustand des Service Workers kommunizieren

Offline-Status anzeigen

#2 Allgemeine Meldungen:

Caching komplettSeite gecachedAktion fehlgeschlagen, wird später fortgesetztBenachrichtigungen wurden eingeschaltet

User-Design

#1 Content springt nicht beim Nachladen

#2 Hilfstexte einblenden (Hinzufügen als App, …)

Die Zukunft von PWAs

„By 2020, Progressive Web Apps will have replaced 50% of general-purpose consumerfacing apps.“

– Gartner Research

Alle im Boot?

# Initiator und Vorreiter: Chrome (Google)

# Early Adopter: Firefox

# Lange gewehrt: Apple Safari

# Hinkte etwas hinterher: Edge (jetzt aber auch egal)

Is Service Worker ready?

https://jakearchibald.github.io/isserviceworkerready/

Frameworks und Tools

Workboxsw-precachesw-toolbox

Entwicklung und Debuggen

https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/

PWA-Checkliste

#1 PWA Baseline Checklist#2 Indexability & Social#3 User Experience#4 Performance#5 Caching#6 Push Benachrichtigungen#7 Andere Features

https://developers.google.com/web/progressive-web-apps/checklist

PWAs als Windows-Apps

# First-Class-App-Citizens unter Windows 10

# PWAs im Windows App Store hochladbar

# Suchmaschine trägt PWAs in App Store ein

PWAs bei Apple

# lange dagegen gewehrt

# Unterstützung seit iOS 11.3 (Safari 11.1)

# hält sich aber nicht immer an die Spec

# u. a. noch keine Push Notifications

• https://developers.google.com/web/ilt/pwa/

• https://serviceworke.rs

• https://jakearchibald.com/2016/caching-best-practices/

• https://developers.google.com/web/showcase/

• https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures

• https://developers.google.com/web/tools/lighthouse/

• https://developers.google.com/web/tools/workbox/

• https://github.com/NekR/offline-plugin

• https://www.pwabuilder.com

• https://github.com/pinterest/service-workers

• https://github.com/GoogleChromeLabs

• https://github.com/facebook/create-react-app

• https://www.polymer-project.org/2.0/toolbox/

• https://github.com/vuejs-templates/pwa

• https://cli.angular.io/

Weinheimer Str. 68

68309 Mannheim

www.oio.de

info@oio.de

Fragen ?

Weinheimer Str. 68

68309 Mannheim

www.oio.de

info@oio.de

Vielen Dank für Ihre

Aufmerksamkeit !

Vielen Dank für Euer Feedback!

PWA: Portable Webanwendungen statt nativer Apps · 9 © Orientation in Objects GmbH PWA: Portable...

Documents

Transcript of PWA: Portable Webanwendungen statt nativer Apps · 9 © Orientation in Objects GmbH PWA: Portable...

Sichere Webanwendungen mit OpenSAMM

Gisela Harras Fremdes in der deutschen Wortbildung* · Fremdes in der deutschen Wortbildung* 1. Eigentümlichkeiten nicht-nativer Wortbildungen im Deutschen. Wenn der Titel meines

PHP-Entwickler für Webanwendungencareer.riecken-webservices.at/Riecken_Stelleninserat_A4_final.pdf · PHP-Entwickler für Webanwendungen (w/m) RIECKEN Webservice & Application Dein

Webanwendungen mit Apache HBase entwickeln

Architecture Best Practices für Webanwendungen auf AWS

PWA & Web Performanceurl: '/dist/2.js', revision: '4301192…d3c2cb' }]) （這通常不會動寫 cli 或 webpack 可以幫你出） 再回到 PWA 有項規則是 Ofﬂine Support

Wartbare Javascript-lastige Webanwendungen - W3L · functionNamesLikeThis = Camel-Case ClassNamesLikeThis = Pascal-Case ... Testautomatisierung bei Javascript -lastigen Webanwendungen

Modularitätsbetrachtung von Webanwendungen im Rahmen des ...

Java Server Faces 2.0 - Der Standard für moderne und komponentenbasierte Webanwendungen

Perfekte Kunststoffteile - entegra.de · CAD-Interoperabilität und Vernetzung Nutzen Sie die Werkzeuge zum Importieren und Optimieren nativer CAD-Modelle. Autodesk Simulation Moldflow

HOCHLEISTUNGSWERKSTOFFE FÜR DIE LUFT- UND … · P&W PWA-S-5662 Cl.2, PWA-S-5663 Cl.2 MTU MTS-1424-1*, MTS-1424-3* Goodrich AMS5662* Boeing D1 4426(PC694, PC696)* Waspaloy– –

Moderne Webanwendungen mit HTML5 - tschutschu · Moderne Webanwendungen mit HTML5 Studienarbeit an der Fakultät für Informatik und Mathematik der Hochschule München Studiengang:

Prinergy Evo-Workflow-System - Luzar · PDF filePrinergy Evo-Workflow-System Produktmerkmale: • Durchgängig nativer PDF-Workflow auf der Basis bewährter Prinergy-Technologie •

Sichere Webanwendungen auf BSI Basis v10 · 2020-02-12 · ONR 17700 –Sicherheitstechnische Anforderungen an Webapplikationen • Erste Norm im EU-Raum für die Sicherheit von Webanwendungen

Serverbasierte Webanwendungen für die Hochschulverwaltung

Best Practice: Projektierung der Sicherheitsprüfung von Webanwendungen

Sichere Webanwendungen

Baustein B 5.21 Webanwendungen

Webanwendungen – ASP - Dreamweaver“ · Webanwendungen – ASP - Dreamweaver“ © Mag. Gerhard Buschka – BHAK Wiener Neustadt D:\Daten\HTML\DW\Seminar2\seminar.doc © Mag. Friedrich

Bastian Cramer, Universität Paderborn Entwurfsmuster für Webanwendungen Projektgruppe: Generierung von Webanwendungen aus visuellen Spezifikationen.

PWA & Web Performanceurl: '/dist/2.js', revision: '4301192…d3c2cb' }]) （這通常不會動寫 cli 或 webpack 可以幫你出）再回到 PWA 有項規則是 Ofﬂine Support

HOCHLEISTUNGSWERKSTOFFE FÜR DIE LUFT- UND … · P&W PWA-S-5662 Cl.2, PWA-S-5663 Cl.2 MTU MTS-1424-1, MTS-1424-3 Goodrich AMS5662* Boeing D1 4426(PC694, PC696)* Waspaloy– –