Les principales extensions de l'API ont été résumées plus tôt. Les extensions suivantes ne joueront le plus grand rôle que dans les occasions dédiées. Jetons un bref aperçu ici. Sans exception, IE ne prend pas en charge les fonctionnalités suivantes. Le cache d'application et le message du serveur sont pris en charge dans d'autres navigateurs grand public. Les notifications de bureau ne sont actuellement prises en charge que par Chrome.
Cache d'applicationPlusieurs fois, nous devons mettre en cache certaines pages qui ne sont pas changées fréquemment pour améliorer la vitesse d'accès; Et pour certaines applications, nous espérons également les utiliser hors ligne. Dans HTML5, vous pouvez facilement implémenter ces fonctions via une technologie appelée mise en cache d'application.
Dans la mise en œuvre du cache d'application, HTML5 nous permet de créer un fichier manifeste mis en cache pour générer facilement une version hors ligne de l'application.
Étapes de mise en œuvre :1. Activer la mise en cache de la page, c'est très simple. Il vous suffit d'inclure l'attribut manifeste dans le HTML du document:
<! Doctype html>
<html manifest = "Demo.appcache">
...
</html>
Chaque page contenant cet attribut manifeste sera mise en cache lorsque l'utilisateur y accède. Si la propriété manifeste n'est pas spécifiée, elle ne sera pas mise en cache (sauf si la page Web est directement spécifiée dans le fichier manifeste). Il n'y a pas de norme unifiée pour l'extension de fichier manifeste et l'extension recommandée est .AppCache.
2. Configurez le type MIME du fichier manifeste du côté serveur
Un fichier manifeste doit être pris en charge par le type mime correct, qui est le texte / cache-manifest. Il doit être configuré sur le serveur Web utilisé. Par exemple: dans Apache, vous pouvez ajouter: AddType Text / Cache-Manifest Manifest dans .htaccess.
3. Écrivez un fichier manifeste
Le fichier manifeste est un fichier texte simple qui indique au navigateur quoi mettre en cache (ou quoi mettre en cache).
Le fichier manifeste contient les trois parties suivantes:
• Cache Manifest - Les fichiers sous ce titre de liste seront mis en cache après le téléchargement.
• Réseau - Le fichier sous ce titre de liste nécessitera une connexion au serveur et ne sera pas mis en cache.
• Fallback - Affiche une page spécifique si le fichier sous ce titre de liste n'est pas accessible.
Le fichier complet est affiché dans l'exemple suivant:
Manifeste du cache
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
RÉSEAU:
login.asp
RETOMBER:
/ html5 / /offline.html
indice:
Commentaires représentatifs commençant par #.
* Peut être utilisé pour représenter toutes les autres ressources ou fichiers. Par exemple:
RÉSEAU:
*
Cela signifie que toutes les ressources ou fichiers ne seront pas mis en cache.
4. Mettez à jour le cache
Une fois qu'une application est mise en cache, elle restera mise en cache à moins que la situation suivante ne se produise:
• L'utilisateur a supprimé le cache
• Le fichier manifeste est modifié
• Le cache d'application est modifié par le programme
Ainsi, une fois le fichier mis en cache, en plus des modifications artificielles, le navigateur continuera à afficher le contenu de la version en cache, même si vous modifiez le fichier serveur. Afin de faire en sorte que le navigateur mette à jour le cache, vous ne pouvez pas modifier le fichier manifeste.
: La ligne commençant par # est une ligne de commentaire, mais elle peut avoir d'autres utilisations. Si votre modification n'implique qu'une seule image ou une fonction JavaScript, ces modifications ne seront pas recouvertes. Mettre à jour les dates et les versions dans les commentaires est un moyen d'amener votre navigateur à repenser vos fichiers
: Les navigateurs peuvent avoir de nombreuses données en cache avec différentes limites de taille (certains navigateurs autorisent 5 m de données en cache).
<strong> Message du serveur </strong>
Un autre scénario courant est: lorsque les données sur le serveur changent, comment informer le client? C'était la pratique précédente: la page vérifie activement s'il y a des mises à jour sur le serveur. Selon l'introduction précédente, nous savons que l'utilisation de WebSocket peut réaliser une communication bidirectionnelle. Ici, nous introduisons une autre nouvelle fonctionnalité dans les événements HTML5: Server-Sent.
Dans HTML5, l'objet qui héberge cette fonctionnalité est l'objet Eventsource.
Les étapes à utiliser sont les suivantes:
1. Vérifiez la prise en charge du navigateur pour les objets Eventsource, tout le monde le sait:
if (typeof (eventsource)! == "Undefined")
{
// Oui! Prise en charge des événements de serveur!
// du code ...
}autre {
// Désolé! Aucune prise en charge des événements de serveur.
}
2. Code de message d'envoi côté serveur
L'envoi de messages de mise à jour du côté serveur est très simple: après avoir défini les informations d'en-tête de type de contenu vers le texte text / événement, vous pouvez envoyer des événements. Prenez le code ASP comme exemple:
<%
Response.ContentType = "Text / Event-Stream"
Response.expires = -1
Response.Write ("Data: >> Time du serveur" et maintenant ())
Réponse.flush ()
%>
3. Recevoir le code de message du côté du navigateur
var source = new Eventsource ("Demo_sse.php");
source.onMessage = fonction (événement) {
document.getElementById ("Result"). InnerHtml + = event.Data + "
"
};
Description du code:
• Créez un objet Eventsource, en spécifiant l'URL de la page pour envoyer des mises à jour (voici Demo_see.jsp)
• Une fois chaque mise à jour reçue, l'événement OnMessage est déclenché
• Lorsque le temps de remun est déclenché, définissez les données résultantes sur l'élément avec id = résultat
En plus de l'événement OnMessage, l'objet Eventsource gère également les événements d'erreur d'erreur, les événements ONOpen établis par les connexions, etc.
Notifications de bureau - fonctionnalités quasi-html5La fonction de notification de bureau permet au navigateur d'informer les utilisateurs des messages même s'il minimise l'état. C'est la combinaison la plus naturelle avec WebIM. Cependant, actuellement Chrome est le navigateur qui prend en charge cette fonctionnalité. Les fenêtres pop-up sont quelque chose que tout le monde déteste, vous devez donc obtenir l'autorisation de l'utilisateur pour activer cette fonctionnalité.
<cript>
fonction requestPermission (rappel) {
window.webkitnotifications.requestPermission (rappel);
}
fonction illustotification () {
// terme si le navigateur prend en charge la notification via la fenêtre.
if (!! window.webkitNotifications) {
if (window.webkitnotifications.checkPermission ()> 0) {
RequestPermission (affichage);
} autre {
var notification = window.webkitNotifications.Creenotification ("[imgurl]", "titre", "corps");
notification.ondisplay = function () {
setTimeout ('notification.cancel ()', 5000);
}
notification.show ();
}
}
}
</cript>
Ouvrez cette page dans votre navigateur et vous verrez une fenêtre de message qui dure 5 secondes apparaître dans le coin inférieur droit du bureau.
Cette fonctionnalité est très simple à utiliser, mais en fonctionnement réel, l'interférence de la fonction de notification aux utilisateurs doit être minimisée et la fonction d'occurrence de la fonction de notification doit être minimisée.
Voici quelques expériences d'experts en ligne dans la création de cette application :1. Assurez-vous qu'une seule notification apparaît lorsque plusieurs messages sont reçus;
Ce problème est plus facile à résoudre car l'objet de notification a une propriété nommée RemplaceID. Après avoir spécifié cette propriété, tant que la fenêtre de notification avec le même RemplaceID apparaît, elle écrasera la fenêtre précédemment éclatée. Dans le projet réel, toutes les fenêtres pop-up se voient attribuer un RemplaceID identique. Cependant, il convient de noter que ce comportement de couverture n'est valide que dans le même domaine.
2. Lorsque l'utilisateur se trouve dans la page où le MI apparaît (la page est à l'état de mise au point), il n'y aura pas de notification;
Ce problème est principalement de déterminer si la fenêtre du navigateur est à l'état de mise au point. Actuellement, il ne semble pas y avoir de meilleur moyen de surveiller les événements OnFocus et OnBlur de la fenêtre. Dans le projet, de cette façon est utilisé pour enregistrer l'état de mise au point de la fenêtre, puis déterminer si la fenêtre contextuelle est basée sur l'état de mise au point lorsque le message arrive.
$ (fenêtre) .bind ('blur', this.windowblur) .bind ('focus', this.windowfocus);
Ce à quoi vous devez faire attention lorsque vous utilisez cette méthode, c'est que le point d'enregistrement des événements doit être aussi élevé que possible. Si l'inscription est trop tard, il est facile de provoquer une erreur de jugement du statut lorsque l'utilisateur ouvre la page et part.
3. Lorsqu'un utilisateur utilise plusieurs onglets pour ouvrir plusieurs pages avec IM, aucune notification n'apparaîtra tant qu'une page est dans l'état de mise au point;
Le partage d'État entre plusieurs pages peut être réalisé grâce à un stockage local:
• Lorsque vous vous concentrez sur la fenêtre du navigateur, modifiez la valeur de la touche spécifiée dans le stockage local pour se concentrer.
• Lorsque le flou de la fenêtre du navigateur est modifié pour modifier la valeur de la touche spécifiée dans le stockage local pour brouiller.
Il convient de noter que lorsque vous passez d'un onglet à un autre dans Chrome, Blur peut être écrit au stockage plus que la mise au point, il nécessite donc un traitement asynchrone lors de la modification de l'état de mise au point.
/ * fenêtre sur l'événement de mise au point * /
// Utiliser le retard est de résoudre le problème de la commutation entre plusieurs onglets, laissez toujours la mise au point d'écraser l'événement flou des autres onglets.
// Remarque: si vous ne vous concentrez pas sur le document avant de cliquer sur l'onglet, l'onglet cliquer ne déclenchera pas la mise au point.
setTimeout (function () {
Storage.SetItem ('kxchat_focus_win_state', 'focus');
}, 100);
/ * fenêtre sur l'événement Blur * /
Storage.SetItem ('kxchat_focus_win_state', 'blur');
Après avoir implémenté le partage d'état ci-dessus, après l'arrivée du nouveau message, il vous suffit de vérifier si la valeur de 'KXCHAT_FOCUS_WIN_STATE' dans le stockage local est floue, et si elle est floue, la fenêtre contextuelle sera apparue.
4. Comment permettre aux utilisateurs de cliquer sur la couche flottante de notification pour localiser des fenêtres de chat spécifiques
La fenêtre de notification prend en charge les réponses d'événements telles que onClick, et la portée de la fonction dans la fonction de réponse appartient à la page où la fenêtre a été créée. Le code suivant:
var n = dn.Createtenotification (
img,
titre,
contenu
));
// Assurez-vous qu'il n'y a qu'un seul rappel
n.replaceID = this.replaceId;
n.onclick = function () {
// Activez la fenêtre du navigateur qui apparaît dans la fenêtre de notification
window.focus ();
// Ouvrez la fenêtre IM
Wm.OpenwinById (données);
// Fermez la fenêtre de notification
n.cancel ();
};
L'objet de fenêtre accessible dans la fonction de réponse ONClick appartient à la page actuellement créée, afin qu'il puisse facilement interagir avec la page actuelle. Le code ci-dessus implémente que cliquer sur la fenêtre contextuelle va passer à la fenêtre du navigateur correspondant et ouvrir la fenêtre IM.
: Les événements connexes de la page sont souvent indéfiniment des séries chronologiques, donc notre code essaie de ne pas supposer que l'ordre de déclenchement de certains événements est certain. Par exemple, les événements de flou et de concentration ci-dessus
Référence pratique:Document officiel: http://www.w3schools.com/html5/
Un tutoriel chinois pour html5: http://www.gbin1.com/tutorials/html5-tutorial/