Las principales extensiones de API se han resumido anteriormente. Las siguientes extensiones solo jugarán el mejor papel en ocasiones dedicadas. Vamos a echar un vistazo breve aquí. Sin excepción, IE no admite las siguientes funciones. El caché de la aplicación y el mensaje del servidor son compatibles con otros navegadores convencionales. Las notificaciones de escritorio actualmente solo son compatibles con Chrome.
Caché de la aplicaciónMuchas veces, necesitamos almacenar en caché algunas páginas que no se cambian con frecuencia para mejorar la velocidad de acceso; Y para algunas aplicaciones, también esperamos usarlas fuera de línea. En HTML5, puede implementar fácilmente estas funciones a través de una tecnología llamada Aplicación en caché.
En la implementación de la caché de la aplicación, HTML5 nos permite crear un archivo manifiesto en caché para generar fácilmente una versión fuera de línea de la aplicación.
Pasos de implementación :1. Habilitar el almacenamiento en caché de la página, es muy simple. Solo necesita incluir el atributo manifiesto en el HTML del documento:
<! Doctype html>
<html manifest = "demo.appcache">
...
</html>
Cada página que contenga este atributo manifiesto se almacenará en caché cuando el usuario lo acceda. Si no se especifica la propiedad manifiesta, no se almacenará en caché (a menos que la página web se especifique directamente en el archivo manifiesto). No hay un estándar unificado para la extensión de archivo manifiesto, y la extensión recomendada es .appcache.
2. Configure el tipo mime del archivo manifiesto en el lado del servidor
Un archivo manifiesto debe ser compatible con el tipo MIME correcto, que es Text/Cache-manifest. Debe configurarse en el servidor web utilizado. Por ejemplo: en Apache, puede agregar: AddType Text/Cache-manifest Manifest en .htaccess.
3. Escribir archivo de manifiesto
El archivo manifiesto es un archivo de texto simple que le dice al navegador qué almacenamiento en caché (o qué almacenar en caché).
El archivo manifiesto contiene las siguientes tres partes:
• Cache Manifest: los archivos del título de esta lista se almacenarán en caché después de la descarga.
• Red: el archivo bajo esta lista requerirá conexión al servidor y no se almacenará en caché.
• Fallback: muestra una página específica si el archivo en esta lista no es accesible.
El archivo completo se muestra en el siguiente ejemplo:
Manifiesto de caché
# 2012-02-21 V1.0.0
/theme.css
/logo.gif
/main.js
RED:
inicio de sesión.asp
RETROCEDER:
/html5 //offline.html
pista:
Comentarios representativos que comienzan con #.
* Se puede usar para representar todos los demás recursos o archivos. Por ejemplo:
RED:
*
Significa que todos los recursos o archivos no se almacenarán en caché.
4. Actualizar el caché
Una vez que se almacena en caché una aplicación, permanecerá en caché a menos que ocurra la siguiente situación:
• El usuario eliminó el caché
• El archivo manifiesto se modifica
• El caché de la aplicación está modificado por el programa
Entonces, una vez que el archivo esté en caché, además de las modificaciones artificiales, el navegador continuará mostrando el contenido de la versión en caché, incluso si modifica el archivo del servidor. Para que el navegador actualice el caché, solo puede modificar el archivo manifiesto.
: La línea que comienza con # es una línea de comentarios, pero puede tener otros usos. Si su modificación solo involucra una imagen o función de JavaScript, esos cambios no serán recached. Actualizar fechas y versiones en comentarios es una forma de hacer que su navegador recacien sus archivos
: Los navegadores pueden tener muchos datos en caché con diferentes límites de tamaño (algunos navegadores permiten 5 m de datos en caché).
<strong> mensaje del servidor </strong>
Otro escenario común es: cuando los datos del servidor cambian, ¿cómo hacer que el cliente sepa? Esta era la práctica anterior: la página verifica activamente si hay actualizaciones en el servidor. Según la introducción anterior, sabemos que el uso de WebSocket puede lograr una comunicación bidireccional. Aquí presentamos otra característica nueva en los eventos HTML5: Servidor-sent.
En HTML5, el objeto que aloja esta característica es el objeto eventsource.
Los pasos para usar son los siguientes:
1. Verifique el soporte del navegador para los objetos de EventSource, todos lo saben:
if (typeof (eventsource)! == "indefinido")
{
// ¡Sí! ¡Soporte de eventos de Servidor-sent!
// algún código ...
}demás {
// ¡Lo siento! No hay soporte de eventos de servidor.
}
2. Código de mensaje de envío del lado del servidor
Enviar mensajes de actualización en el lado del servidor es muy simple: después de configurar la información de encabezado de tipo contenido a texto/transmisión de eventos, puede enviar eventos. Tome el código ASP como ejemplo:
<%
Respuesta.ContentType = "Text/Event-stream"
Respuesta.expires = -1
Response.Write ("Datos: >> Tiempo del servidor" y ahora ())
Respuesta.flush ()
%>
3. Reciba el código de mensaje en el lado del navegador
var fource = new Eventsource ("demo_sse.php");
fuente.onmessage = function (evento) {
document.getElementById ("resultado"). InnerHtml+= Event.Data+"
";
};
Descripción del código:
• Cree un objeto EventSource, especificando la URL de la página para enviar actualizaciones (aquí está Demo_See.jsp)
• Después de recibir cada actualización, se activa el evento OnMessage
• Cuando se active el tiempo de OnMessage, establezca los datos resultantes en el elemento con ID = resultado
Además del evento OnMessage, el objeto EventSource también maneja el error de los eventos de OnError, eventos de Onopen establecidos por conexiones, etc.
Notificaciones de escritorio: características de cuasi -html5La función de notificación de escritorio permite que el navegador notifique a los usuarios de los mensajes, incluso si minimiza el estado. Esta es la combinación más natural con Webim. Sin embargo, actualmente solo Chrome es el navegador que admite esta función. Las ventanas emergentes son algo que todos odian, por lo que debe obtener el permiso del usuario para habilitar esta función.
<script>
función requestpermission (devolución de llamada) {
Window.webkitnotifications.RequestPermission (devolución de llamada);
}
función mostradatotificación () {
// término si el navegador admite notificación a través de Window.webkitnotifications
if (!! window.webkitnotifications) {
if (window.webkitnotifications.checkpermission ()> 0) {
Requestpermission (se muestra entificación);
} demás {
Var notificación = window.webkitnotifications.createNotification ("[imgurl]", "título", "cuerpo");
notificación.ondisplay = function () {
setTimeOut ('notificación.cancel ()', 5000);
}
notificación.show ();
}
}
}
</script>
Abra esta página en su navegador y verá una ventana de mensajes que dura 5 segundos en la esquina inferior derecha del escritorio.
Esta característica es muy simple de usar, pero en la operación real, la interferencia de la función de notificación a los usuarios debe minimizarse y la aparición de la función de notificación debe minimizarse.
Aquí hay algunas experiencias de expertos en línea para hacer esta aplicación :1. Asegúrese de que solo aparezca una notificación cuando se reciban múltiples mensajes;
Este problema es más fácil de resolver porque el objeto de notificación tiene una propiedad llamada Reemplazo. Después de especificar esta propiedad, siempre que aparezca la ventana de notificación con el mismo reemplazo reemplazo, sobrescribirá la ventana previamente aparecida. En el proyecto real, a todas las ventanas emergentes se les asigna un reemplazo idéntico. Sin embargo, debe tenerse en cuenta que este comportamiento de cobertura solo es válido en el mismo dominio.
2. Cuando el usuario está en la página donde aparece el IM (la página está en el estado de enfoque), no habrá notificación;
Este problema es principalmente para determinar si la ventana del navegador está en el estado de enfoque. Actualmente, parece que no hay mejor manera de monitorear los eventos Onfocus y Onblur de la ventana. En el proyecto, de esta manera se utiliza para registrar el estado de enfoque de la ventana y luego determinar si la ventana emergente se basa en el estado de enfoque cuando llega el mensaje.
$ (ventana) .bind ('desenfoque', this.windowblur) .bind ('foco', this.windowfocus);
A lo que debe prestar atención al usar este método es que el punto de registro del evento debe ser lo más alto posible. Si el registro es demasiado tarde, es fácil causar un juicio de estado cuando el usuario abre la página y se va.
3. Cuando un usuario usa múltiples pestañas para abrir varias páginas con IM, no aparecerá una notificación siempre que una página esté en el estado de enfoque;
El intercambio de estado entre varias páginas se puede lograr a través del almacenamiento local:
• Al centrarse en la ventana del navegador, modifique el valor de la tecla especificada en el almacenamiento local para enfocarse.
• Cuando el desenfoque de la ventana del navegador se modifica para modificar el valor de la tecla especificada en el almacenamiento local para difuminar.
Cabe señalar que cuando se cambia de una pestaña a otra en Chrome, se puede escribir un desenfoque para el almacenamiento más que el enfoque, por lo que requiere un procesamiento asíncrono al modificar el estado de enfoque.
/*Evento de Ventana sobre Focus*/
// El retraso de uso es resolver el problema de cambiar entre múltiples pestañas, siempre que el enfoque sobrescriba el evento Blur de otras pestañas.
// Nota: si no se enfoca en el documento antes de hacer clic en la pestaña, hacer clic en la pestaña no activará el enfoque.
setTimeOut (function () {
Storage.SetItem ('KXCHAT_FOCUS_WIN_STATE', 'FOCUS');
}, 100);
/*Ventana en el evento Blur*/
Storage.SetItem ('KXCHAT_FOCUS_WIN_STATE', 'blur');
Después de implementar el intercambio de estado anterior, después de que llegue el nuevo mensaje, solo necesita verificar si el valor de 'kxchat_focus_win_state' en el almacenamiento local es desenfoque, y si es borrosa, la ventana emergente aparecerá.
4. Cómo dejar que los usuarios hagan clic en la capa flotante de notificación para ubicar Windows de chat específicos
La ventana de notificación admite respuestas de eventos como OnClick, y el alcance de la función en la función de respuesta pertenece a la página donde se creó la ventana. El siguiente código:
var n = dn.createnotificación (
img,
título,
contenido
);
// asegúrese de que solo haya un recordatorio
n.replaceId = this.replaceId;
n.OnClick = function () {
// Activar la ventana del navegador que aparece por la ventana de notificación
Window.focus ();
// Abra la ventana IM
Wm.openwinbyid (datos);
// Cerrar la ventana de notificación
n.cancel ();
};
El objeto de la ventana accedido en la función de respuesta OnClick pertenece a la página creada actualmente, por lo que puede interactuar fácilmente con la página actual. El código anterior implementa que hacer clic en la ventana emergente saltará a la ventana del navegador correspondiente y abrirá la ventana IM.
: Los eventos relacionados en la página a menudo son indefinidamente de series de tiempo, por lo que nuestro código intenta no asumir que el orden de activar ciertos eventos es cierto. Por ejemplo, los eventos de desenfoque y desenfoque anteriores
Referencia práctica:Documento oficial: http://www.w3schools.com/html5/
Un tutorial chino para html5: http://www.gbin1.com/tutorials/html5-tutorial/