offline

Dieses Projekt wird nicht aktiv gepflegt.

Offline

Hinweis für Benutzer vor 0.6.0: Offline verwendete zuvor eine in der Cloud gehostete Datei als eine ihrer Methoden zur Erkennung des Verbindungsstatus. Diese Methode ist jetzt veraltet und das Bild wurde entfernt. Bitte aktualisieren Sie auf Offline 0.7.0+.

Verbessern Sie das Erlebnis Ihrer App, wenn Ihre Benutzer die Verbindung verlieren.

• Überwacht Ajax-Anfragen auf Fehler

• Bestätigt den Verbindungsstatus durch Anfordern eines Bildes oder einer gefälschten Ressource

• Erfasst automatisch Ajax-Anfragen, die gestellt werden, während die Verbindung unterbrochen ist, und stellt sie erneut her, nachdem die Verbindung wiederhergestellt wurde.

• Einfache Benutzeroberfläche mit schönen Themen

• 3 KB minimiert und komprimiert

Installation

Fügen Sie Javascript, eines der Themen und eine der Sprachen auf Ihrer Website ein. Du bist fertig!

Um nur die JavaScript-API ohne UI-Indikator zu verwenden, lassen Sie einfach die CSS-Datei weg.

Wenn Sie einen Blick darauf werfen möchten, wie es auf Ihrer Website aussieht, trennen Sie Ihre Internetverbindung oder probieren Sie den Simulator aus.

Fortschrittlich

Optional können Sie einige Konfigurationen bereitstellen, indem Sie Offline.options festlegen, nachdem Sie das Skript eingefügt haben.

Optionen (alle können als Funktion bereitgestellt werden) mit ihren Standardwerten:

 { // Sollten wir den Verbindungsstatus sofort beim Laden der Seite überprüfen?  checkOnLoad: false, // Sollten wir AJAX-Anfragen überwachen, um zu entscheiden, ob eine Verbindung besteht?  interceptRequests: true, // Sollten wir regelmäßig automatisch erneut testen, wenn die Verbindung unterbrochen ist (zum Deaktivieren auf false setzen).  reconnect: { // Wie viele Sekunden sollten wir warten, bevor wir es erneut überprüfen.    initialDelay: 3, // Wie lange sollten wir zwischen den Wiederholungsversuchen warten.    Verzögerung: (1,5 * letzte Verzögerung, begrenzt auf 1 Stunde) }, // Sollten wir Anfragen speichern und versuchen, sie erneut zu stellen, die fehlschlagen, während die Verbindung unterbrochen ist?  Anfragen: true, // Sollten wir ein Schlangenspiel zeigen, während die Verbindung unterbrochen ist, um den Benutzer zu unterhalten?  // Es ist nicht im normalen Build enthalten, Sie sollten zusätzlich zu // offline.min.js js/snake.js einbinden.  Spiel: falsch}

Eigenschaften

Offline.check() : Überprüfen Sie den aktuellen Status der Verbindung.

Offline.state : Der aktuelle Status der Verbindung „up“ oder „down“

Offline.on(event, handler, context) : Binden Sie ein Ereignis. Veranstaltungen:

• up: Die Verbindung ist von unten nach oben gegangen

• down: Die Verbindung ist von oben nach unten gegangen

• bestätigt: Ein Verbindungstest war erfolgreich und wurde auch dann ausgelöst, wenn die Verbindung bereits bestand

• bestätigter Ausfall: Ein Verbindungstest ist fehlgeschlagen und wird auch dann ausgelöst, wenn die Verbindung bereits unterbrochen war

• prüfen: Wir testen die Verbindung

• reconnect:started: Wir beginnen mit dem Reconnect-Prozess

• reconnect:stopped: Der Versuch, die Verbindung wiederherzustellen, ist abgeschlossen

• reconnect:tick: Wird jede Sekunde während eines Wiederherstellungsversuchs ausgelöst, wenn keine Überprüfung stattfindet

• reconnect:connecting: Wir verbinden uns jetzt wieder

• reconnect:failure: Der Versuch, die Verbindung wiederherzustellen, ist fehlgeschlagen

• Anfragen:flush: Alle ausstehenden Anfragen wurden erneut gestellt

• Anfragen: Capture: Eine neue Anfrage wird zurückgehalten

Offline.off(event, handler) : Bindung eines Ereignisses aufheben

Überprüfung

Standardmäßig stellt Offline eine XHR-Anfrage zum Laden Ihres /favicon.ico , um die Verbindung zu überprüfen. Wenn Sie nicht über eine solche Datei verfügen, wird in der Konsole ein 404-Fehler angezeigt, ansonsten funktioniert sie jedoch einwandfrei (selbst ein 404-Fehler bedeutet, dass die Verbindung aktiv ist). Sie können die URL ändern, auf die es trifft (ein Endpunkt, der schnell mit einer 204 antwortet, ist perfekt):

 Offline.options = {checks: {xhr: {url: '/connection-test'}}};

Stellen Sie sicher, dass die von Ihnen überprüfte URL denselben Ursprung hat wie Ihre Seite (die Verbindungsmethode, die Domäne und der Port müssen alle gleich sein), sonst treten CORS-Probleme auf. Sie können Access-Control Header zum Endpunkt hinzufügen, um das Problem in modernen Browsern zu beheben, aber es wird immer noch Probleme in IE9 und niedrigeren Versionen verursachen.

Wenn Sie Tests in einer anderen Domäne ausführen möchten, versuchen Sie es mit der Image-Methode. Es lädt ein Bild, das domänenübergreifend sein darf.

 Offline.options = {checks: {image: {url: 'my-image.gif'}, active: 'image'}}

Die einzige Einschränkung besteht darin, dass wir mit der Bildmethode einen 404-Fehler nicht von einem echten Verbindungsproblem unterscheiden können, sodass jeder Fehler offline als Verbindungsproblem angezeigt wird.

Offline umfasst auch eine Prüfung namens 'up' und eine weitere namens 'down' , die zu Testzwecken immer meldet, dass die Funktion aktiv bzw. deaktiviert ist. Sie können sie aktivieren, indem Sie die Option active festlegen, Ihrem Skript-Tag ein Datenattribut mit dem Namen data-simulate und dem Wert 'up' oder 'down' hinzufügen oder indem Sie localStorage.OFFLINE_SIMULATE auf 'up' oder 'down' setzen.

Wieder verbinden

Das Reconnect-Modul testet die Verbindung regelmäßig automatisch erneut, wenn sie unterbrochen ist. Eine erfolgreiche AJAX-Anfrage löst auch eine stille erneute Prüfung aus (sofern interceptRequests nicht „false“ ist).

Sie können das Reconnect-Modul deaktivieren, indem Sie reconnect auf „false“ setzen. Die Wiederherstellung der Verbindung kann durch Festlegen von Optionen in der Einstellung „Wiederverbindung“ konfiguriert werden.

Anfragen

Das Anforderungsmodul speichert alle fehlgeschlagenen AJAX-Anforderungen und stellt sie nach der Deduplizierung erneut her, wenn die Verbindung wiederhergestellt ist.

Sie können es deaktivieren, indem Sie die requests auf „false“ setzen.

Sie können deDupBody auch auf „true“ setzen, wenn bei der Deduplizierung auch der Inhalt der Anfrage berücksichtigt werden soll.

Abhängigkeiten

Keiner!

Browser-Unterstützung

Modernes Chrome, Firefox, Safari und IE8+

Beachten Sie, dass nicht alle Browser (einschließlich Safari und der alte IE) die Offline-Ereignisse unterstützen, sodass Offline weniger genaue Erkennungsmethoden verwenden muss.