As principais extensões da API foram resumidas anteriormente. As seguintes extensões apenas desempenharão o maior papel em ocasiões dedicadas. Vamos dar uma breve olhada aqui. Sem exceção, o IE não suporta os seguintes recursos. Cache do aplicativo e mensagem do servidor são suportados em outros navegadores convencionais. Atualmente, as notificações de desktop são suportadas apenas pelo Chrome.
Cache do aplicativoMuitas vezes, precisamos armazenar em cache algumas páginas que não são alteradas com frequência para melhorar a velocidade de acesso; E para algumas aplicações, também esperamos usá -las offline. No HTML5, você pode implementar facilmente essas funções por meio de uma tecnologia chamada Cache de Aplicativos.
Na implementação do cache do aplicativo, o HTML5 nos permite criar um arquivo de manifesto em cache para gerar facilmente uma versão offline do aplicativo.
Etapas de implementação :1. Ativar cache de página, é muito simples. Você só precisa incluir o atributo manifesto no HTML do documento:
<! Doctype html>
<html manifest = "Demo.appcache">
...
</html>
Cada página que contém esse atributo de manifesto será armazenada em cache quando o usuário o acessar. Se a propriedade Manifest não for especificada, ela não será armazenada em cache (a menos que a página da Web seja especificada diretamente no arquivo de manifesto). Não existe um padrão unificado para a extensão do arquivo de manifesto, e a extensão recomendada é .Appcache.
2. Configure o tipo MIME do arquivo manifesto no lado do servidor
Um arquivo de manifesto precisa ser suportado pelo tipo MIME correto, que é o texto/manifesto de texto/cache. Ele deve ser configurado no servidor da web usado. Por exemplo: no Apache, você pode adicionar: Manifesto AddType Text/Cache-manifest no .htaccess.
3. Escreva o arquivo de manifesto
O arquivo de manifesto é um arquivo de texto simples que informa ao navegador o que cache (ou o que armazenar em cache).
O arquivo de manifesto contém as três partes a seguir:
• Manifesto de cache - os arquivos sob este título da lista serão armazenados em cache após o download.
• Rede - o arquivo sob este título da lista exigirá conexão com o servidor e não será armazenado em cache.
• Fallback - exibe uma página específica se o arquivo sob este título da lista não estiver acessível.
O arquivo completo é mostrado no exemplo a seguir:
Manifesto de cache
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/Main.JS
REDE:
login.asp
CAIR PRA TRÁS:
/html5 //offline.html
dica:
Comentários representativos começando com #.
* Pode ser usado para representar todos os outros recursos ou arquivos. Por exemplo:
REDE:
*
Isso significa que todos os recursos ou arquivos não serão armazenados em cache.
4. Atualize o cache
Depois que um aplicativo estiver em cache, ele permanecerá em cache, a menos que ocorra a seguinte situação:
• O usuário excluiu o cache
• O arquivo de manifesto é modificado
• O cache do aplicativo é modificado pelo programa
Portanto, uma vez que o arquivo estiver em cache, além das modificações artificiais, o navegador continuará exibindo o conteúdo da versão em cache, mesmo se você modificar o arquivo do servidor. Para fazer com que o navegador atualize o cache, você só pode modificar o arquivo de manifesto.
: A linha que começa com # é uma linha de comentários, mas pode ter outros usos. Se sua modificação envolver apenas uma função de imagem ou javascript, essas alterações não serão recuperadas. Datas de atualização e versões nos comentários é uma maneira de fazer com que seu navegador recupere seus arquivos
: Os navegadores podem ter muitos dados em cache com limites de tamanho diferentes (alguns navegadores permitem dados em cache de 5m).
<strong> Mensagem do servidor </strong>
Outro cenário comum é: quando os dados do servidor mudam, como informar o cliente? Essa foi a prática anterior: a página verifica ativamente se há atualizações no servidor. De acordo com a introdução anterior, sabemos que o uso do WebSocket pode obter uma comunicação bidirecional. Aqui, apresentamos outro novo recurso em eventos HTML5: Server-Insent.
No HTML5, o objeto que hospeda esse recurso é o objeto Eventsource.
As etapas para uso são as seguintes:
1. Verifique o apoio do navegador para os objetos do EventSource, todos sabem disso:
if (typeof (eventsource)! == "indefinido")
{
// Sim! Suporte de eventos enviados ao servidor!
// Algum código ...
}outro {
// Desculpe! Não há suporte para eventos enviados ao servidor ..
}
2. Código de mensagem de envio do lado do servidor
O envio de mensagens de atualização do lado do servidor é muito simples: depois de definir as informações do cabeçalho do tipo conteúdo para texto/fluxo de eventos, você pode enviar eventos. Tome o código ASP como exemplo:
<%
Response.ContentType = "Text/Event-Stream"
Response.Expires = -1
Response.Write ("Dados: >> Hora do servidor" & agora ())
Response.flush ()
%>
3. Receba o código da mensagem no lado do navegador
VAR Source = new Eventsource ("Demo_Sse.php");
fonte.onmessage = function (evento) {
document.getElementById ("Result"). Innerhtml+= event.data+"
";
};
Descrição do código:
• Crie um objeto Eventsource, especificando o URL da página para enviar atualizações (aqui está Demo_see.jsp)
• Depois que cada atualização é recebida, o evento OnMessage é acionado
• Quando o tempo de onMessage for acionado, defina os dados resultantes para o elemento com id = resultado
Além do evento OnMessage, o objeto Eventsource também lida com os eventos do OnError, os eventos do ONOPEN estabelecidos por conexões, etc.
Notificações da área de trabalho - Recursos quase -html5O recurso de notificação de desktop permite que o navegador notifique os usuários das mensagens, mesmo que minimize o status. Esta é a combinação mais natural com o Webim. No entanto, atualmente apenas o Chrome é o navegador que suporta esse recurso. As janelas pop-up são algo que todo mundo odeia, então você precisa obter a permissão do usuário para ativar esse recurso.
<Cript>
função requestPermission (retorno de chamada) {
window.webkitNotifications.RequestPermission (retorno de chamada);
}
Função mostradatificação () {
// termo se o navegador suporta notificação através da Window.WebkitNotificações
if (!! window.webkitnotificações) {
if (window.webkitNotifications.CheckPermission ()> 0) {
RequestPermission (mostradotificação);
} outro {
var notification = window.webkitNotifications.createnotification ("[imgurl]", "title", "body");
notificação.ondisplay = function () {
setTimeout ('notification.cancel ()', 5000);
}
notificação.Show ();
}
}
}
</script>
Abra esta página no seu navegador e você verá uma janela de mensagem que dura 5 segundos aparecendo no canto inferior direito da área de trabalho.
Esse recurso é muito simples de usar, mas na operação real, a interferência da função de notificação nos usuários deve ser minimizada e a ocorrência da função de notificação deve ser minimizada.
Aqui estão algumas experiências de especialistas on -line para fazer este aplicativo :1. Verifique se apenas uma notificação aparece quando várias mensagens são recebidas;
Esse problema é mais fácil de resolver, porque o objeto de notificação possui uma propriedade chamada substituta. Depois de especificar esta propriedade, desde que a janela de notificação com o mesmo substituto substituir, ela substituirá a janela apareceu anteriormente. No projeto real, todas as janelas pop-up são atribuídas um substituto idêntico. No entanto, deve -se notar que esse comportamento de cobertura é válido apenas no mesmo domínio.
2. Quando o usuário estiver na página em que o IM aparece (a página está no estado de foco), não haverá notificação;
Esse problema é determinar principalmente se a janela do navegador está no estado de foco. Atualmente, parece não haver melhor maneira de monitorar os eventos ONFOCUS e ONBLUR da janela. No projeto, dessa maneira é usada para gravar o status de foco da janela e, em seguida, determinar se a janela pop-up é baseada no status do foco quando a mensagem chegar.
$ (janela) .bind ('Blur', this.windowblur) .bind ('focus', this.windowfocus);
O que você precisa prestar atenção ao usar esse método é que o ponto de registro de eventos deve ser o mais alto possível. Se o registro for tarde demais, é fácil causar erro de julgamento quando o usuário abre a página e sai.
3. Quando um usuário usa várias guias para abrir várias páginas com IM, nenhuma notificação aparecerá enquanto uma página estiver no estado de foco;
O compartilhamento de estado entre várias páginas pode ser alcançado através do armazenamento local:
• Ao se concentrar na janela do navegador, modifique o valor da chave especificada no armazenamento local para se concentrar.
• Quando a janela do navegador Blur é modificada para modificar o valor da chave especificada no armazenamento local para desfocar.
Deve -se notar que, ao alternar de uma guia para outra no Chrome, o Blur pode ser gravado para armazenamento mais do que foco, por isso requer processamento assíncrono ao modificar o estado de foco.
/*Evento de foco na janela*/
// O uso do uso é resolver o problema de alternar entre várias guias, sempre deixe o foco substituir o evento Blur de outras guias.
// Nota: Se você não se concentrar no documento antes de clicar na guia, clicar na guia não acionará o foco.
setTimeout (function () {
Storage.setItem ('kxchat_focus_win_state', 'focus');
}, 100);
/*Janela no evento Blur*/
Storage.setItem ('kxchat_focus_win_state', 'Blur');
Após a implementação do compartilhamento de estado acima, após a chegada da nova mensagem, você só precisa verificar se o valor de 'kxchat_focus_win_state' no armazenamento local é borrão e, se estiver borrão, a janela pop-up será exibida.
4. Como permitir que os usuários cliquem na camada flutuante de notificação para localizar janelas de bate -papo específicas
A janela de notificação suporta respostas de eventos como OnClick e o escopo da função na função de resposta pertence à página em que a janela foi criada. O seguinte código:
var n = dn.createnotification (
img,
título,
contente
);
// Verifique se há apenas um lembrete
n.replaceId = this.replaceId;
n.OnClick = function () {
// Ative a janela do navegador que aparece na janela de notificação
window.focus ();
// Abra a janela IM
Wm.openwinbyId (dados);
// Fechar a janela de notificação
N.Cancel ();
};
O objeto de janela acessado na função de resposta onclick pertence à página criada atualmente, para que possa interagir facilmente com a página atual. O código acima implementa que clicar na janela pop-up pulará para a janela do navegador correspondente e abrirá a janela IM.
: Os eventos relacionados na página são frequentemente séries indefinidamente, então nosso código tenta não assumir que a ordem de desencadear certos eventos é certa. Por exemplo, os eventos do Blur e Focus acima
Referência prática:Documento oficial: http://www.w3schools.com/html5/
Um tutorial chinês para html5: http://www.gbin1.com/tutorials/html5-tutorial/