Raid on HTML5 Javascript API Extension 5 – Andere Erweiterungen (Anwendungscache/Servernachricht/Desktopbenachrichtigung)_html5 Tutorial-Tipps

Die wichtigsten API-Erweiterungen wurden bereits zusammengefasst. Die folgenden Erweiterungen werden nur bei besonderen Gelegenheiten ihre größte Rolle spielen. Die folgenden Funktionen werden vom IE ausnahmslos nicht unterstützt. Anwendungscaching und serverseitiges Messaging werden in anderen gängigen Browsern unterstützt. Desktop-Benachrichtigungen werden derzeit nur von Chrome unterstützt.
Anwendungscache
Oft müssen wir einige Seiten zwischenspeichern, die sich nicht häufig ändern, um die Zugriffsgeschwindigkeit zu verbessern, und für einige Anwendungen möchten wir sie auch offline verwenden können. In HTML5 können Sie diese Funktionen einfach durch eine Technologie namens „Anwendungscaching“ implementieren.
Bei der Implementierung des Anwendungs-Cachings ermöglicht uns HTML5 die Erstellung einer Cache-Manifestdatei, um auf einfache Weise eine Offline-Version der Anwendung zu generieren.
Implementierungsschritte:
1. Aktivieren Sie das Caching der Seite. Es ist sehr einfach, das Manifest-Attribut in den HTML-Code des Dokuments aufzunehmen 🎜>

Code kopieren

Der Code lautet wie folgt:

...



Jede Seite, die dieses Manifestattribut enthält, wird zwischengespeichert, wenn der Benutzer darauf zugreift. Wenn das Manifest-Attribut nicht angegeben ist, wird es nicht zwischengespeichert (es sei denn, die Seite ist direkt in der Manifestdatei angegeben). Es gibt keinen einheitlichen Standard für die Manifestdateierweiterung. Die empfohlene Erweiterung ist „.appcache“.
2. Konfigurieren Sie den MIME-Typ der Manifestdatei auf der Serverseite.

Eine Manifestdatei muss vom richtigen MIME-Typ unterstützt werden. Muss auf dem verwendeten Webserver konfiguriert werden. Beispiel: In Apache können Sie Folgendes hinzufügen: AddType text/cache-manifest manifest in .htaccess.
3. Schreiben Sie eine Manifestdatei
Die Manifestdatei ist eine einfache Textdatei, die dem Browser mitteilt, welche Inhalte zwischengespeichert werden sollen (oder welche nicht). Die
Manifestdatei enthält die folgenden drei Abschnitte:
• CACHE MANIFEST – Dateien unter diesem Listenkopf werden nach dem Herunterladen zwischengespeichert.
• NETZWERK – Dateien unter diesem Listentitel erfordern eine Verbindung zum Server und werden nicht zwischengespeichert.
• FALLBACK – Zeigt eine bestimmte Seite an, wenn auf die Dateien unter diesem Listentitel nicht zugegriffen werden kann.
Eine vollständige Datei wird im folgenden Beispiel angezeigt:

Kopieren Sie den Code

Der Code lautet wie folgt:

CACHE MANIFEST

# 2012-02-21 v1.0.0

/theme.css
/logo.gif
/main.js
NETZWERK:
login.asp
FALLBACK:
/html5/ /offline.html


Tipp:
# beginnt mit einem Kommentar.

* kann zur Darstellung aller anderen Ressourcen oder Dateien verwendet werden. Zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

NETZWERK:

*

bedeutet, dass nicht alle Ressourcen oder Dateien zwischengespeichert werden.
4. Aktualisieren Sie den Cache

Sobald eine Anwendung zwischengespeichert ist, bleibt sie im Cache, es sei denn, Folgendes passiert:
• Der Benutzer löscht den Cache
• Die Manifestdatei wird geändert
• Die Anwendung Der Cache wird vom Programm geändert
Sobald die Datei zwischengespeichert ist, zeigt der Browser mit Ausnahme menschlicher Änderungen weiterhin den Inhalt der zwischengespeicherten Version an, auch wenn Sie die Serverdatei ändern. Damit der Browser den Cache aktualisiert, können Sie nur die Manifestdatei ändern.
: Zeilen, die mit „#“ beginnen, sind Kommentarzeilen, können aber für andere Zwecke verwendet werden. Wenn Ihre Änderung nur ein Bild oder eine JavaScript-Funktion betrifft, werden diese Änderungen nicht erneut zwischengespeichert. Das Aktualisieren des Datums und der Version in den Kommentaren ist eine Möglichkeit, den Browser dazu zu bringen, Ihre Datei erneut zwischenzuspeichern
: Browser können viele verschiedene Größenbeschränkungen für zwischengespeicherte Daten haben (einige Browser erlauben 5 MB zwischengespeicherte Daten).

Code kopieren

Der Code lautet wie folgt:

Servernachricht< ; /strong>

Ein weiteres häufig verwendetes Szenario ist: Wie informieren Sie den Client, wenn sich die Daten auf dem Server ändern? Dies geschah in der Vergangenheit: Die Seite ergriff die Initiative, den Server nach Updates abzufragen. Gemäß der vorherigen Einführung wissen wir, dass mit WebSocket eine bidirektionale Kommunikation erreicht werden kann. Hier stellen wir eine weitere neue Funktion in HTML5 vor: Vom Server gesendete Ereignisse.

In HTML5 ist das Objekt, das diese Funktion trägt, das EventSource-Objekt.
Die Schritte sind wie folgt:
1. Überprüfen Sie die Unterstützung des Browsers für das EventSource-Objekt. Jeder weiß das:

Code kopieren

Der Code lautet wie folgt:

if(typeof(EventSource) !== "undefiniert")
{
// Ja! Unterstützung für vom Server gesendete Ereignisse.....
}sonst {
// Entschuldigung! Unterstützung für vom Server gesendete Ereignisse.
}

2. Serverseitiger Nachrichtensendecode
Das serverseitige Senden von Aktualisierungsnachrichten ist sehr einfach: Nach dem Festlegen der Inhaltstyp-Header-Informationen auf „text/event-stream“ können Sie das Ereignis senden. Nehmen Sie den ASP-Code als Beispiel:

Kopieren Sie den Code Der Code lautet wie folgt:

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: >> Server Time" & now() )
Response.
%>

3 Code kopieren


Der Code lautet wie folgt:

var source=new EventSource("demo_sse.php"); { document.getElementById(" result").innerHTML =event.data "";

Codebeschreibung:

• Erstellen Sie ein EventSource-Objekt und Geben Sie die Seiten-URL an, um Aktualisierungen zu senden (hier ist demo_see.jsp).
• Jedes Mal, wenn ein Update empfangen wird, wird das Onmessage-Ereignis ausgelöst.
• Wenn die Onmessage-Zeit ausgelöst wird, werden die erhaltenen Daten auf das Element mit gesetzt id="result"
Das EventSource-Objekt ist zusätzlich zum onmessage-Event. Darüber hinaus gibt es onerror-Events zur Fehlerbearbeitung, onopen-Events zum Verbindungsaufbau usw.

Desktop-Benachrichtigung – Quasi-HTML5-Funktion

Die Desktop-Benachrichtigungsfunktion ermöglicht es dem Browser, Benutzer über Nachrichten zu benachrichtigen, auch wenn diese minimiert sind. Dies ist die natürlichste Kombination mit WebIM. Der einzige Browser, der diese Funktion derzeit unterstützt, ist jedoch Chrome. Pop-up-Fenster sind etwas, das jeder hasst, daher ist zum Aktivieren dieser Funktion die Erlaubnis des Benutzers erforderlich.





Code kopieren
Der Code lautet wie folgt:

<script> >function RequestPermission (callback) { <div class="right">window.webkitNotifications.requestPermission(callback); <span style="CURSOR: pointer" onclick="copycode(getid('phpcode192'));">} <u>function showNotification() { </u>//Bestimmen Sie, ob der Browser Benachrichtigungen über window.webkitNotifications </span>if unterstützt (!! window.webkitNotifications) { </div>if (window.webkitNotifications.checkPermission() > 0) { </div>RequestPermission(showNotification); <div class="msgborder" id="phpcode192">} else { <br>var notification =window.webkitNotifications.createNotification („[ imgurl]“, „Title“, „Body“); <br>notification.ondisplay = function() { <br>setTimeout('notification.cancel()', 5000); <br>} <br> notification.show (); <br>} <br>} <br></script>


Öffnen Sie diese Seite im Browser und Sie sehen ein Popup Nachricht in der unteren rechten Ecke des Desktops.
Diese Funktion ist sehr einfach zu verwenden, aber während des tatsächlichen Betriebs sollte die Beeinträchtigung des Benutzers durch die Benachrichtigungsfunktion minimiert werden und das Auftreten der Benachrichtigungsfunktion sollte minimiert werden.

Im Folgenden finden Sie einige Erfahrungen von Online-Experten bei der Erstellung dieser Anwendung:
1. Stellen Sie sicher, dass nur eine Benachrichtigung angezeigt wird, wenn mehrere Nachrichten eingehen.
Dieses Problem ist einfacher zu lösen Das Benachrichtigungsobjekt verfügt über eine Eigenschaft namens „replaceId“. Nach Angabe dieses Attributs wird das vorherige Popup-Fenster überschrieben, solange ein Benachrichtigungsfenster mit derselben Ersetzungs-ID angezeigt wird. Im eigentlichen Projekt wird allen Popup-Fenstern die gleiche replaceId zugewiesen. Es ist jedoch zu beachten, dass dieses Überschreibverhalten nur in derselben Domäne gültig ist.
2. Wenn sich der Benutzer auf der Seite befindet, auf der IM angezeigt wird (die Seite befindet sich im Fokusstatus), wird keine Benachrichtigung angezeigt.
Dieses Problem besteht hauptsächlich darin, festzustellen, ob sich das Browserfenster derzeit im Fokusstatus befindet Abgesehen von dem Vorfall scheint es neben der Überwachung des Fokus und der Unschärfe des Fensters keinen besseren Weg zu geben. Im Projekt wird diese Methode verwendet, um den Fokusstatus des Fensters aufzuzeichnen. Wenn dann die Nachricht eintrifft, wird anhand des Fokusstatus beurteilt, ob das Fenster geöffnet werden soll.

Code kopieren
Der Code lautet wie folgt:


$(window).bind ( 'blur', this.windowBlur).bind( 'focus', this.windowFocus);
Bei dieser Methode ist zu beachten, dass der Veranstaltungspunkt so früh wie möglich erfolgen sollte. Wenn die Registrierung zu spät erfolgt, kann es leicht passieren, dass der Benutzer den Status falsch einschätzt, wenn er die Seite öffnet Blätter.
3. Wenn der Benutzer mehrere Registerkarten verwendet, um mehrere Seiten mit IM zu öffnen, wird keine Benachrichtigung angezeigt, solange sich eine Seite im Fokusstatus befindet.
Die Statusfreigabe zwischen mehreren Seiten kann durch lokale Speicherung erreicht werden:
• Wenn das Browserfenster Fokus ist, ändern Sie den Wert des angegebenen Schlüssels im lokalen Speicher in „Fokus“
• Wenn das Browserfenster Unschärfe ist, ändern Sie den Wert des angegebenen Schlüssels im lokalen Speicher in „Unschärfe“ .
Es ist zu beachten, dass beim Wechsel von einem Tab zu einem anderen Tab in Chrome die Unschärfe möglicherweise nach dem Fokus in den Speicher geschrieben wird, sodass beim Ändern des Fokusstatus eine asynchrone Verarbeitung erforderlich ist.

Code kopieren

Der Code lautet wie folgt:

/*Fenster bei Fokusereignis */
//Die Verzögerung wird verwendet, um das Problem zu lösen, dass der Fokus immer das Unschärfeereignis anderer Tabs abdeckt, wenn zwischen mehreren Tabs gewechselt wird
//Hinweis: Wenn vor dem Klicken auf die Tabulatortaste kein Fokus auf dem Dokument liegt, Durch Klicken auf die Tabulatortaste wird Focus nicht ausgelöst.
Storage.setItem( 'kxchat_focus_win_state', 'blur' );


Nachdem Sie die obige Statusfreigabe erkannt haben, müssen Sie nach dem Eintreffen der neuen Nachricht nur noch prüfen, ob der Wert von 'kxchat_focus_win_state' Im lokalen Speicher ist Unschärfe vorhanden. Das Popup-Fenster dient nur der Unschärfe.
4. So ermöglichen Sie Benutzern, auf die schwebende Benachrichtigungsebene zu klicken, um ein bestimmtes Chatfenster zu finden.
Das Benachrichtigungsfenster unterstützt Onclick- und andere Ereignisantworten, und der Umfang der Antwortfunktion gehört zu der Seite, die das Fenster erstellt hat . Der folgende Code:

Code kopieren

Der Code lautet wie folgt: var n = dn.createNotification (

img,

title,

content
//Stellen Sie sicher, dass es nur eine Erinnerung gibt
n.replaceId =
n.onclick = function() {
//Aktivieren Sie das Browserfenster, das das Benachrichtigungsfenster öffnet
window.focus(
//Öffnen Sie das IM-Fenster
WM.openWinByID( data ) ;
//Schließe das Benachrichtigungsfenster
n.cancel();


Das Fensterobjekt, auf das in der Onclick-Antwortfunktion zugegriffen wird, gehört also zur aktuell erstellten Seite Es ist einfach, mit der aktuellen Seite zu interagieren. Der obige Code erkennt, dass durch Klicken auf das Popup-Fenster zum entsprechenden Browserfenster gesprungen und das IM-Fenster geöffnet wird.
: Verwandte Ereignisse auf der Seite haben oft einen unsicheren Zeitpunkt, daher sollte unser Code versuchen, nicht davon auszugehen, dass die Reihenfolge, in der bestimmte Ereignisse ausgelöst werden, sicher ist. Zum Beispiel die oben genannten Unschärfe- und Fokusereignisse


Praktische Referenz:

Offizielles Dokument:
http://www.w3schools.com/html5/

Ein chinesisches Tutorial für HTML5: http: //www.gbin1.com/tutorials/html5-tutorial/