/ / Wie kann ich meine Single-HTML-Webseite in Chrome offline verfügbar machen? - Javascript, Google-Chrome, Webseite, Offline-Browsing

Wie mache ich meine Single-HTML-Webseite in Chrome offline verfügbar? - Javascript, Google-Chrome, Webseite, Offline-Browsing

Ich hoste eine Single-HTML-Webseite (alles DesignElemente, die in der .html-Datei selbst enthalten sind) auf meinem Webserver und ich möchte sie für meine Nutzer verfügbar machen, wenn sie offline sind. So sollte es funktionieren: Wenn der Nutzer online ist, besucht er meine Webseite, die Chrome speichert Wenn der Benutzer offline ist und versucht, meine Webseite zu besuchen, verwendet Chrome stattdessen die lokale HTML-Datei. JavaScript muss auf der Webseite auch im Offline-Modus funktionieren. Der Benutzer darf niemals eine sehen Du bist offline Fehlermeldung beim Besuch meiner Seite und derDie gespeicherte Kopie meiner Seite darf nicht länger als 2 Wochen aus dem Cache des Browsers entfernt werden. Für den Nutzer muss alles automatisch funktionieren, keine Änderung der Chrome-Einstellungen und keine Installation der Chrome-Erweiterungen erforderlich sein. Ist das möglich?

Das enthaltene JavaScript ist intelligent genug, um es zu verwenden window.localStorage um Daten zu speichern und mit dem Server zu synchronisieren, sobald der Benutzer wieder online ist.

Antworten:

1 für die Antwort № 1

Ich habe das noch nie selbst gemacht, aber Sie können die Cache-API (Teil der Service-Worker-API) verwenden, um URL-adressierbare Ressourcen (wie eine HTML-Datei) zu speichern.

Sie können die HTTP-Header so einstellen, dass sie nach mindestens 2 Wochen ablaufen. Aber wenn jemand seinen Cache leert (wie manchmal beim Löschen seines Browserverlaufs), verschwindet er.

https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa

Hier ist eine Anleitung ---> https://davidwalsh.name/cache


0 für die Antwort № 2

Diese Seite scheint es zu tun: https://chris.bolin.co/offline/. Es funktioniert in Firefox und Chrome. In Chrome scheinen Servicemitarbeiter eingesetzt zu werden. Firefox 55 kann auch Servicemitarbeiter einsetzen.

Servicemitarbeiter können die Cache-API zum Herunterladen von Seiten verwenden. Da die Cache-API die Cookies des Benutzers in Firefox jedoch nicht verwendet, kann sich das, was zwischengespeichert wird, von dem unterscheiden, was der Benutzer sieht.

In Firefox kann der Offline-Modus in Datei / Offline arbeiten aktiviert (erzwungen) werden.

In Chrome kann der Offline-Modus für die aktuelle Registerkarte in den Entwicklertools aktiviert (erzwungen) werden (Strg-Umschalt-Taste).J): Aktivieren Sie auf der Registerkarte Netzwerk die Option Offline.

In Firefox 55 scheint das Offline-Caching standardmäßig zu funktionieren (keine Notwendigkeit für manifest.json). Chrome benötigt Servicemitarbeiter, um die Seite offline verfügbar zu machen.

So erkennen Sie den Offline-Modus in JavaScript:

<script>document.write("navigator.onLine=" + navigator.onLine);</script>