# Service Worker und Manifest

# Service Worker

Service Worker sind Javascript basierte Proxies zwischen Browser und Server. Sie bieten unter anderem die Möglichkeit an, auch im Offline Modus Inhalte anzuzeigen und Funktionalität anzubieten. Diese anzuzeigenden Inhalte und bereitzustellende Funktionalitäten gilt es jedoch, bei einem Seitenbesuch im Online Modus zu cachen und im Cache bereitzuhalten.

Um die Service Worker Funktionalität, die sich in der ~/static/sw.js befindet zu registrieren, ist der Registrierungsaufruf via Plugin implementiert. Das Plugin befindet sich, gemäß der von NuxtJS zur automatischen Erfassung vorgegebenen Ordnerstruktur, im /plugins Ordner des hubblecommerce Moduls: ~/modules/hubblecommerce/hubble/core/plugins/register-sw_no_ssr.js. Die Registrierung des Service Workers führt serverseitig zu Fehlern und wird deshalb nur clientseitig ausgeführt. Mehr über die Möglichkeiten und Besonderheiten beim serverseitigen Rendering zu erfahren unter Server Side Rendering (opens new window).

Steht die Service Worker API (opens new window) in dem jeweiligen Browser zur Verfügung, kommt es zur Registrierung:

// ~/modules/hubblecommerce/hubble/core/plugins/register-sw_no_ssr.js
if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/sw.js')
        // ...
    }
}
1
2
3
4
5
6
7

# sw.js

In der ~/static/sw.js existieren die folgenden Event Listener und Callbacks:

install

Bei Aufruf des Callbacks werden dabei die zwei Dateien /offline.html und /launch-icon.svg im Cache gespeichert.

// ~/static/sw.js (simplified)
// ...
self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open(cacheVersion)
            .then((cache) => cache.addAll([
                  '/offline.html',
                  '/launch-icon.svg'
            ]))
    )
});
// ...
1
2
3
4
5
6
7
8
9
10
11
12

fetch

Führt den Request aus oder liefert bei fehlender Netzwerkverbindung die gecachte Seite /offline.html zurück

// ~/static/sw.js (simplified)
// ...
self.addEventListener('fetch', function(event) {
    event.respondWith(
        fetch(event.request)
            .catch(() => caches.match('/offline.html'))
    );
});
// ...
1
2
3
4
5
6
7
8
9

activate

iteriert über alle Cache Einträge und löscht den Cache Eintrag, der dem im install Callback gesetzten Versionswert entspricht (let cacheVersion = 'v1';)

// ~/static/sw.js (simplified)
// ...
self.addEventListener('activate', function(event) {
    event.waitUntil(
        caches.keys()
            .then(function(cacheNames) {
                return Promise.all(
                    cacheNames
                        .filter((cacheName) => cacheName != cacheVersion)
                        .map((cacheName) => caches.delete(cacheName))
                );
        })
    );
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Für die Funktionsweise von Service Workern und einer detaillierten Beschreibung oben verwendeter Events kann die [Service Workers: an Introduction] Dokumentation von Google und der Using Service Workers (opens new window) Abschnitt der MDN web docs (opens new window) referenziert werden.

# Nuxt PWA Modul

Das Nuxt PWA (opens new window) Modul ist in hubble eingebunden, um PWA Funktionalitäten mit geringstmöglichen Aufwand zu ermöglichen. Beispielsweise werden durch das Icon Modul (opens new window) App Icons und Favicon in verschiedenen Größen automatisch erstellt.

Das Modul kann in der ~nuxt.config.js konfiguriert werden. Workbox (opens new window) und Manifest (opens new window) sind in hubble im Default Zustand deaktiviert.

// ~/nuxt.config.js
modules: [
    ['@nuxtjs/pwa', { workbox: false, oneSignal: false }],
]
1
2
3
4

Das Workbox Modul bietet eine einfache Konfigurationsmöglichkeit für den Offline-Support:

// ~/nuxt.config.js
workbox: {
        // Workbox options
        offlinePage: '/offline.html',
        cacheNames: {
            prefix: 'hubble',
            suffix: 'v1',
            precache: 'precache',
            runtime: 'runtime'
        },
        offlineStrategy: 'networkFirst',
        runtimeCaching: [
            {
                urlPattern: 'http:localhost:3340/Unsere-AGB/.*',
                handler: 'staleWhileRevalidate',
                method: 'GET'
            },
            {
                urlPattern: 'http:localhost:3340/Unsere-AGB/.*',
                handler: 'staleWhileRevalidate',
                method: 'GET'
            },
            {
                urlPattern: 'http:localhost:3340/Impressum/.*',
                handler: 'staleWhileRevalidate',
                method: 'GET'
            }
        ]
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# Manifest

Die sogenannte Web App Manifest Datei beinhaltet Informationen zu anzuzeigenden Informationen und Werten: Dazu gehören beispielsweise der Name der "App" oder die Theme Farbe.

Das Nuxt PWA (opens new window) Modul wird via ~/nuxt.config.js konfiguriert. Konfigurationen können im Abschnitt Manifest Module (opens new window) des Moduls nachgelesen werden. Die vollständige Liste über die möglichen Werte unter: Web app manifests (opens new window) MDN web docs (opens new window)

// ~/nuxt.config.js
manifest: {
    name: 'hubble Demo',
    lang: 'de',
    short_name: 'hubble Demo',
    start_url: '/',
    background_color: '#F8F8F8',
    display: 'standalone',
    scope: '/',
    theme_color: '#880E4F',
    gcm_sender_id: '482941778795',
    gcm_sender_id_comment: 'Do not change the GCM Sender ID'
},
1
2
3
4
5
6
7
8
9
10
11
12
13