elefeld I/O

• Google I/O Extended Event
• Premiere 2018
• Fünf Partner
• Fünf Themen

Progressive Web Apps

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

Wozu PWA?

PWAs sollen alle
diese Punkte ausgleichen,
aber wie?

„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

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.

Was ist eine PWA?

• Progressive ≈ Anpassungsfähig
• Web ≈ Offen, im Browser
• App ≈ UX, mehr als ein Tab

The name isn’t for you […] The name is for your boss, for your investor, for your marketeer.

… ähnlich wie HTML5

Definition

„Progressive Web Apps are just great web sites that can behave like native apps.“

„Progressive Web Apps are just great apps, powered by Web technologies and delivered with Web infrastructure.“

„Responsive, connectivity-independent, app-like, fresh, safe, discoverable, re-engageable, installable, linkable web experiences.“

PWAs werden definiert
über ihre Eigenschaften.

„It’s just a useful term for a toolkit of features.“

Eigenschaften

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

Acronymified™

• Fast
• Integrated
• Reliable
• Engaging
• Secure

Technologien

Blick auf die
Kerntechnologien

https

Let's encrypt → ✅

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.

• 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)

Zusammengefasst…

ℹ️

• 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

Exkurs: Myth busting…

Bei PWAs geht es nur um Mobilgeräte.

❌

PWA ist nur ein Name ohne eigenen Wert

❌

Bei PWAs geht es nur um
Offline-Benutzung

❌

Alles oder nichts /
Ganz oder gar nicht

❌

PWA können noch nicht verwendet werden

❌

Sie können…

Current status

• Cross-Browser
• Debugging
• Politisch

Service Worker

29. März 2018

30. April 2018

Can I Use serviceworkers? Data on support for the serviceworkers feature across the major browsers from caniuse.com.

Web App Manifest

Can I Use web-app-manifest? Data on support for the web-app-manifest feature across the major browsers from caniuse.com.

Firefox status: In Development

Einzelne Features

• https://caniuse.com/
• https://whatwebcando.today/
• Platform-Status-Pages der Browser

DX (Developer experience)

Dev Tools in Chrome

• Offline mode
• Force updates
• Break on fetch
• Status information
• Manage Cache/Storage
• Trigger push notification
• Manifest information

Prüfen einer Checklist

Lighthouse

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.

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“

Mozilla

😀

The web is the largest software platform ever […] The more it can do, the better off we’ll be.

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.

Opera

😀

Progressive Web Apps
Are the Future

Apple

😏

PWA-Beispiele

Twitter

• 65% increase in pages per session
• 75% increase in Tweets sent
• 20% decrease in bounce rate

Forbes

Trivago

Wikipedia

Expenses

Mehr PWA

• https://pwa.rocks/
• https://www.pwastats.com/
• https://pwa-directory.appspot.com/
• https://www.progressivewebapproom.com/
• https://developers.google.com/web/showcase/

Anwendungen

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.

Things to consider…

• 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.

Frameworks

Polymer, React, Vue,
Angular, Ionic, PWA-Builder…

Not today…

Tools

• Workbox
• sw-precache
• sw-toolbox
• webpack
• etc.

Not today…

Mehr Infos!

• Google I/O Sessions (📺)
• Build 2018 Sessions (📺)
• Going Offline (📖)
• Progressive Web Apps (📖)
• Codelabs (💪🏼)

Mehr Infos!

• Kickstarting Your Journey to Progressive Web Apps (📺)
• Core PWA guides (📖)
• Progressive Web Apps Training (📖)
• Progressive Web App Libraries in Production (📖)

Slides

pwa.bielefeld.io

What's next?

• Codelabs-Setup 🔧
• Lunch 🍲

Codelab:
Your First PWA

Was wird gebaut

• Ein Klassiker:
  die ToDo Wetter-App ☀️🌤🌧

https://codelabs.developers.google.com /codelabs/your-first-pwapp/

Codelab:
Debugging Service Worker

DevTools of choice:
Google Chrome (Canary)

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

Codelab:
Push Notifications

⚠️ Nobody really wants Push Notifications… so use them wisely.

https://codelabs.developers.google.com /codelabs/push-notifications/

Exkurs: Service Worker

Service worker is a programmable network proxy, allowing you to control how network requests from your page are handled.

• Nur verfügbar bei sicherer Quelle (https, localhost)
• Skript, das geladen und im Browser installiert wird
• Bekommt alle Requests im Scope
• Asynchron, event-driven

Arbeitsweise

Ohne Service Worker

Mit „pass through“ Service Worker

Service Worker mit Cache

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)

More events (functional)

• message
• fetch
• push
• sync

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

• 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("…");

Debugging

• Push messages
• Offline mode
• Status information
• Cache/Storage

Promises, Fetch API
und Cache API

Technische Basis für Service Worker

• https://serviceworke.rs/ by Mozilla
• Primer
• Free Udacity Course „Offline Web Applications“
• Serviceworker for Offline
• Introduction to Service Workers

Exkurs: manifest.json

Aufbau manifest.json

JSON Schema Store

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

Exkurs: Lighthouse

Heute Abend

Komödie – ab 17 Uhr

Keynotes

• 19:00 Uhr – Google Keynote
• 21:45 Uhr – Developer Keynote

Ansonsten

• Free Food
• Cheap drinks
• Much talk
• ☀️

Fragen aus Workshop

Ö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“

Kann man im Service Worker Netzwerkanfragen priorisieren?

Diskussion

Priority Hints

Wann wir ein Service Worker aktualisiert?

Updating the service worker