Raid sur l'extension 5 de l'API Javascript HTML5 – Autres extensions (cache d'application/message du serveur/notification du bureau)_html5 Conseils du didacticiel

Les principales extensions de l'API ont été résumées précédemment. Les extensions suivantes ne joueront leur plus grand rôle que lors d'occasions spéciales. Jetons-y un bref coup d'œil ici. Les fonctionnalités suivantes ne sont pas prises en charge par IE sans exception. La mise en cache des applications et la messagerie côté serveur sont prises en charge dans d'autres principaux navigateurs. Les notifications sur le bureau ne sont actuellement prises en charge que par Chrome.
Cache d'application
Souvent, nous devons mettre en cache certaines pages qui ne changent pas fréquemment pour améliorer la vitesse d'accès et pour certaines applications, nous souhaitons également pouvoir les utiliser hors ligne ; En HTML5, vous pouvez facilement implémenter ces fonctions grâce à une technologie appelée « mise en cache d'application ».
Dans la mise en œuvre de la mise en cache des applications, HTML5 nous permet de créer un fichier manifeste de 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 manifest dans le html du document :

<.>

Copier le codeLe code est le suivant :

...

Chaque page contenant cet attribut manifeste sera mise en cache lorsque l'utilisateur y accédera. Si l'attribut manifeste n'est pas spécifié, il ne sera pas mis en cache (sauf si la page est spécifiée directement dans le fichier manifeste). Il n'existe pas de norme unifiée pour l'extension du fichier manifeste. L'extension recommandée est « .appcache ».
2. Configurez le type MIME du fichier manifeste côté serveur
Un fichier manifeste doit être pris en charge par le type MIME correct. Ce type de fichier est "text/cache-manifest". Doit être configuré sur le serveur web utilisé. Par exemple : Dans Apache, vous pouvez ajouter : Manifeste AddType text/cache-manifest dans .htaccess.
3. Écrivez un fichier manifeste
Le fichier manifeste est un simple fichier texte qui indique au navigateur quel contenu mettre en cache (ou quel contenu ne pas mettre en cache). Le
fichier manifeste contient les trois sections suivantes :
• CACHE MANIFEST - Les fichiers sous cet en-tête de liste seront mis en cache après le téléchargement.
• RÉSEAU - Les fichiers sous ce titre de liste nécessiteront une connexion au serveur et ne seront pas mis en cache.
• FALLBACK - Affiche une page spécifique si les fichiers sous ce titre de liste sont inaccessibles.
Un fichier complet est présenté dans l'exemple ci-dessous :

Copiez le codeLe code est le suivant :

CACHE MANIFEST
#2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
RÉSEAU :
login. asp
FALLBACK :
/html5/ /offline.html

Conseil :
# commence par un commentaire.
* peut être utilisé pour représenter toutes les autres ressources ou fichiers. Par exemple :

Copier le codeLe code est le suivant :

RÉSEAU :
*

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 en cache sauf si ce qui suit se produit :
• L'utilisateur supprime le cache
• Le fichier manifeste est modifié
• L'application le cache est modifié par le programme
Ainsi, une fois le fichier mis en cache, sauf modifications humaines, le navigateur continuera d'afficher le contenu de la version mise en cache, même si vous modifiez le fichier du serveur. Pour que le navigateur mette à jour le cache, vous pouvez uniquement modifier le fichier manifeste.
 : Les lignes commençant par "#" sont des lignes de commentaires, mais peuvent être utilisées à d'autres fins. Si votre modification implique uniquement une image ou une fonction JavaScript, ces modifications ne seront pas remises en cache. Mettre à jour la date et la version dans les commentaires est un moyen pour que le navigateur remette en cache votre fichier
 : les navigateurs peuvent avoir de nombreuses limites de taille différentes pour les données mises en cache (certains navigateurs autorisent 5 M de données mises en cache).

Copier le codeLe code est le suivant :

Message du serveur< ; /strong>
Un autre scénario couramment utilisé est le suivant : lorsque les données sur le serveur changent, comment en informer le client ? Cela se faisait dans le passé : la page prenait l'initiative d'interroger le serveur pour obtenir des mises à jour. D'après l'introduction précédente, nous savons qu'une communication bidirectionnelle peut être réalisée à l'aide de WebSocket. Nous introduisons ici une autre nouvelle fonctionnalité dans HTML5 : les événements envoyés par le serveur.
En HTML5, l'objet porteur de cette fonctionnalité est l'objet EventSource.
Les étapes sont les suivantes :
1. Vérifiez la prise en charge par le navigateur de l'objet EventSource :

Copier le code

Le code est le suivant :

if(typeof(EventSource) !== "undefined")
{
// Oui ! Prise en charge des événements envoyés par le serveur
// Du code.....
}else {
// Désolé ! prise en charge des événements envoyés par le serveur..
}

2. Code d'envoi de message côté serveur
L'envoi de message de mise à jour côté serveur est très simple : après avoir défini les informations d'en-tête de type de contenu sur "text/event-stream" , vous pouvez envoyer l'événement. Prenons comme exemple le code ASP :

Copiez le code

Le code est le suivant :

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: >> Heure du serveur" & now() )
Réponse. Flush()
%>

3. Code de réception de message côté navigateur

Copier le code

Le code est le suivant :

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

Description du code :
• Créer un objet EventSource et spécifiez l'URL de la page pour envoyer les mises à jour (voici demo_see.jsp)
• Chaque fois qu'une mise à jour est reçue, l'événement onmessage est déclenché
• Lorsque l'heure onmessage est déclenchée, les données obtenues sont définies sur l'élément avec id="result"
L'objet EventSource s'ajoute à l'événement onmessage. De plus, il existe des événements onerror pour le traitement des erreurs, des événements onopen pour l'établissement de la connexion, etc.
Notification sur le bureau - fonctionnalité quasi-HTML5
La fonction de notification sur le bureau permet au navigateur d'avertir les utilisateurs des messages même lorsqu'ils sont réduits. C'est la combinaison la plus naturelle avec WebIM. Cependant, le seul navigateur qui prend actuellement en charge cette fonctionnalité est Chrome. Les fenêtres pop-up sont quelque chose que tout le monde déteste, donc l'activation de cette fonctionnalité nécessite l'autorisation de l'utilisateur.

Copier le code

Le code est le suivant :

<script> >function RequestPermission (callback) { <br>window.webkitNotifications.requestPermission(callback); <br>} <br>function showNotification() { <br>//Déterminez si le navigateur prend en charge la notification via window.webkitNotifications <br>if (!! window.webkitNotifications) { <br>if (window.webkitNotifications.checkPermission() > 0) { <br>RequestPermission(showNotification) <br>} else { <br>var notification =window.webkitNotifications.createNotification); ("[ imgurl]","Titre","Corps"); <br>notification.ondisplay = function() { <br>setTimeout('notification.cancel()', 5000 <br>} <br>); notification.show (); <br>} <br>} <br>} <br></script>

Ouvrez cette page dans le navigateur et vous verrez une fenêtre contextuelle message dans le coin inférieur droit du bureau. Fenêtre de message de 5 secondes.
Cette fonctionnalité est très simple à utiliser, mais pendant le fonctionnement réel, l'interférence de la fonction de notification avec l'utilisateur doit être minimisée et l'apparition 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 possède une propriété appelée "replaceId". Après avoir spécifié cet attribut, tant qu'une fenêtre de notification avec le même replaceId apparaît, la fenêtre contextuelle précédente sera écrasée. Dans le projet réel, toutes les fenêtres contextuelles se voient attribuer le même replaceId. Cependant, il convient de noter que ce comportement d'écrasement n'est valable que dans le même domaine.
2. Lorsque l'utilisateur est sur la page où la messagerie instantanée apparaît (la page est en état Focus), aucune notification n'apparaîtra
Ce problème consiste principalement à déterminer si la fenêtre du navigateur est actuellement en état Focus ; en plus de surveiller la mise au point et le flou de la fenêtre. Hormis l'incident, il ne semble pas y avoir de meilleur moyen. Dans le projet, cette méthode est utilisée pour enregistrer l'état Focus de la fenêtre, puis lorsque le message arrive, il est jugé s'il faut ouvrir la fenêtre en fonction de l'état Focus.

Copier le codeLe code est le suivant :

$(window).bind ( 'flou', this.windowBlur).bind( 'focus', this.windowFocus
Ce qu'il faut noter lors de l'utilisation de cette méthode, c'est que le point d'inscription à l'événement doit être le plus tôt possible. Si l'inscription est trop tardive, il sera facile de mal évaluer le statut lorsque l'utilisateur ouvrira la page, puis. feuilles.
3. Lorsque l'utilisateur utilise plusieurs onglets pour ouvrir plusieurs pages avec la messagerie instantanée, aucune notification n'apparaîtra tant qu'une page est dans l'état Focus ;
Le partage d'état entre plusieurs pages peut être réalisé via le stockage local :
• Lorsque la fenêtre du navigateur est Focus, modifiez la valeur de la clé spécifiée dans le stockage local pour "focus"
• Lorsque la fenêtre du navigateur est Flou, modifiez la valeur de la clé spécifiée dans le stockage local pour "flou" .
Il convient de noter que lors du passage d'un onglet à un autre dans Chrome, le flou peut être écrit dans le stockage après le Focus, un traitement asynchrone est donc requis lors de la modification de l'état du Focus.

Copier le code

Le code est le suivant :

/*fenêtre sur l'événement focus */
//Le délai est utilisé pour résoudre le problème de toujours laisser Focus couvrir l'événement Flou des autres onglets lors du basculement entre plusieurs onglets
//Remarque : S'il n'y a pas de Focus sur le document avant de cliquer sur Tab, cliquer sur Tab ne déclenchera pas
setTimeout( function(){
Storage.setItem( 'kxchat_focus_win_state', 'focus' );
}, 100);
/*window on Blur event*/
Storage.setItem( 'kxchat_focus_win_state', 'blur' );

Après avoir réalisé 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 flou. Si la fenêtre contextuelle est uniquement destinée au flou.
4. Comment permettre aux utilisateurs de cliquer sur la couche flottante de notification pour localiser une fenêtre de discussion spécifique
La fenêtre de notification prend en charge les réponses onclick et autres événements, et la portée de la fonction de réponse appartient à la page qui a créé la fenêtre. . Le code suivant :

Copier le code

Le code est le suivant :

var n = dn.createNotification (
img,
title,
content
);
//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 fait apparaître la fenêtre de notification
window.focus(
//Ouvrez la fenêtre de messagerie instantanée
WM.openWinByID( data ) ;
//Fermer la fenêtre de notification
n.cancel();
}

L'objet fenêtre accédé dans la fonction de réponse onclick appartient à la page actuellement créée, donc il est facile d'interagir avec la page actuelle. Le code ci-dessus réalise que cliquer sur la fenêtre contextuelle passera à la fenêtre du navigateur correspondante et ouvrira la fenêtre de messagerie instantanée.
 : Les événements associés sur la page ont souvent un timing incertain, notre code doit donc essayer de ne pas supposer que l'ordre dans lequel certains événements sont déclenchés est certain. Par exemple, les événements de flou et de mise au point 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/