Новости
Незважаючи на велику кількість в HTML5 функцій, які не особливо допомагають нам в прагненні до адаптивності (наприклад, API-інтерфейс Geolocation), автономні вебпріложеній потенційно здатні нам в цьому допомогти. Оскільки ми знаємо, що кількість мобільних користувачів, які, ймовірно, будуть відвідувати наші сайти, стає дедалі більше, потрібно забезпечити для них можливість переглядати вміст сайтів навіть при відсутності підключення до Інтернету. Автономні додатки HTML5 призначені саме для цього.
Очевидно, що функціональність у вигляді можливості роботи в автономному режимі як не можна краще підходить для веб-додатків. Уявіть онлайнове веб-додаток для створення заміток. Користувач може встигнути написати тільки половину замітки до того, як розірветься з'єднання його мобільного телефону з Інтернетом. Завдяки автономним веб-додатків HTML5 користувачі, які зіткнулися з такою ситуацією, зможуть продовжити писати свої нотатки, а дані можна буде відправити пізніше, як тільки відновиться з'єднання з Інтернетом.
Чудова особливість автономних веб-додатків HTML5 полягає в тому, що їх легко конфігурувати і використовувати. Тут ми задіємо їх загальним шляхом - для створення автономної версії нашого сайту. Це означає, що якщо користувач захоче поглянути на сайт за відсутності підключення до Інтернету, то він зможе зробити це.
Коротенько про автономних веб-додатках.
Автономні веб-додатки працюють таким чином: кожна сторінка, яка повинна бути доступна в автономному режимі, вказує на текстовий файл з розширенням. manifest. У ньому міститься перелік всіх ресурсів (HTML, зображення, JavaScript і т. Д.), Необхідних сторінці для того, щоб вона була доступна в автономному режимі. Браузери з підтримкою автономних веб-додатків HTML5 (Firefox версії 3 і вище, Chrome версії 4 і вище, Safari версії 4 і вище, Opera версії 10.6 і вище, iOS версії 3.2 і вище, Opera Mobile версії 11 і вище, Android версії 2.1 і вище, Internet Explorer версії 10 і вище) зчитують файл з розширенням. manifest, завантажують наведені в ньому ресурси і кешують їх локально на той випадок, якщо з'єднання з Інтернетом буде розірвано. Все просто, чи не так? Зробимо це.
Робимо веб-сторінки доступними в автономному режимі.
У відкриваючому тезі <html> ми вказуємо на файл з розширенням. manifest:
<Html lang = "en" manifest = "/ offline. Manifest">
Можете привласнити цього файлу будь-яке ім'я на свій розсуд, проте рекомендується, щоб у нього було файлове розширення. manifest.
ПОРАДА:
Вам буде потрібно додати атрибут manifest = "/ offline. Mamfest" в тег <html> кожної сторінки, яка повинна бути доступна в автономному режимі.
Якщо вашим веб-сервером є Apache, то вам, швидше за все, буде потрібно додати в файл. htaccess наступний рядок:
AddType text / cache-manifest. manifest
В результаті цього файл отримає коректний тип MIME, яким є text / cache-manifest.
Поки відкритий файл. htaccess, додайте в нього наступні рядки:
<Files offline. manifest>
ExpiresActive On ExpiresDefault "access"
</ Files>
Цим ви зробите так, що браузер більше не буде кешувати кеш. Так, ви все правильно прочитали. Оскільки файл offline. manifest є статичним, браузер за замовчуванням буде його кешувати. Таким чином, попередній код дає команду сервера «сказати» браузеру, щоб він цього не робив!
Тепер необхідно написати файл offline. manifest. Він буде інформувати браузер про те, які файли слід зробити доступними в автономному режимі. Ось вміст файлу offline. manifest для сайту And the winner is not .:
CACHE MANIFEST # версія 1
CACHE:
Basic_page_layout_ch4.html
Css / main. css
Img / atwiNavBg. png
Img / kingHong. jpg
Img / midnightRun. jpg
Img / moulinRouge. jpg
Img / oscar. png
Img / wyattEarp. jpg
Img / buntingSlice3Invert. png
Img / buntingSlice3.png
NETWORK:
*
FALLBACK:
/ / Offline. html
Поняття файлу маніфесту
Файл маніфесту повинен починатися з CACHE MANIFEST. Наступний рядок являє собою всього лише коментар, в якому вказується номер версії файлу маніфесту. Незабаром ми поговоримо про це докладніше.
У розділі CACHE: наводиться перелік файлів, які повинні бути доступні в автономному режимі. Вони повинні відповідати тим файлам, що згадуються в offline. manifest, тому вам може знадобитися змінити шляху в залежності від того, які ресурси слід кешувати. При необхідності також можна використовувати абсолютні URL-адреси.
У розділі NETWORK: наводиться список всіх ресурсів, які не повинні кешуватися. Вважайте його «білим онлайн-списком». Все, що в ньому перераховано, завжди буде проходити повз кеша при наявності підключення до мережі. Якщо ви хочете зробити вміст свого сайту доступним там, де можливе підключення до Інтернету (замість того щоб звертатися виключно до автономного кешу), то в цьому вам допоможе символ *. Він називається підстановлювальний прапором білого онлайн-списку.
У розділі FALLBACK: для визначення URL-шаблону використовується символ /. По суті, тут задається питання: «Ця сторінка в кеші?» Якщо з'ясується, що сторінка там, то відмінно - вона буде відображена. В іншому випадку користувач побачить вказаний файл - offline. html.
Автоматичне додавання сторінок в кеш.
Залежно від обставин можливе застосування ще більш легкого способу конфігурації файлу offline. manifest. Будь-яка сторінка, яка вказує на цей файл (як ви пам'ятаєте, для цього необхідно додати manifest = "/ offline. Manifest" в відкриває тег <html>), буде автоматично додаватися в кеш, коли користувач відвідає її. Завдяки такому підходу кожна сторінка вашого сайту, на яку заходить користувач, буде додаватися в його кеш, щоб він зміг знову відвідати її в автономному режимі. Ось як має виглядати вміст файлу маніфесту:
CACHE MANIFEST.
# Маніфест кешу, версія 1 FALLBACK:
/ / Offline. html NETWORK:
*
При виборі цього підходу слід мати на увазі, що завантажуватися і кешуватися буде тільки HTML-код відвідуваною сторінки. Однак цього не буде відбуватися з зображеннями / JavaScript-кодом та іншими ресурсами, які вона може містити або з якими може бути пов'язана. Якщо вони важливі для вас, то вкажіть їх в CACHE: як уже описувалося раніше в розділі «Поняття файлу маніфесту».
Про коментарі з зазначенням номера версії.
При внесенні змін до сайт вам доведеться так чи інакше змінити файл offline. manifest і заново вивантажити його. В результаті цього сервер зможе надати нову версію файлу браузеру, який потім витягне нові версії інших відповідних файлів і знову почне автономний процес. Я дотримуюся наприклад Ніка Пілгріму (Nick Pilgrim) (з відмінною книги Dive into HTML5 ( «Занурення в HTML5»)) і додаю в верхню частину файлу offl ine. manifest коментар із зазначенням номера версії, який буде збільшуватися з кожним внесенням змін:
# Маніфест кешу, версія 1
Перегляд сайту в автономному режимі.
Тепер прийшов час протестувати наше творіння. Відкрийте сторінку в браузері, сумісному з автономними веб-додатками (малюнок 4.10). Одні браузери будуть видавати попередження щодо автономного режиму (наприклад, Firefox - зверніть увагу на розташовану вгорі рядок), в той час як інші, наприклад Chrome, ніяк про нього не згадано.
Сторінка сайту And the winner is not ....
А тепер постинаєте Інтернет (ну, тобто відключіть WiFi - просто це звучить не так драматично, як «постинаєте») і обновіть сторінку в браузері. Слід сподіватися, що після цього вона буде виглядати так само, як і при наявності з'єднання з Інтернетом.
Вирішення проблем автономними веб-додатками.
Коли у мене виникають проблеми з тим, щоб змусити сайти коректно працювати в автономному режимі, для усунення неполадок я вважаю за краще використовувати браузер Chrome (рисунок 4.11). Вбудовані в нього інструменти розробника включають зручний розділ Console (Консоль) (щоб відкрити його, клацніть на значку із зображенням гайкового ключа праворуч від адресного рядка, а потім виберіть Tools> Developer Tools (Інструменти> Інструменти розробника) і перейдіть на вкладку Console (Консоль) ). У цьому розділі можна дізнатися про успіхи та невдачі в роботі автономного кешу і часто відзначається, що ви робите неправильно. З власного досвіду можу сказати, що зазвичай проблеми пов'язані зі шляхами, наприклад, для сторінок не вказано коректне розташування файлу маніфесту.
Перевірка роботи сайту в браузері Chrome
Повну специфікацію автономних веб-додатків ви зможете відшукати за такою адресою: http: // dev. w3.org/html5/spec/Overview. html # offiine .
Резюме ..
У цьому розділі ми розглянули всі, починаючи з основ створення сторінок, які зможуть пройти валідацію на предмет відповідності вимогам HTML5, і закінчуючи забезпеченням роботи сторінок в автономному режимі, коли у користувачів немає можливості підключитися до Інтернету. Крім того, ми поговорили про вкладення мультимедіа (зокрема, відео) в розмітку, а також про те, як адаптувати його до різних за розміром областям перегляду. Ми також розглянули особливості створення семантично насиченого і значимого коду і способи надання допомоги користувачам, які потребують в допоміжних технологіях. Однак наш сайт як і раніше не позбавлений деяких серйозних недоліків. Попросту кажучи, він виглядає досить захудало. Текст на ньому не стилізований, і повністю відсутні такі елементи, як кнопки, які були видимими в оригінальній композиції. До сих пір ми цілком обгрунтовано уникали використання зображень для вирішення цих проблем. Зображення нам просто не потрібні! У наступних розділах ми скористаємося потужністю і гнучкістю CSS3 для створення швидко завантажується і зручного в супроводі адаптивного дизайну.
Вам також можуть бути цікаві такі статті:
Все просто, чи не так?По суті, тут задається питання: «Ця сторінка в кеші?