Progressive Web Apps

Click here to load reader

  • date post

    23-Feb-2017
  • Category

    Software

  • view

    202
  • download

    0

Embed Size (px)

Transcript of Progressive Web Apps

  • Progressive Web Apps

    Jonas Moosmann 15. Juni 2016

  • 2

    Jonas Moosmann

    Softwareentwickler (M.Sc.)

    @JonasMoosmann

    MobileWeb .NET

  • Nativ Viele Schritte bis zur Verwendung der App ntig 1,6 Millionen im Play Store [Statista, Juli 2015] 1,5 Millionen im App Store [Statista, Juli 2015]

    Web App direkt nutzbar Funktionsumfang geringer (!?) Bedienbarkeit schlechter

    3

    Mobiles Umfeld: heute

  • 4

    Bestehende Technologien App Cache und Co. sind problembehaftet

    Frameworks limitiert durch Browser

    Proprietre Anstze hoher Aufwand und plattformabhngig

    Lsungen im Web: heute

  • 5

    Progressive Web Apps take advantage of new technologies to bring the best of mobile sites and

    native apps to users.

    Quelle: Google Developers

  • 6

    Service Workers Wieso nicht App Cache? Web App Manifest Push API

    berblick

  • Hintergrundprozess im Browser Aktivitt immer mglich Fungiert als Interceptor Verschiedene Zustnde

    Nur unter HTTPS mglich Verwendung

    Caching Offlinefhigkeit

    7

    Service Workers

  • 8

    Service Workers - Beispiel

  • 9

    Application Cache is a Douchebag.

    Quelle: Jake Archibald - A List Apart

  • 10

    Manifest legt Cache fest wenig flexibel

    keine eigene Logik mglich einige Besonderheiten

    bedient immer aus dem Cache Updates nur bei nderung des Manifests Caching des Manifests mglich (!!!) Untergeordnete Ressourcen mssen referenziert werden

    Wieso nicht einfach App Cache?

  • Zentraler Ort fr Metadaten JSON-Format Lst proprietre Anstze ab Installierbarkeit

    Metadaten, z.B. Name Kurzname Icons

    11

    Web App Manifest

  • 12

    Web App Manifest - Beispiel

  • Push-Nachrichten in Web Apps Ermglicht durch Service Worker

    HTTPS Handling des Push-Events

    Berechtigung ntig Push Service wird bentigt

    Interaktion nicht spezifiziert

    13

    Push API

  • 14

    Push API - Beispiel

  • 15

    Kompatibilitt

    Web App Manifest

    Service Workers

    Push API

  • 16

    Demo

    App zum Empfang von Push-Nachrichten Technologien

    Service Worker Push-API Web App Manifest

    Ausgefhrt unter Android/Chrome

  • 17

    Hinzufgen zum Startbildschirm

    - Adressleiste sichtbar- Shortname aus Manifest- Installieren der Web App

    - Teilweise nicht aus Spezifikation

  • 18

    ffnen der Web App

    - Kein Splashscreen im Manifest- Generierter Splashscreen- Titel aus Manifest

    - Teilweise nicht aus Spezifikation

  • 19

    Darstellung der Web App

    - Ansicht Standalone- Adressleiste nicht sichtbar

    - hnlichkeit zu nativer App

  • 20

    Empfang einer Push-Nachricht

    - Ansicht Lockscreen- Gewhnliche Push-Nachricht

  • 21

    Progressive Web Apps erffnen neue Mglichkeiten Caching (komplexe Strategien) Push-Nachrichten Metainformationen

    Einsetzbarkeit Android ja Windows Phone bald!? iOS nein

    Weitere Spezifikationen notwendig

    Fazit

  • 22

    Chrome & Firefox Bereits einsetzbar

    Edge In Arbeit

    Safari positive Signale 5-year plan

    Weitere Technologien Web Background Sync

    Ausblick

  • Vielen Dank

    Jonas Moosmann

    Softwareentwickler

    inovex GmbH

    Ludwig-Erhard-Allee 6

    76131 Karlsruhe

    [email protected]