Die Haupt -API -Erweiterungen wurden früher zusammengefasst. Die folgenden Erweiterungen spielen nur die größte Rolle bei engagierten Gelegenheiten. Lassen Sie uns hier einen kurzen Blick darauf werfen. Ausnahmslos unterstützt der IE die folgenden Funktionen nicht. Anwendungs -Cache und Servernachricht werden in anderen Mainstream -Browsern unterstützt. Desktop -Benachrichtigungen werden derzeit nur von Chrome unterstützt.
AnwendungscacheOft müssen wir einige Seiten zwischenspeichern, die nicht häufig geändert werden, um die Zugangsgeschwindigkeit zu verbessern. Und für einige Anwendungen hoffen wir auch, sie offline zu verwenden. In HTML5 können Sie diese Funktionen problemlos über eine Technologie namens Application Caching implementieren.
In der Implementierung von Anwendungs -Cache ermöglicht HTML5 eine zwischengespeicherte Manifestdatei, um einfach eine Offline -Version der Anwendung zu generieren.
Implementierungsschritte :1. Aktivieren Sie das Seiten -Caching, es ist sehr einfach. Sie müssen nur das Manifest -Attribut in die HTML des Dokuments aufnehmen:
<! DocType html>
<html manifest = "Demo.Appcache">
...
</html>
Jede Seite, die dieses Manifest -Attribut enthält, wird zwischengespeichert, wenn der Benutzer darauf zugreift. Wenn die Manifesteigenschaft nicht angegeben ist, wird sie nicht zwischengespeichert (es sei denn, die Webseite ist direkt in der Manifestdatei angegeben). Es gibt keinen einheitlichen Standard für die Manifestdateierweiterung, und die empfohlene Erweiterung lautet .Appcache.
2. Konfigurieren Sie den MIME -Typ der Manifestdatei auf der Serverseite
Eine Manifestdatei muss vom richtigen MIME-Typ unterstützt werden, der Text/Cache-Manifest ist. Es muss auf dem verwendeten Webserver konfiguriert werden. Zum Beispiel: In Apache können Sie hinzufügen: addtype text/cache-manifest manifest in .htaccess.
3.. Schreiben Sie die Manifestdatei
Die Manifestdatei ist eine einfache Textdatei, die dem Browser mitteilt, was eingestuft werden soll (oder was mit dem zwischenströmenden).
Die Manifest -Datei enthält die folgenden drei Teile:
• Cache Manifest - Die Dateien unter diesem Listentitel werden nach dem Herunterladen zwischengespeichert.
• Netzwerk - Die Datei unter diesem Listentitel erfordert eine Verbindung zum Server und wird nicht zwischengespeichert.
• Fallback - Zeigt eine bestimmte Seite an, wenn die Datei unter diesem Listentitel nicht zugänglich ist.
Die vollständige Datei wird im folgenden Beispiel angezeigt:
Cache Manifest
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/Main.js
NETZWERK:
Login.asp
ZURÜCKGREIFEN:
/html5 //offline.html
Hinweis:
Repräsentative Kommentare beginnend mit #.
* Kann verwendet werden, um alle anderen Ressourcen oder Dateien darzustellen. Zum Beispiel:
NETZWERK:
*
Dies bedeutet, dass alle Ressourcen oder Dateien nicht zwischengespeichert werden.
4. Aktualisieren Sie den Cache
Sobald eine App zwischengespeichert ist, bleibt sie zwischengespeichert, sofern die folgende Situation auftritt:
• Der Benutzer hat den Cache gelöscht
• Die Manifestdatei wird geändert
• Der Anwendungscache wird vom Programm geändert
Sobald die Datei zwischengespeichert ist, zeigt der Browser zusätzlich zu künstlichen Änderungen den Inhalt zwischen zwischengespeichertem Version weiter an, selbst wenn Sie die Serverdatei ändern. Um den Browser den Cache zu aktualisieren, können Sie die Manifestdatei nur ändern.
: Die Zeile, die mit # beginnt, ist eine Kommentarzeile, kann aber andere Verwendungszwecke haben. Wenn Ihre Änderung nur eine Bild- oder JavaScript -Funktion umfasst, werden diese Änderungen nicht erneut übernommen. Aktualisieren von Datum und Versionen in Kommentaren ist eine Möglichkeit, Ihren Browser dazu zu bringen, Ihre Dateien aufzunehmen
: Browser können viele zwischengespeicherte Daten mit unterschiedlichen Größengrenzen haben (einige Browser erlauben 5 m zwischengespeicherte Daten).
<strong> Servermeldung </strong>
Ein weiteres gemeinsames Szenario ist: Wenn sich die Daten auf dem Server ändert, wie können Sie den Client wissen? Dies war die vorherige Praxis: Die Seite prüft aktiv, ob Aktualisierungen auf dem Server vorhanden sind. Nach der vorherigen Einführung wissen wir, dass die Verwendung von Websocket eine wechselseitige Kommunikation erreichen kann. Hier stellen wir eine weitere neue Funktion in HTML5 vor: Server-Sent-Ereignisse.
In HTML5 ist das Objekt, das diese Funktion hostet, das EventSource -Objekt.
Die Gebrauchsschritte sind wie folgt:
1. Überprüfen Sie die Unterstützung des Browsers für EventSource -Objekte, jeder weiß Folgendes:
if (typeof (eventSource)! == "undefined")
{
// Ja! Server-Sent-Ereignisunterstützung!
// ein Code ...
}anders {
// Entschuldigung! Keine Server-Sent-Ereignisunterstützung ..
}
2. Serverseitig Senden von Nachrichtencode
Das Senden von Aktualisierungsnachrichten auf der Serverseite ist sehr einfach: Nach dem Einstellen der Headerinformationen vom Typ Inhalt in Text/Ereignisstrom können Sie Ereignisse senden. Nehmen Sie den ASP -Code als Beispiel:
<%
Antwort.ContentType = "Text/Ereignisstream"
Response.expires = -1
Response.write ("Daten: >> Serverzeit" & now ())
Response.flush ()
%>
3. Empfangen Sie den Nachrichtencode auf der Browserseite
var Source = new EventSource ("Demo_Sse.php");
source.onmessage = function (Ereignis) {
document.getElementById ("Ergebnis"). Innerhtml+= Ereignis.Data+"
";
};
Code Beschreibung:
• Erstellen Sie ein EventSource -Objekt und geben Sie die Seiten -URL an, um Updates zu senden (hier ist Demo_see.jsp).
• Nachdem jedes Update empfangen wurde, wird das OnMessage -Ereignis ausgelöst
• Wenn die OnMessage -Zeit ausgelöst wird, legen Sie die resultierenden Daten mit ID = Ergebnis auf das Element ein
Zusätzlich zum OnMessage -Ereignis kümmert sich das EventSource -Objekt auch mit den Fehler von OnError -Ereignissen, ONOPEN -Ereignissen, die durch Verbindungen festgelegt sind, usw.
Desktop -Benachrichtigungen - Quasi -HTML5 -FunktionenMit der Desktop -Benachrichtigungsfunktion kann der Browser Benutzer über Nachrichten informieren, auch wenn der Status minimiert wird. Dies ist die natürlichste Kombination mit WebIM. Derzeit ist nur Chrome der Browser, der diese Funktion unterstützt. Pop-up-Fenster sind etwas, das jeder hasst. Daher müssen Sie die Erlaubnis des Benutzers einholen, um diese Funktion zu aktivieren.
<Script>
Funktionsanforderung (Rückruf) {
window.webkitnotifications.requestPermission (Rückruf);
}
Funktion teamicification () {
// Begriff, ob der Browser die Benachrichtigung über Windows.Webkitnotifications unterstützt
if (!! window.webkitnotifications) {
if (window.webkitnotifications.Checkpermission ()> 0) {
Anforderer (DestoDotification);
} anders {
var notification = window.webkitnotifications.createNotification ("[imgurl]", "title", "body");
Benachrichtigung.onDisplay = function () {
setTimeout ('notification.cancel ()', 5000);
}
Benachrichtigung.show ();
}
}
}
</script>
Öffnen Sie diese Seite in Ihrem Browser und Sie sehen ein Meldungsfenster, das 5 Sekunden lang in der unteren rechten Ecke des Desktops dauert.
Diese Funktion ist sehr einfach zu verwenden, aber im tatsächlichen Betrieb sollte die Interferenz der Benachrichtigungsfunktion an Benutzer minimiert werden und das Auftreten der Benachrichtigungsfunktion minimiert werden.
Hier sind einige Erfahrungen von Online -Experten bei der Bewerbung :1. Stellen Sie sicher, dass nur eine Benachrichtigung angezeigt wird, wenn mehrere Nachrichten empfangen werden.
Dieses Problem ist leichter zu lösen, da das Benachrichtigungsobjekt über eine Eigenschaft mit dem Namen Ersatz verfügt. Nachdem diese Eigenschaft angegeben hat, überschreiben Sie das zuvor aufgetaute Fenster, solange das Benachrichtigungsfenster mit demselben Ersatz ersetzt wird. Im tatsächlichen Projekt werden allen Pop-up-Fenstern ein identisches Ersatz zugewiesen. Es ist jedoch zu beachten, dass dieses Deckungsverhalten nur in derselben Domäne gültig ist.
2. Wenn sich der Benutzer auf der Seite befindet, auf der die IM angezeigt wird (die Seite befindet sich im Fokuszustand), wird es keine Benachrichtigung geben.
Dieses Problem besteht hauptsächlich darum, zu bestimmen, ob sich das Browserfenster im Fokuszustand befindet. Derzeit scheint es keinen besseren Weg zu geben, die Onfokus- und Onblur -Ereignisse des Fensters zu überwachen. Auf diese Weise wird im Projekt verwendet, um den Fokusstatus des Fensters aufzuzeichnen und dann festzustellen, ob das Popup-Fenster auf dem Fokusstatus basiert, wenn die Nachricht eintrifft.
$ (Fenster) .bind ('Blur', this.windowblur) .bind ('Focus', this.windowfocus);
Was Sie bei der Verwendung dieser Methode achten müssen, ist, dass der Ereignisregistrierungspunkt so hoch wie möglich sein sollte. Wenn die Registrierung zu spät ist, ist es einfach, einen Status zu beeinträchtigen, wenn der Benutzer die Seite öffnet und verlässt.
3. Wenn ein Benutzer mehrere Registerkarten verwendet, um mehrere Seiten mit IM zu öffnen, wird keine Benachrichtigung angezeigt, solange sich eine Seite im Fokuszustand befindet.
Die staatliche gemeinsame Nutzung mehrerer Seiten kann durch lokale Speicherung erreicht werden:
• Wenn Sie sich auf das Browserfenster konzentrieren, ändern Sie den Wert des angegebenen Schlüssels im lokalen Speicher in die Fokussierung.
• Wenn das Browserfenster unscharf wird, um den Wert der angegebenen Taste im lokalen Speicher auf Unschärfe zu ändern.
Es ist zu beachten, dass Blur beim Wechsel von einer Registerkarte auf eine andere in Chrome mehr als den Fokus geschrieben werden kann, sodass es bei der Änderung des Fokuszustands eine asynchrone Verarbeitung erfordert.
/*Fenster zum Fokusereignis*///
// Verwenden Sie die Verzögerung, um das Problem des Umschaltens zwischen mehreren Registerkarten zu lösen und immer das Blur -Ereignis anderer Registerkarten zu überschreiben.
// HINWEIS: Wenn Sie sich vor dem Klicken auf die Registerkarte "auf die Registerkarte" nicht auf das Dokument konzentrieren, wird der Fokus nicht ausgelöst.
setTimeout (function () {
Storage.setItem ('kxchat_focus_win_state', 'focus');
}, 100);
/*Fenster auf Blur Event*/
Storage.setItem ('kxchat_focus_win_state', 'Blur');
Nach der Implementierung der oben genannten Statusfreigabe müssen Sie nach Einkommen der neuen Nachricht nur überprüfen, ob der Wert von 'kxchat_focus_win_state' im lokalen Speicher verschwommen ist, und wenn es verschwommen ist, wird das Popup-Fenster aufgetaucht.
4. So können Benutzer auf die Benachrichtigungsebene klicken, um bestimmte Chat -Fenster zu finden
Das Benachrichtigungsfenster unterstützt Ereignisantworten wie Onclick, und der Funktionsumfang in der Antwortfunktion gehört zur Seite, auf der das Fenster erstellt wurde. Der folgende Code:
var n = dn.createTification (
IMG,
Titel,
Inhalt
);
// Stellen Sie sicher, dass es nur eine Erinnerung gibt
N.Replaceid = this.Replaceid;
n.onclick = function () {
// Aktivieren Sie das Browserfenster, das das Benachrichtigungsfenster aufgreift
Fenster.Focus ();
// Öffnen Sie das IM -Fenster
Wm.openwinbyid (Daten);
// das Benachrichtigungsfenster schließen
N.Cancel ();
};
Das in der Onclick -Antwortfunktion zugegriffene Fensterobjekt gehört zur aktuell erstellten Seite, sodass es problemlos mit der aktuellen Seite interagieren kann. Der obige Code implementiert, dass das Klicken auf das Popup-Fenster zum entsprechenden Browserfenster springt und das IM-Fenster öffnet.
: Die zugehörigen Ereignisse auf der Seite sind oft auf unbestimmte Zeit zeitreiche Serien, sodass unser Code nicht davon ausgeht, dass die Reihenfolge der Auslösen bestimmter Ereignisse sicher ist. Zum Beispiel die obigen 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/