elefeld I/O
Google I/O Extended Event
Premiere 2018
Fünf Partner
Fünf Themen
Nope.
Nope
.
Nope
.
Nope.
Nope.
Nope
. Platforms
Nope
. Grow & Earn
Nope
. Building on Mobile
Nope
. Beyond Mobile
Platforms: Cloud, Maps, Android, Android Things
Grod & Earn: Google Play, Ads
Building on Mobile: PWA, Firebase,
Beyond Mobile: Watches, Google Assistant, AR/VR
Progressive Web Apps
Nope
.
Heute
Intro 🗣
Setup 🔧
Lunch 🍲
Codelab 🖥
Komödie 🍺
Bitte fragen und bitte diskutieren.
Wozu PWA?
Es gibt doch native Apps?
Vergleich Native App vs. Website
Vorab
Kein Entweder-Oder,nicht einmal pro Projekt oder Kunde
Status quo
Nutzung (mobil): Apps >> Web
Conversion Rate: Apps >> Web
Re-Engagement: Apps >> Web
Apps wirken verlässlicher, sicherer, besser integriert
>> means „perform better than“
Aber…
Entwicklungskosten: Web >> Apps
Distribution: Web >> Apps
Plattform: Web >> Apps
Größe: Web >> Apps
>> means „perform better than“
Was fehlt dem mobilen Web, was native Apps haben?
Geschwindigkeit
Ohne Netz: Fehler
Langsamer, schrittweiser Aufbau
Wiederholtes Laden von Inhalten
Blockieren durch Inhalte
Sicherheit
Teils unverschlüsselte Verbindungen
Viel negative Presse durch Phishing etc.
Eingabe sensibler Daten in Webformulare, Login-Masken
Komfort
Kurse Sessiondauer: Logout
Aufwendige Formulareingaben
Besuchte Seiten über Bookmarks, Verlauf, Erinnerung
Integration
Funktionen, die nativen Apps vorbehalten sind/waren
Beispiele: Geo-Lokalisierung, Kamera, Push Notifications, Payments
Kein sicheres Teilen von Daten mit anderen Apps/Websites
Engagement
„Aus den Reitern, aus der Welt“
Kein direkter Kanal zum Benutzer
Kein Anker auf dem Home-Screen
PWAs sollen alle diese Punkte ausgleichen, aber wie?
Es folgen Aussagen ohne echte Quellenangabe…
„Menschen installieren sich Apps eher selten“
→ PWAs sind Websites, man muss sie nicht installieren, aber man könnte.
„Menschen browsen mobil und kaufen stationär“(Sicherheitsbedenken, Bequemlichkeit,
Übersicht)
→ PWAs sind sicher(er) und besser integriert
https://mobile1st.com/mobile-optimization-7-brutal-reasons-people-arent-buying-on-mobile-and-some-quick-fixes/
viele Gründe, u.a. Sicherheit und schlechte Bedienung
Menschen gehen, wenn es zu lange dauert
→ PWAs sind schnell, gefühlt und tatsächlich
Gartner predicts that by 2020, 50% of general-purpose, consumer-facing mobile apps will be PWAs.
Nope
.
P rogressive ≈ Anpassungsfähig
W eb ≈ Offen, im Browser
A pp ≈ UX, mehr als ein Tab
Frances Berriman
Product manager @ Netlify
(@phae )
Alex Russell
Engineer @ Google
(@slightlylate )
The name isn’t for you […] The name is for your boss, for your investor, for your
marketeer.
… ähnlich wie HTML5
Begriff hilft als Argumentation gegen native Apps.
„Progressive Web Apps are just great web sites that can behave like native apps.“
Edge Developer Blog
„Progressive Web Apps are just great apps, powered by Web technologies and delivered
with Web infrastructure.“
Edge Developer Blog
„Responsive, connectivity-independent, app-like, fresh, safe, discoverable,
re-engageable, installable, linkable web experiences.“
Frances Berriman, Alex Russell
PWAs werden definiert über ihre Eigenschaften.
„It’s just a useful term for a toolkit of features.“
Quote: https://medium.com/samsung-internet-dev/we-now-have-a-community-approved-progressive-web-apps-logo-823f212f57c9
RELIABLE
Work offline and perform well on low-quality networks.
FAST
Load in seconds, with smooth interactions inside the app.
ENGAGING
Immersive app experience with full access to native features.
DISCOVERABLE
Easily discovered through a simple web search.
SMALL
A fraction of the size of a traditional app store app.
FRESH
Always up-to-date with the latest content served instantly.
INSTALLABLE
Allow users to „keep“ apps they find useful on their home screen.
ACCESSIBLE
Run on desktop and mobile, or anywhere you find a browser
F ast
I ntegrated
R eliable
E ngaging
S ecure
Technologien
F ast
→
App Shell, Cache
I ntegrated
→
Web App Manifest, Web APIs
R eliable
→
Service Worker, Web Platform
E ngaging
→
Push-Notifications, Home-Screen
S ecure
→
https, Specs
https://medium.com/samsung-internet-dev/6-myths-of-progressive-web-apps-81e28ca9d2b1
Blick auf die Kerntechnologien
Service Worker
Geschwindigkeit, Offline-Fähigkeit, Push Notifications
Service worker is a programmable network proxy, allowing you to control how network
requests from your page are handled.
https://developers.google.com/web/fundamentals/primers/service-workers/
Skript, das im Browser installiert wird
Nur verfügbar bei sicherer Quelle (https, localhost)
Bekommt alle Requests im Scope
Verwaltet Cache und Netzwerkanfragen
Web App Manifest
Integration, Installierbarkeit, App-Gefühl
Einfache JSON-Datei
Enthält Metadaten zu Titel, Icons, Verhalten etc.
Vergleichbar mit Konfiguration nativer Apps
Einbindung:
Push notifications
Kanal zum Benutzer
Benutzer wird für Push Notifications registriert
Nachricht wird an SW geleitet
Anzeige der Message über Web API
Klick wird ebenfalls im SW verarbeitet
Web Platform
Verbreitung, Stabilität, Offenheit
Zugriff über URL im Browser
Kein Bedarf eines App Stores
Verteilt und aktualisiert über „Web Distribution Model“
Zurück zum
Vergleich Web vs. Nativ
PWA 👍🏼
Works „everywhere“
Develop once for all platforms
Usually cheaper than native apps
Usually much smaller than native apps
Standard compliant and open
Time is working for PWA (more and more features become available)
No updates necessary
Entry barrier much lower than native apps
Installation is optional
PWA 👎🏼
Some features still missing, especially on iOS
What the web can’t do, a PWA can’t do
Platform integration still limited
Re-Engaging of users still limited
Requires experienced web developers
No official SDK available as for native apps
Performance-critical apps (games) still hard to do
Installation is optional (see advantages)
ℹ️
PWAs laufen „überall“ (P)
PWAs sind Websites (W)
PWAs haben Eigenschaften nativer Apps (A)
ℹ️
PWA steht für Menge von Eigenschaften
Eigenschaften werden erfüllt durch Technologien
Technologien werden vom Browser bereitgestellt
The UX of apps + the reach of the Web = The Future
Bruce Lawson, Ex-Opera
Bei PWAs geht es nur um Mobilgeräte.
❌
PWA ist nur ein Name ohne eigenen Wert
❌
Browser- und OS-Hersteller implementieren spezielle Browser-Funktionen für PWAs
(„Mini-App-Store“)
PWAs landen in den App Stores
Bei PWAs geht es nur um Offline-Benutzung
❌
Offline first" is somewhat confusing since many don't think they need offline. But *everyone*
needs reliability. It's about reliability.
https://twitter.com/HenrikJoreteg/status/909632750453321734
https://infrequently.org/2016/05/service-workers-and-pwas-its-about-reliable-performance-not-offline/
Alles oder nichts / Ganz oder gar nicht
❌
Progressive
Jedes Feature zählt
Lighthouse Reports
PWA können noch nicht verwendet werden
❌
Current status
Cross-Browser
Debugging
Politisch
29. März 2018
30. April 2018
Firefox status: In Development
DX (Developer experience)
Offline mode
Force updates
Break on fetch
Status information
Manage Cache/Storage
Trigger push notification
Manifest information
Automatische Bewertung des „PWA-Grads“
Ressourcen
Videos
Codelabs
Bücher
Artikel
…
Was sagen die Browser-/OS-Hersteller?
Microsoft
😀
We’ve announced before in several venues that we’re all-in on PWAs.
https://blogs.windows.com/msedgedev/2018/02/06/welcoming-progressive-web-apps-edge-windows-10/
Google
😀
Progressive Web Apps are experiences that combine the best of the web and the best of apps.
„Google has announced that beginning mid-2018, Chrome Apps will be also
PWAs“
https://events.withgoogle.com/pwa-roadshow-munich/
Mozilla
😀
The web is the largest software platform ever […] The more it can do, the better off
we’ll be.
https://blog.mozilla.org/firefox/progressive-web-apps-whats-big-deal/?utm_content=buffera1ff8&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer
Samsung
😀
Let’s keep on working together on the building blocks of PWAs.
Officially unofficial PWA logo by Diego González-Zúñiga, Web Advocate at Samsung
Internet.
https://medium.com/samsung-internet-dev/we-now-have-a-community-approved-progressive-web-apps-logo-823f212f57c9
Opera
😀
Progressive Web Apps Are the Future
https://dev.opera.com/blog/progressive-web-apps-future/
Mehr PWA
https://pwa.rocks/
https://www.pwastats.com/
https://pwa-directory.appspot.com/
https://www.progressivewebapproom.com/
https://developers.google.com/web/showcase/
Mini-Apps / Tool
Brutto-Netto-Rechner
ToDo inkl. Cache
Fußball-Tabelle
etc.
E-Commerce
App Shell Katalog
Caching der Produkte im Warenkorb
Payment Request API
Personalisiertes Precaching
Jede Website bzw. Teile davon
Background-Sync von Inhalten
Seitenbereich pre-cachen
Startseite „instant“ laden
Priorisieren und Schritt-für-Schritt umsetzen (📺 )
Mini-App / Tool – Getting started.
💡
Planung
Design
Entwicklung
Domain (z. B. .app
TLD)
Hosting (z. B. Netlify)
With Google’s increasing push to wider implementation of Progressive Web Apps and the
challenges facing native apps, we can see that business use of
PWAs will become more and more popular .
Komplexität nicht unterschätzen
Überarbeitung bestehender Websites
PWA wirken auf UX/UI/QA/etc.
Progressive = keine Garantien
Noch immer eher unbekannt
siehe „PWA 👎🏼“ oben
Es gilt: auch eine PWA will wohlüberlegt sein.
Was wird gebaut
Ein Klassiker: die ToDo Wetter-App ☀️🌤🌧
Codelab:Debugging Service Worker
DevTools of choice: Google Chrome (Canary)
Codelab:Push Notifications
⚠️ Nobody really wants Push Notifications… so use them wisely.
Service worker is a programmable network proxy, allowing you to control how network
requests from your page are handled.
https://developers.google.com/web/fundamentals/primers/service-workers/
Nur verfügbar bei sicherer Quelle (https, localhost)
Skript, das geladen und im Browser installiert wird
Bekommt alle Requests im Scope
Asynchron, event-driven
Ohne Service Worker
Going Offline by Jeremy Keith (📙 )
Mit „pass through“ Service Worker
Going Offline by Jeremy Keith (📙 )
Service Worker mit Cache
Going Offline by Jeremy Keith (📙 )
Lifecycle
Registration
Installation
Activation
In Page:
navigator.serviceWorker.register('/sw.js');
In Page:
navigator.serviceWorker.register('/sw.js').then(function() {
console.log('✅');
}, function() {
console.log('❌');
});
Lifecycle events
install (pre-caching)
activate (clean old caches)
In service worker:
self.addEventListener('install', function(e) {
// Do something, e.g. good place to precache files
});
self.addEventListener('activate', function(e) {
// Do something, e.g. good place to cleanup cache
});
Scope
Default: Ort des Scripts (z.B. Root)
Kann explizit angegeben werden
Scope geht nicht „nach oben“
Unterschiedliche Service Worker pro Seite möglich
Bei Konflikt: der längste Pfad gewinnt (der „spezifischste“ Pfad)
navigator.serviceWorker.register('/sw.js', {
scope: '/path-under-sw-control/'
});
Cache ist im Service Worker verfügbar
Cache wird nie automatisch gelöscht
Kritisch bei Update des Service Workers
Sinnvoll, den Cache im Namen zu versionieren
Polyfills vorhanden
In service worker:
self.addEventListener('install', function(e) {
e.waitUntil(
caches.open('v1-assets').then(function(cache) {
return cache.addAll([
'/',
'/index.html',
'/some.png'
]);
})
);
});
In service worker:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
„Eventually fresh“ Pattern
Immer gecachte Ressourcen zurückliefern
Gleichzeitig aber probieren, diese zu aktualisieren
„Immer einen hinterher“
Nachrichten an SW senden
Nützlich z.B. bei „Artikel offline verfügbar machen“ (dynamischer Cache)
navigator.serviceWorker.controller.postMessage("…");
https://googlechrome.github.io/samples/service-worker/post-message/
Push messages
Offline mode
Status information
Cache/Storage
Promises, Fetch API und Cache API
Technische Basis für Service Worker
Beispiel-Properties
name
und short_name
background_color
und theme_color
display
categories
prefer_related_applications
und related_applications
Browser-Support
Nicht alle Properties werden unterstützt
Beispiel: Icons bei iOS per meta
-Element
Exkurs: Payment Request API
Keynotes
19:00 Uhr – Google Keynote
21:45 Uhr – Developer Keynote
Ansonsten
Free Food
Cheap drinks
Much talk
☀️
Öffnen sich Links in der installierten PWA oder im Browser?
Android: Android Intent Filters
iOS: aktuell wohl nicht möglich, Schlagworte „Custom URL
Schemes“, „Custom Meta Tags“, „Bundle Identifier“
Nope.
Progressive Web Apps
Autor: Wolfram Twelker
Fragen aus Workshop