@mittlmedien

Progressive Web App (PWA), was geht in 2020 🤔? 

info@mittl-medien.de

Über mich 

  • Robert Mittl
  • Web Entwickler
  • PHP, JavaScript
  • Progressive Web App (PWA)
  • CMS Joomla

📱Geschichte

  • Vorstellung iPhone 2007
  • Steve Jobs - browserbasierte Web-Apps
  • Entwickler programmierten native Apps
  • 2008 Eröffnung App Store

mobile Web 📈

  • es gibt immer mehr Apps
  • Datenschutz (Spyware, Tracking)
  • App Installations-Trägheit
  • muss es denn immer eine App sein?

 Web == PWA

Vorzüge einer Progressive Web App nutzen🤗

Web App - Webseite - Server

Was ist eine PWA 📱 technisch gesehen:

Service Worker

Benutzer / Endgerät

Browser

📱 Progressive Web App

  • läuft im Web Browser
  • kann an jede Webseite angebunden werden
  • kann - muss nicht installiert werden
  • wird über Suchmaschinen gefunden
  • Datenschutz (z.B. Facebook)
  • erhöht die Conversion Rate, Verweildauer

Wer kann eine PWA installieren?

81% weltweit

davon sind 91% im mobilen Bereich 📱

und 69% über Desktop Browser 🖥

Wo kann eine PWA installiert werden:

  • Linux
  • Windows
  • Android (alle Browser)
  • iOs (add to Homescreen)

 

Klarer Vorteil, da nahezu betriebssystemunabhängig.

Service Worker Lifecylcle 🔄

-> Register

-> Download

-> Installation

-> Wait

-> Activate

Updates

  • mit jeder Änderung des Service Workers
  • oder setzen eines Intervalls
navigator.serviceWorker.register("serviceworker.js")
  .then( (registration) => {
    setInterval( () => registration.update(), 86400 );
  });

Cache Strategie

  • Static Files

  • Network First

  • Offline First

  • Network Speed

Network

if (navigator.connection.downlinkMax > 50) { // schnelle Verbindung
      
}

von Chrome unterstützt - kein Safari

Persistant Storage 💿

if (navigator.storage && navigator.storage.persist)
  navigator.storage.persist().then(function(persistent) {
    if (persistent)
      console.log("Storage will not be cleared except by explicit user action");
    else
      console.log("Storage may be cleared by the UA under storage pressure.");
  });

App Strategie

  • Batterie (navigator.battery)
  • Cache (navigator. connection)
  • Performance (PerformanceObserver)

Service Worker Möglichkeiten

  • schneller Seitenaufbau 🚀 - volle Kontrolle über den Cache und Request
  • Eingabeformulare oder Bestellungen "Offline" verschicken (Shop, CMS System)
  • Auslieferung der WebP Images, falls Browser-Support

Offline Datenspeicher

Austausch der Daten über Background Sync mit Fallback (Online / Offline)

  • IndexedDB (Browser)
  • PouchDB
  • LocalForage

 

Push Nachrichten

Android, Windows, MacOsx

👍

Zustände des Browsers:

Foreground

Background

Push Nachrichten

auf iOs 13.2?

👎

Gemeinde News App

Push Dienste

  • Firebase
  • Cleverpush
  • One Signal

Web Share

API

 

(Web Share Target API)

 

Web Share API

if (navigator.share) {
  navigator.share({
  title: document.title,
  text: 'Hello World',
  url: 'https://2019.stuttgart.wordcamp.org/',
});
  })
  .then(() => {
    // do something on success
  })
  .catch(err => {
    // do something on error
  });
}

PWA App - Lifecycle 🔄

App lädt

App geht in den Hintergrund {visibilitychange}

App wird beendet {freeze}

App wird erneut aufgerufen {resume}

{visibilitychange)

 

Man kann in die einzelnen Phasen {Events} eingreifen!

 

 

Lifecycle in iOs

  • 12.x 😟

  • 13.x 🙂

Manifest

<link rel="manifest" href="/manifest.json">


{
    "lang": "de",
    "name": "Joomla",
    "short_name": "Joomla",
    "description": "Meine WordPress PWA",
    "theme_color": "#99ccff",
    "background_color": "#99ccff",
    "display": "standalone",
    "Scope": "/",
    "start_url": "/",
    "icons": [
        {
            "src": "images/icons/icon-72x72.png",
            "sizes": "72x72",
            "type": "image/png"
        },
        {

Manifest

add to Homescreen

eigener Install Button


installButton.addEventListener('click', e => {
    installPrompt.prompt()
})
let installPrompt
window.addEventListener('beforeinstallprompt', e => {
    e.preventDefault()
    installPrompt = e;
})

Desktop Apps

Manifest Shortcuts

{
  "name": "PlayerFM",
  "start_url": "https://app.playerfm.com",
  …
  "shortcuts": [
    {
      "name": "Play Later",
      "description": "View the list of podcasts you saved for later",
      "url": "/play-later",
      "icons": [
        {
          "src": "/icons/play-later.svg",
          "type": "image/svg+xml",
          "purpose": "any"
        }
      ]
    },
    {
      "name": "Subscriptions",
      "description": "View the list of podcasts you listen to",
      "url": "/subscriptions",

Authentifizierung

 

Einfache Anmeldung mit Google, Facebook oder iCloud Konto (OAuth, Auth0)

 

Payment API 💳

 

Einfaches bezahlen mit einmal hinterlegten Informationen

(Apple Pay, Google Pay)

 

 Message 💬 Event

Kommunikation zwischen Client und Service Worker

 


self.addEventListener('message', messageEvent => {
  if (messageEvent.data === 'clean up caches') {
    trimCacheAsync(imageCacheName, 50)
    trimCacheAsync(pagesCacheName, 30)
  }
})
navigator.serviceWorker.controller.postMessage('clean up caches')

Registrierung

Service Worker

  Message 💬 Event

Kommunikation zwischen Service Worker und Client

 

const respondTo = async ({ req, clientId }) => {
  
    const client = await self.clients.get(clientId);
    client.postMessage("Hallo Wordcamp Stuttgart");
  }
  return caches.match(req);
};
navigator.serviceWorker.addEventListener("message", (evt) => {
  window.alert(evt.data);
});

Browser / App

Serviceworker

📱PWA - native Features

  • Geolocation
  • Push Nachrichten
  • Status Offline / Online
  • Background Sync
  • Zugriff auf Bilder
  • Teilen / Sharing
  • Zugriff auf Dateien
  • Payment Api
  • und vieles mehr...

Diese Features beruhen auf der Web Api!

WebAPK

  • PWA ->  wird bei der Installation zur native Android App
  • viele Android App sind als PWA ersetzbar

App veröffentlichen  

🛠 Tools

(App Store,   Google Play Store)

  • PWA Builder (Microsoft)

  • Apple Configurator 2

  • App Launcher Android - PWA Certified Url

App Store   

Google Play Store 👆

  • Guidelines müssen beachtet werden
  • nicht jede App kann in den Store

 

Trend geht zur PWA 📈

Unternehmen bieten eine Native App und zugleich eine PWA an:

  • Google Maps, Pinterest, Twitter, Airbnb, Tinder
  • Uber (Desktop First)

 

Shopsystem:

  • Shopware
  • Magento

 

Unternehmen ersetzen bereits native Apps

 

wie  z.B. "1-800 Flowers" - Blumenshop in US

Gründe:

  • einfachere Pflege
  • keine Updates für den App Store
  • "nur" einfacher Tausch der Daten auf dem Server

Feedback Assistant von Apple als PWA

Möglichkeiten / Beispiele einer PWA

  • Konferenz App - Programm App
  • Fitness App
  • News App
  • Monteure Windräder
  • Dokumentationen
  • weitere Beispiele unter pwa.rocks oder Appscope

Links:

Google Workbox

Google PWA Training:

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

 

Bücher:

Jeremy Keith. “Going Offline”

Dean Alan Hume "Progressive Web Apps"

Tal Ater "Building Progressive Web Apps"

 

 

Gibt es dafür ein Plugin?

  

 

 

 

 

 

Fragen?  🧐

info@mittl-medien.de

@mittlmedien

Danke  😅

info@mittl-medien.de

@mittlmedien

Progressive Web App (PWA), was geht in 2020?

By Robert Mittl

Made with Slides.com

Progressive Web App (PWA), was geht in 2020?

  • 1,050

More from Robert Mittl