Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Service Worker PWA offline Nutzung
#1
Guten Tag,

Ich habe ein kleines Problem mit einer PWA. Ich habe mich mit Service-Workern beschäftigt und  ein wenig mit PWAs rumgespielt.
Ich würde gerne, dass meine PWA offline verfügbar ist. Ich habe auch im Service Worker den install und fetch Befehl definiert, jedoch wenn ich die App dann installiert habe und geöffnet und wieder komplett geschlossen habe und sogar den Web-Server herunterfahre und mein Internet auf dem Handy ausmache, startet die App. Wenn ich sie jedoch nach einer Stunde erneut öffne stürzt sie ab, weil die URL nicht gefunden werden kann. Habe ich etwas vergessen im Code? Oder gibt es eine Einstellung dafür?
Ich habe auch beim Debuggen mit Google Chrome keine Fehler feststellen können.
Ich bin was Service Worker angeht noch ziemlich unerfahren...
Über eine Antwort würde ich mich sehr freuen!

Code der Klasse mit dem Service Worker(SW.js):

[font=Consolas, "Courier New", monospace]const cacheName = './';
const contentToCache = [
'index.html',
'Speichern.html',
'Hochladen.html',
'Routing.js',
'manifest.json',
'LocalStorageService.js'
];


self.addEventListener('install', (e) => {
  console.log('[Service Worker] Install');
  e.waitUntil((async () => {
    const cache = await caches.open(cacheName);
    console.log('[Service Worker] Caching all: app shell and content');
    await cache.addAll(contentToCache);
  })());
});

self.addEventListener('fetch', (e) => {
  console.log([Service Worker] Fetched resource [/color][color=#569cd6]${[/color][color=#9cdcfe]e[/color][color=#d4d4d4].[/color][color=#9cdcfe]request[/color][color=#d4d4d4].[/color][color=#9cdcfe]url[/color][color=#569cd6]}[/color][color=#ce9178]);
  e.respondWith((async () => {
    const r = await caches.match(e.request);
    console.log([Service Worker] Fetching resource: [/color][color=#569cd6]${[/color][color=#9cdcfe]e[/color][color=#d4d4d4].[/color][color=#9cdcfe]request[/color][color=#d4d4d4].[/color][color=#9cdcfe]url[/color][color=#569cd6]}[/color][color=#ce9178]);
    if (r) { return r; }
    const response = await fetch(e.request);
    const cache = await caches.open(cacheName);
    console.log([Service Worker] Caching new resource: [/color][color=#569cd6]${[/color][color=#9cdcfe]e[/color][color=#d4d4d4].[/color][color=#9cdcfe]request[/color][color=#d4d4d4].[/color][color=#9cdcfe]url[/color][color=#569cd6]}[/color][color=#ce9178]);
    cache.put(e.request, response.clone());
    return response;
  })());
});
[/font]


Ausschnitt der index.html, wo der Service Worker registriert wird:

[font=Consolas, "Courier New", monospace]<script src="SW.js"></script>
   <script>
    if ("serviceWorker" in navigator) {
     window.addEventListener('load', function() {
      navigator.serviceWorker.register( "./SW.js").then(
       function(erfolg) {
        console.log( "ServiceWorker wurde registriert.", erfolg);
       }
      ).catch(
       function(fehler) {
        console.log( "ServiceWorker wurde leider nicht registriert.", fehler);
       }
      );
     });
    }
    </script>[/font]



Die App hat natürlich auch eine manifest.json, sodass sie auch wirklich als App erkannt wird.


Vielen Dank im voraus!

Liebe Grüße
Zitieren
#2
Bei dir geht das Installieren?
Habe die Tage gerade damit angefangen damit herumzuspielen und es zu lernen.
Ich bekomme es einfach nicht hin das die Anwendung sich nicht Installieren lässt.

Ich habe versucht das nachzubauen https://app-shortcuts.glitch.me/

Erst mit meinen Links usw. , und nachdem es nicht ging habe ich versucht das 1 zu 1 zu kopieren.
Das klappt irgendwie nicht.
Hast du da nee Idee?

Werde mich morgen mal dann setzen mein Problem zu lösen und dir hierbei zu helfen. Muss nur rausfinden was bei mir noch falsch läuft
Zitieren


[-]
Schnellantwort
Nachricht
Geben Sie hier Ihre Antwort zum Beitrag ein.

 

Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste