Nico Martin

Web- / Frontend Developer

@nic_o_martin
nicomartin.ch

Say Hello GmbH

@SayHelloGmbH
sayhello.ch

WEB

APP

Web oder App?

"Mobile apps let us complete a task.
Websites give us access to information."

Medium: Designing for the Web vs. Apps in the Mobile Era - Lukas Imrich

Web oder App?

87%

App-Anteil der am Smaprthone verbrachten Zeit.

Web-Anteil: 13%

0

Anzahl der Apps, die 51% der User installieren.

Pro Monat!

78%

der Zeit verbringt ein User in seinen Top 3 Apps

comScore: The 2017 U.S. Mobile App Report

Definition

next gen. Web Apps


Fast

Integrated
Installierbar

Reliable
Offline Nutzung

Engaging
Push Nachrichten


"Progressive Web App"

typeof(is_PWA()) !== "boolean"



Eine Progressive Web App ist eine responsive Webseite,
die Eigenschaften einer klassischen Smartphone-App aufweist.

Technologie

Progressive Web App


Web App Manifest Serviceworker HTTPS

Web App Manifest

<head>
	...
	<link rel="manifest" href="/manifest.json">
</head>
{
    name: "Meine App",
    short_name: "MeineApp",
    start_url: "./",
    description: "Meine erste Progressive Web App",
    theme_color: "#1d1d1b",
    background_color: "#ffffff",
    display: "standalone",
    lang: "",
    orientation: "any",
    icons: [
        {
            src: "/path/to/app-icon-512x512.png",
            type: "image/png",
            sizes: "512x512"
        }
    ],
}

Serviceworker

Serviceworker

HTTPS

Features

The awesomeness of PWA


ResponsiveDiscoverableLinkableSafeInstallable
App-likeConnectivity independentFreshRe-engageableProgressive

Chrome Devs: Your First Progressive Web App

ResponsiveDiscoverableLinkableSafeInstallable
App-likeConnectivity independentFreshRe-engageableProgressive

App-like ( & installable)


Payment Request API, Web Share API, Geolocation API, Web Bluetooth API, ...

ResponsiveDiscoverableLinkableSafeInstallable
App-likeConnectivity independentFreshRe-engageableProgressive


Web


Web

Connectivity independent


Connectivity independent


Connectivity independent


Connectivity independent


ResponsiveDiscoverableLinkableSafeInstallable
App-likeConnectivity independentFreshRe-engageableProgressive
ResponsiveDiscoverableLinkableSafeInstallable
App-likeConnectivity independentFreshRe-engageableProgressive

Push notifications


  • Push API registriert das Gerät (Browser-Genehmigung),
    definiert einen Subscription Endpoint
  • Messaging-Service (firebase) spricht den Endpoint an
  • SW zeigt die Push Nachricht an und interagiert mit ihr

Browser Permission: Wann, Wiso, Wie

ResponsiveDiscoverableLinkableSafeInstallable
App-likeConnectivity independentFreshRe-engageableProgressive

Progressive Enhancement



iOS

Android

Support

  • Browser:
    Google Chrome
    Mozilla Firefox
    Microsoft Edge 17
    Apple Safari 11.1
  • Mobile:
    Android 4.1+, Chrome 40+
    Apple iOS 11.3, Safari 11.1 (teilweise)

Beispiele

twitter lite - mobile.twitter.com

  • Single Page Application (react)
  • < 600KB
  • Geräteunabhängig
  • vollständiger Funktionsumfang

How we built twitter lite | Über Twitter Lite

pinterest - pinterest.ch

  • Single Page Application (react)
  • ~ 1MB (150KB)
  • PWA vs. old Web:
    Time Spent > 5 minutes: +40%
    User-generated Ad $: +44%
    Ad Clickthroughs: +50%
    Core Engagements: +60%
  • PWA vs. native:
    kleine Verbesserungen

A pinterest PWA performance case study

progressive WordPress

  • PWA für Multi Page Applications
  • PWA Features als Add-on
  • PWA für alle

Progressive WordPress (PWA)

Web oder App?

  • Web: Blogs, Corporate Websites, Microsites, Online Shops,
    (E-)Magazine, Social Media, Business Apps, ...
  • APP: Games, Gerätesteuerung, Messenger (?),
    Datenschutzrelevante Apps, ...

Progressive Web Apps sind die langersehnte Ergänzung zu bestehenden
Web-Technologien und bringen Webinhalte zurück in das "open Web".

Vielen Dank!



nic_o_martin

nicomartin.ch

Nico Martin nic_o_martin