Основные расширения API были обобщены ранее. Следующие расширения будут играть только наибольшую роль в специальных случаях. Давайте рассмотрим здесь. Без исключения IE не поддерживает следующие функции. Кэш приложений и сообщение сервера поддерживаются в других основных браузерах. Настольные уведомления в настоящее время поддерживаются только Chrome.
Кеш приложенияМного раз нам нужно кэшировать некоторые страницы, которые часто не изменяются, чтобы улучшить скорость доступа; И для некоторых приложений мы также надеемся использовать их в автономном режиме. В HTML5 вы можете легко реализовать эти функции с помощью технологии, называемой кэшированием приложений.
В реализации кеша приложения HTML5 позволяет нам создавать кэшированный манифестный файл для легкости создания автономной версии приложения.
Шаги внедрения :1. Включить кэширование страницы, это очень просто. Вам нужно только включить атрибут Manifest в HTML документа:
<! Doctype html>
<html manifest = "demo.appcache">
...
</html>
Каждая страница, содержащая этот атрибут Manifest, будет кэширована, когда пользователь обращается к нему. Если свойство Manifest не указано, оно не будет кэшировано (если веб -страница не указана напрямую в файле Manifest). Не существует единого стандарта для манифестного расширения файла, а рекомендуемое расширение. Appcache.
2. Настройте тип MIME манифестного файла на стороне сервера
Манифестный файл должен поддерживать правильный тип MIME, который является манифестом текста/кэша. Он должен быть настроен на используемом веб -сервере. Например: в Apache вы можете добавить: AddType Text/Manifest Cache-Manifest в .htaccess.
3. Напишите манифестный файл
Манифестный файл - это простой текстовый файл, который сообщает браузеру, что кешю (или что к кешу).
Манифестный файл содержит следующие три части:
• Манифест кэша - файлы под названием этого списка будут кэшированы после загрузки.
• Сеть - файл в соответствии с заголовком этого списка потребует подключения к серверу и не будет кэширован.
• Sharkback - отображает определенную страницу, если файл под названием этого списка недоступен.
Полный файл показан в следующем примере:
Кэш Манифест
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
СЕТЬ:
Login.asp
ОТСТУПАТЬ:
/html5 / /soffline.html
намекать:
Представительные комментарии, начиная с #.
* Может использоваться для представления всех других ресурсов или файлов. Например:
СЕТЬ:
*
Это означает, что все ресурсы или файлы не будут кэшированы.
4. Обновите кэш
Как только приложение будет кэшировано, оно останется кэшированным, если не произойдет следующая ситуация:
• Пользователь удалил кэш
• Манифестный файл изменен
• Кэш приложения изменяется программой
Таким образом, после того, как файл будет кэширован, в дополнение к искусственным изменениям, браузер будет продолжать отображать содержание кэшированной версии, даже если вы измените файл сервера. Чтобы обновить браузер обновить кэш, вы можете изменить только файл манифеста.
: Линия, начинающаяся с #, является линией комментариев, но она может иметь другие виды использования. Если ваша модификация включает только одно изображение или функцию JavaScript, эти изменения не будут отменены. Даты обновления и версии в комментариях - это способ заставить ваш браузер отремонтировать ваши файлы
: Браузеры могут иметь много кэшированных данных с различными пределами размера (некоторые браузеры позволяют кэшировать 5M).
<strong> Сообщение сервера </strong>
Другой распространенный сценарий: когда данные на сервере меняются, как сообщить клиенту? Это была предыдущая практика: страница активно проверяет, есть ли обновления на сервере. Согласно предыдущему введению, мы знаем, что использование WebSocket может достичь двусторонней связи. Здесь мы представляем еще одну новую функцию в HTML5: серверные события.
В HTML5 объектом, который разнимает эту функцию, является объект Eventorce.
Шаги для использования следующие:
1. Проверьте поддержку браузера для объектов Eventsource, все знают это:
if (typeof (eventsource)! == "Не определено")
{
// Да! Серверная поддержка событий!
// какой -то код ...
}еще {
// Извини! Нет поддержки событий сервера ..
}
2. Серверная отправка кода сообщения
Отправка сообщений обновлений на стороне сервера очень проста: после настройки информации заголовка типа контента на текстовый/трансляционный транспорт, вы можете отправлять события. Возьмите код ASP в качестве примера:
<%
Response.contenttype = "text/stream"
Response.expires = -1
Response.write ("data: >> time server" & now ())
Response.flush ()
%>
3. Получить код сообщения на стороне браузера
var source = new Eventsource ("demo_sse.php");
source.onmessage = function (event) {
document.getElementById ("result"). innerHtml+= event.data+"
";
};
Описание кода:
• Создать объект EventOurce, указав URL -адрес страницы для отправки обновлений (здесь есть demo_see.jsp)
• После получения каждого обновления событие OnMessage запускается
• Когда время onMessage запускается, установите полученные данные в элемент с id = результат
В дополнение к событию Onmessage, объект Eventource также обрабатывает ошибку Onerror события, события OnoPen, установленные соединениями и т. Д.
Уведомления настольных компьютеров - функции Quasi -HTML5Функция уведомления на рабочем столе позволяет браузеру уведомлять пользователей о сообщениях, даже если он минимизирует статус. Это самая естественная комбинация с Webim. Тем не менее, в настоящее время только Chrome является браузером, который поддерживает эту функцию. Всплывающие окна-это то, что все ненавидят, поэтому вам нужно получить разрешение пользователя, чтобы включить эту функцию.
<Скрипт>
функция requestPermission (обратный вызов) {
window.webkitnotifications.requestpermission (обратный вызов);
}
функция shodatotification () {
// Термин, поддерживает ли браузер уведомление через window.webkitnotifications
if (!! window.webkitnotifications) {
if (window.webkitnotifications.checkpermission ()> 0) {
RequestPermission (shodatotification);
} еще {
var notification = window.webkitnotifications.createNotification ("[imgurl]", "title", "body");
уведомление. Aondisplay = function () {
setTimeout ('notification.cancel ()', 5000);
}
уведомление.show ();
}
}
}
</script>
Откройте эту страницу в своем браузере, и вы увидите окно сообщения, которое длится 5 секунд, появляется в правом нижнем углу рабочего стола.
Эта функция очень проста в использовании, но в реальной работе следует минимизировать помехи функции уведомления для пользователей, а возникновение функции уведомления должно быть сведено к минимуму.
Вот несколько опытов онлайн -экспертов в создании этого приложения :1. Убедитесь, что появляется только одно уведомление, когда получено несколько сообщений;
Эту проблему легче решить, поскольку у объекта уведомления есть свойство с именем RepliseID. После указания этого свойства, пока появится окно уведомления с той же заменой, оно будет перезаписать ранее выскоченное окно. В фактическом проекте всем всплывающим окнам назначается идентичная замена. Тем не менее, следует отметить, что это поведение охвата действительнее только в той же области.
2. Когда пользователь находится на странице, где появляется IM (страница находится в состоянии фокуса), уведомления не будет;
Эта проблема в основном для определения того, находится ли окно браузера в состоянии фокуса. В настоящее время, похоже, нет лучшего способа отслеживать события Onfocus и Onblur окна. В проекте этот способ используется для записи состояния фокуса окна, а затем определить, основано ли всплывающее окно на статусе фокуса, когда появится сообщение.
$ (window) .bind ('blur', this.windowblur) .bind ('Focus', this.windowfocus);
При использовании этого метода необходимо обратить внимание на то, что точка регистрации событий должна быть максимально высокой. Если регистрация слишком поздно, легко вызвать неправильное суждение о состоянии, когда пользователь открывает страницу и уходит.
3. Когда пользователь использует несколько вкладок, чтобы открыть несколько страниц с IM, уведомление не появится до тех пор, пока одна страница находится в состоянии фокуса;
Обмен состоянием между несколькими страницами может быть достигнут с помощью местного хранения:
• При сосредоточенности на окне браузера измените значение указанного ключа в локальном хранилище, чтобы сосредоточиться.
• Когда размытие окна браузера изменяется для изменения значения указанного ключа в локальном хранилище для размытия.
Следует отметить, что при переключении с одной вкладки на другую в Chrome Blur может быть записано на хранилище больше, чем фокус, поэтому он требует асинхронной обработки при изменении состояния фокуса.
/*Окно на фокусирующем событии*/
// Использование задержки - это решение проблемы переключения между несколькими вкладками, всегда позволяя фокусировке перезаписать событие размытия других вкладок.
// Примечание. Если вы не фокусируетесь на документе перед нажатием, вкладка «Нажатие» не запускает фокус.
settimeout (function () {
Storage.setitem ('kxchat_focus_win_state', 'Focus');
}, 100);
/*окно на событии размытия*/
Storage.setitem ('kxchat_focus_win_state', 'blur');
После реализации приведенного выше государственного обмена, после появления нового сообщения вам нужно только проверить, является ли значение 'kxchat_focus_win_state' в локальном хранилище размыто, и если оно размыто, всплывающее окно будет всплыть.
4. Как позволить пользователям нажимать на плавающий уведомление, чтобы найти определенные окна чата
Окно уведомления поддерживает ответы событий, такие как OnClick, а объем функции в функции ответа принадлежит странице, где было создано окно. Следующий код:
var n = dn.createNotification (
Img,
заголовок,
содержание
);
// Убедитесь, что есть только одно напоминание
n.replaceid = this.replaceid;
n.onclick = function () {
// активировать окно браузера, которое появляется в окне уведомления
window.focus ();
// Откройте окно IM
Wm.openwinbyid (данные);
// закрыть окно уведомления
N.Cancel ();
};
Объект Window, доступный в функции ответа OnClick, принадлежит к в настоящее время созданной странице, поэтому он может легко взаимодействовать с текущей страницей. Приведенный выше код реализует, что нажатие на всплывающее окно прыгнет в соответствующее окно браузера и откроет окно IM.
: Связанные события на странице часто являются бесконечно временными сериями, поэтому наш код старается не предполагать, что порядок запуска определенных событий является определенным. Например, вышеупомянутые события размытия и фокусировки
Практическая ссылка:Официальный документ: http://www.w3schools.com/html5/
Китайский учебник для HTML5: http://www.gbin1.com/tutorials/html5-tutorial/