Verwenden der Cache-API zum Zwischenspeichern von Webseiten ohne Service-Mitarbeiter

Question

Ich verwende die Cache API und erkunde, wie viel ich damit tun kann, ohne Service-Arbeiter zu verwenden.

Ich habe zwei Hauptanwendungsfälle:

1. Laden zwischengespeichert Vermögenswerte, wenn der Benutzer offline ist
2. die Seite neu geladen wird, wenn der Benutzer offline ist

---

Für den ersten Anwendungsfall Ich kann Bilder unter Verwendung des folgenden Codes zwischenspeichern:

if('caches' in window) { 
    caches.open('my-cache').then(function(cache_obj) { 
    cache_obj.addAll(['/', '/img/first.png', '/img/second.png']) 
     .then(function() { 
     console.log('Cached!'); 
     }); 
    }); 
} 

Wenn ich den Benutzer offline nehmen, dann lade ich das Bild in das DOM programmatisch wie so:

$('body').append('<img src="/img/first.png">'); 

Das Bild auf der Seite angezeigt wird, wie erwartet. Wenn ich first.png aus der Liste der gecachten Bilder entferne und dies dann wiederhole, erscheint das Bild nicht [weil es nicht zwischengespeichert wird]. Die Cache-API funktioniert also sehr gut für den ersten Anwendungsfall.

Allerdings frage ich mich, ob ich das gleiche für den zweiten Anwendungsfall tun kann. Kann ich eine vollständige HTML-Seite offline speichern und dann neu laden, wenn der Benutzer offline ist, ohne jedoch einen Service-Mitarbeiter einrichten zu müssen?

Hinweis: Ich habe eine Art, wie ich etwas sehr ähnlich localstorage/session tun kann, mit dem HTML-Inhalt der Seite cachen und dann intelligent in die aktuelle Seite geladen werden, wenn der Benutzer offline ist [mit offline.js Erkennung ], aber ich suche nach einem einfacheren Ansatz mit der Cache-API.

Answer 1

Dies sollte für Sie arbeiten.

Sie können auch

Der Service-Arbeiter auf die Körper die Eigenschaft navigator.onLine [true/false]

Wenn die Verbindung ist offline wird die Klasse hinzugefügt lesen ist nicht notwendig für diese Aufgabe

// We capture the events online - offline 
// You can also: if (navigator.onLIne) {... } 

window.addEventListener('online', function() { 
    $('body').toggleClass('offline').append('<img src="/img/first.png">'); 
}); 
window.addEventListener('offline', function() { 
    $('body').toggleClass('offline').append('<img src="/img/second.png">'); 
});