%Teilweise Erzeugt mit dem LaTeX-Generator: http://latex.sehnot.de

%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}




%Kopfzeile
\ihead{JavaScript}
\chead{}
\ohead{http://kohnlehome.de/html/service-worker-cache.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
\LARGE % Schriftgröße
\bfseries % Fettdruck
\sffamily % Serifenlose Schrift
Cache mit Service Worker
\end{center}


\subsection*{Verzeichnisstruktur}
\begin{small}
\begin{verbatim}
|- index.html
|- service-worker.js
|- css /
|      |- app.css
|- js /
      |- app.js
\end{verbatim}
\end{small}

\subsection*{Service Worker registrieren in app.js}
\begin{small}
\begin{verbatim}
if('serviceWorker' in navigator){
    navigator.serviceWorker
             .register('./service-worker.js')
             .then(function() {
                 console.log('Service Worker wurde registriert');
             });
}else{
    console.log('Browser bietet keine Unterstützung für Service Worker');
}
\end{verbatim}
\end{small}

\subsection*{service-worker.js}
\begin{small}
\begin{verbatim}
// Daten
let cacheName = 'NameDesProjektes';
let filesToCache = [
    './',
    './index.html',
    './css/app.css',
    './js/app.js'
];

// Dateien in Cache speichern
self.addEventListener('install', function(event) {
    console.log('[Service Worker] Installation wird gestartet');
    event.waitUntil(
        caches.open(cacheName).then(function(cache) {
            console.log('[Service Worker] Dateien werden gecachet');
            return cache.addAll(filesToCache);
        })
    );
});

// Dateien vom Cache laden
self.addEventListener('fetch', function(event) {
    console.log('[Service Worker] Angeforderte URL: ', event.request.url);
    event.respondWith(
        caches.match(event.request).then(function(response){
            if(response){
                console.log('[Service Worker] Ressource aus dem Cache geladen: ', event.request.url);
                return response;
            }else{
                console.log('[Service Worker] Ressource aus dem Netzwerk geladen: ', event.request.url);
                return fetch(event.request);
            }
        })
    );
});
\end{verbatim}
\end{small}
\end{document}
