JavaScript und Offline-first Kai Donato MT AG

Transkript

1 JavaScript und Offline-first Kai Donato MT AG

2 Facts & Figures IT-Beratungsunternehmen Branchen übergreifend Hersteller neutral Inhabergeführt 28 Mio. Euro Umsatz Hauptsitz Ratingen Niederlassung Frankfurt am Main Gründung 1994 Ausbildungsbetrieb Duales Studium 250 Beschäftigte Zertifizierter Partner von Oracle Microsoft Micro Strategy Mule

3 Über mich Kai Donato Seit Januar 2014 bei der MT AG in Ratingen Senior Berater APEX Development Themenverantwortlicher HTML5 und JavaScript bei der DOAG Seit über 10 Jahren in der Web-Entwicklung Fachinformatiker für Systemintegration UNIX-Server und 3

4 JavaScript und Offline first!

5 Mobiles Internet Praktisch überall WIFI Apps installiert: 282 Apps, die Online sein müssen: 196 (70%)

6 Welt-im-Modell Störungskarten Mobile Netzabdeckung Vodafone allestörungen.de Computerbild.de Computerbild.de Revell

7 icloud Google Dropbox

8

9

10 So irgendwas dazwischen

11 3G

12 LieFI Jake Archibald

13

14 Historie

15

16 Was haben wir für Möglichkeiten? Papier Native Applikationen für: ios Android Windows Phone (RIP) Windows MacOS Progressive Web Apps mit Offline Fähigkeiten

17 Progressive Web Apps

18 Progressive Web-Apps Funktionieren ausschließlich mit validem SSL-Zertifikat Bilden das Bindeglied zwischen Web- und nativer App Über den Browser lassen sich Anwendungen lokal installieren Auf Handys sogar als Icon auf den Homescreen Ermöglichen native Funktionalitäten des Geräts (z.b. Push-Notifications) Alle Assets, die beim Aufruf einer Website geladen und ge-cached werden

19 Progressive Web-Apps (Manifest)

20 Service Worker

21 Service Worker Lassen sich per JavaScript bei der ersten Verwendung einer Webseite installieren Ermöglichen das Cachen von Assets zur späteren Verwendung (Online und Offline) Verfügen über separate Caches, die er selbst befüllt Erlauben das Ausführen von JavaScript Code, auch wenn der Browser Offline ist

22 Service Worker Apple

23 GET RESPONSE Service Worker GET WRITE READ RESPONSE GET RESPONSE Cache

24 Wie sieht das im Code aus?

25 Service Worker 1. Installation des Service Workers 2. Öffnen des selbst benannten Caches 3. Cachen von Dateien, die via Array definiert wurden

26 Service Worker 1. Fetch-Prozess wird abgefangen 2. Für alle Requests ausser GET -> Pass Thru 3. Prüfen, ob dieser Request bereits gecached wurde 4. Progressive Networking -> Cache und Web-Zugriff (eventually refresh) 5. Die Response des Caches kommt sofort, während der Netzwerkzugriff trotzdem stattfindet 6. Fallback-Lösung, wenn weder der Cache, noch das Netzwerk antwortet

27 Key facts

28 Key facts Service Worker sind leider noch Bleeding Edge!! Wer diese Technologie einsetzt, gibt dem Benutzer etwas on top " Google sind die Vorreiter, aber nicht die Einzigen, die sich in der Entwicklung befinden. Beschleunigt den Seitenaufbau, wenn richtig gecached wird Bisher stehen iphones und ipads außen vor #

29 Demo

30 Nützliches zum Schluss chrome://flags - Umfassende Ressourcen zum Thema Service Worker - webpack-plugin macht eine Anwendung offline-fähig - Best Practices - Fundamentals

31 Vorträge der MT AG Dienstag, Mittwoch, Donnerstag, Freitag, JavaScript Tuning in modernen Web-Applikationen Uhr Foyer Tokio Till Albert Ein Snapshot ist kein Backup 8.00 Uhr Raum Shanghai Angelina Weinschenk Jetlag: Oracle JET und APEX Pimp my igrid Uhr Raum Istanbul Moritz Klein APEX (Hoch)verfügbar? Darf etwas Open Source sein? Besserer Java Code, außerhalb der Automatismen 9.00 Uhr Raum Helsinki Wolfgang Nast Java 9: Endlich Jigsaw! Ihre Datenbank startet nicht? Oder Anatomie des Startup-Prozesses einer Oracle-Datenbank Uhr NCC Ernst Leber Workshop 9.00 Uhr Raum Kopenhagen Oliver Lemm Uhr Raum Seoul Ernst Leber Uhr Raum Budapest Salem Ben Nasr Mit Augenhöhe und Aufmerksamkeit Projekte zum Erfolg führen Uhr Raum Kiew Carsten Firus OWB-ODI Migration: Fallstricke & Lösungen im Praxisbericht Uhr Raum Oslo Jürgen Günter So bringen Sie Ihr DWH Projekt zum Scheitern Uhr Raum Stockholm Irina Gotlibovych Java Script und Offline First Uhr Raum Kopenhagen Kai Donato Wieder verschätzt? Uhr Raum Singapur Oliver Lemm Java Script und PL/SQL das dynamische Duo für APEX Uhr Raum St. Petersburg Moritz Klein APEX open Mic Night JSON in Java mit Schema und JsonPath Uhr Raum Istanbul Niels de Bruijn Uhr Raum Oslo Wolfgang Nast

32 Fragen?! Vielen Dank!

33

34 Kai Donato Telefon: