Донецкий техникум промышленной автоматики

A Beginner's Guide to Using the Application Cache

  1. Вступ
  2. Файл маніфесту кеша
  3. Звернення до файлу маніфесту
  4. Структура файлу маніфесту
  5. оновлення кешу
  6. статус кеша
  7. події AppCache

Вступ

Все більш важливим для веб-додатків стає доступ в режимі офлайн. Механізми кешування є в кожному браузері, але вони ненадійні і не завжди працюють так, як хотілося б. HTML5 вирішує деякі завдання автономної роботи за допомогою інтерфейсу ApplicationCache .

Використання кеш-інтерфейсу дає додатком три переваги:

  1. пошук в режимі офлайн - користувачі можуть переглядати весь сайт в режимі офлайн;
  2. швидкість - ресурси кешуються локально, тому швидше завантажуються;
  3. зменшення навантаження на сервер - браузер завантажує тільки змінені ресурси.

Кеші програми (AppCache) дозволяє розробнику вказати, які файли браузер повинен кешувати і зробити доступними для автономних користувачів. Додаток буде завантажуватися і працювати коректно, навіть якщо користувач оновить сторінку без підключення до Інтернету.

Файл маніфесту кеша

Файл маніфесту кешу являє собою простий текстовий файл зі списком ресурсів, які браузер повинен кешувати для доступу в автономному режимі.

Звернення до файлу маніфесту

Щоб дозволити кешування додатка, включите атрибут manifest в тег html документа:

<Html manifest = "example.appcache"> ... </ html>

Атрибут manifest повинен бути присутнім на кожній сторінці веб-додатки, яке потрібно кешувати. Браузер не кешируєт сторінку, якщо вона не містить атрибут manifest або не зазначена в самому файлі маніфесту. Це означає, що будь-яка сторінка з атрибутом manifest, яку відвідає користувач, буде неявним чином додана в кеш додатка. Таким чином, перераховувати в маніфесті всі сторінки не потрібно.

Атрибут manifest може вказувати на абсолютний URL або відносний шлях, але абсолютний URL повинен знаходитися в тому ж домені, що і веб-додаток. Файл маніфесту може мати будь-яке розширення, але його MIME-тип повинен бути правильним (див. Нижче).

<Html manifest = "http://www.example.com/example.mf"> ... </ html>

Як MIME-типу для файлу маніфесту необхідно вказувати значення text / cache-manifest. Можливо, в конфігурацію веб-сервера або файл .htaccess доведеться додати користувальницький тип файлу.

Наприклад, щоб налаштувати цей MIME-тип в Apache, додайте в файл конфігурації наступний рядок:

AddType text / cache-manifest .appcache

А для файлу app.yaml в Google App Engine код буде виглядати так:

- url: /mystaticdir/(.*\.appcache) static_files: mystaticdir / \ 1 mime_type: text / cache-manifest upload: mystaticdir / (. * \. Appcache)

Структура файлу маніфесту

Простий файл маніфесту може виглядати приблизно так:

CACHE MANIFEST index.html stylesheet.css images / logo.png scripts / main.js

У цьому прикладі кешуються чотири файли на сторінці, яка вказує на даний файл маніфесту.

Необхідно відзначити кілька моментів.

  • Рядок CACHE MANIFEST є обов'язковою і повинна бути першою.
  • Обсяг кешованих даних для сайтів не може перевищувати 5 МБ. При написанні програм для Інтернет-магазину Chrome це обмеження можна зняти за допомогою атрибута unlimitedStorage.
  • Якщо файл маніфесту або вказаний в ньому ресурс завантажити не вдається, кеш не оновлюється. В цьому випадку браузер продовжує використовувати старий кеш додатка.

Розглянемо більш складний приклад.

CACHE MANIFEST # 2010-06-18: v2 # Explicitly cached 'master entries'. CACHE: /favicon.ico index.html stylesheet.css images / logo.png scripts / main.js # Resources that require the user to be online. NETWORK: login.php / myapi http://api.twitter.com # static.html will be served if main.py is inaccessible # offline.jpg will be served in place of all images in images / large / # offline.html will be served in place of all other .html files FALLBACK: /main.py /static.html images / large / images / offline.jpg * .html /offline.html

Рядки, які починаються з символу #, є коментарями, але можуть служити і для іншої мети. Кеш додатки оновлюється тільки при зміні файлу маніфесту. Це означає, що, наприклад, зміни, внесені в графічний ресурс або функцію JavaScript, повторно не кешуються. Для поновлення кешованих файлів необхідно відредагувати сам файл маніфесту. Щоб у користувачів завжди була остання версія програми, можна створити рядок коментаря з номером версії, хеш-сумою файлів або датою. З появою нової версії кешу можна оновлювати і програмними засобами, як описано в розділі оновлення кешу .

Маніфест може містити три розділи: CACHE, NETWORK і FALLBACK.

CACHE Це розділ для записів за замовчуванням. Файли, зазначені тут (або відразу після атрибута CACHE MANIFEST), будуть кешуватися при першій же завантаженні. NETWORK Файли, зазначені в цьому розділі, є надійні ресурси, яким необхідне підключення до сервера. Всі запити до них йдуть в обхід кеша, навіть якщо користувач знаходиться в режимі офлайн. Тут можна використовувати знаки підстановки. FALLBACK Додатковий розділ, що містить резервні сторінки на випадок, якщо ресурс недоступний. Перший URL вказує ресурс, а другий - його резервну сторінку. Обидва адреси повинні бути відносними і перебувати в тому ж домені, що і файл маніфесту. Тут можна використовувати знаки підстановки.

Примітка. Розділи можуть бути вказані в будь-якому порядку, і кожен з них може зустрічатися в одному маніфесті кілька разів.

Наступний маніфест визначає "універсальні" сторінки (offline.html), які будуть відображатися, якщо користувач намагається отримати доступ до кореневого каталогу сайту в автономному режимі. Він також вказує на те, що всі інші ресурси (наприклад, на віддаленому сайті) вимагають підключення до Інтернету.

CACHE MANIFEST # 2010-06-18: v3 # Explicitly cached entries index.html css / style.css # offline.html will be displayed if the user is offline FALLBACK: / /offline.html # All other resources (eg sites) require the user to be online. NETWORK: * # Additional resources to cache CACHE: images / logo1.png images / logo2.png images / logo3.png

Примітка. HTML-файл, який посилається на ваш файл маніфесту, кешируєтся автоматично. Вказувати його в маніфесті необов'язково, але рекомендується.

Примітка. Маніфести кеша замінюють собою заголовки HTML-кеша і обмеження на кешування сторінок, що обслуговуються через SSL. Це гарантує доступ до сторінок, які обслуговуються по протоколу HTTPS, в режимі офлайн.

оновлення кешу

Офлайн-додаток зберігається в кеші, поки не відбудеться одна з перерахованих нижче подій.

  1. Очищення сховища даних для відповідного сайту в браузері.
  2. Зміни у файлі маніфесту. Зверніть увагу: оновлення файлу, вказаного в маніфесті, не означає, що браузер повторно кешируєт цей ресурс. Для цього повинен змінитися сам файл маніфесту.
  3. Програмне оновлення кешу програми.

статус кеша

Програмний доступ до кешу додатка в браузері забезпечує об'єкт window.applicationCache. Його властивість status дозволяє перевірити поточний стан кешу:

var appCache = window.applicationCache; switch (appCache.status) {case appCache.UNCACHED: // UNCACHED == 0 return 'UNCACHED'; break; case appCache.IDLE: // IDLE == 1 return 'IDLE'; break; case appCache.CHECKING: // CHECKING == 2 return 'CHECKING'; break; case appCache.DOWNLOADING: // DOWNLOADING == 3 return 'DOWNLOADING'; break; case appCache.UPDATEREADY: // UPDATEREADY == 4 return 'UPDATEREADY'; break; case appCache.OBSOLETE: // OBSOLETE == 5 return 'OBSOLETE'; break; default: return 'UKNOWN CACHE STATUS'; break; };

Щоб оновити кеш програмним чином, потрібно перш за все викликати функцію applicationCache.update (). Вона спробує відновити кеш користувача (для цього необхідно, щоб файл маніфесту змінився). Після того як атрибут applicationCache.status перейде в стан UPDATEREADY, функція applicationCache.swapCache () замінить старий кеш на новий.

var appCache = window.applicationCache; appCache.update (); // Attempt to update the user's cache. ... if (appCache.status == window.applicationCache.UPDATEREADY) {appCache.swapCache (); // The fetch was successful, swap in the new cache. }

Примітка. В результаті подібного виклику функцій update () і swapCache () клієнтові не відправляються оновлені ресурси. Ця послідовність просто вказує браузеру, що потрібно перевірити новий маніфест, завантажити вказане оновлене зміст і повторно заповнити кеш додатка. В результаті сторінка завантажується з сервера двічі: вперше заповнюється новий кеш додатка, а в другій - оновлюється зміст сторінки.

Однак подвійний завантаження можна уникнути. Щоб відправляти користувачам нову версію сайту, налаштуйте відстеження події updateready при завантаженні сторінки:

// Check if a new cache is available on page load. window.addEventListener ( 'load', function (e) {window.applicationCache.addEventListener ( 'updateready', function (e) {if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {// Browser downloaded a new app cache. // Swap it in and reload the page to get the new hotness. window.applicationCache.swapCache (); if (confirm ( 'A new version of this site is available. Load it?')) {window.location .reload ();}} else {// Manifest did not changed. Nothing new to server.}}, false);}, false);

події AppCache

Як можна припустити, для контролю за станом кеша використовуються додаткові події. Браузер ініціює їх під час завантаження, при оновленні кешу програми та виникненні помилки. Наведений нижче фрагмент задає прослуховувачі для кожного типу подій кеша.

function handleCacheEvent (e) {// ...} function handleCacheError (e) {alert ( 'Error: Cache failed to update!'); }; // Fired after the first cache of the manifest. appCache.addEventListener ( 'cached', handleCacheEvent, false); // Checking for an update. Always the first event fired in the sequence. appCache.addEventListener ( 'checking', handleCacheEvent, false); // An update was found. The browser is fetching resources. appCache.addEventListener ( 'downloading', handleCacheEvent, false); // The manifest returns 404 or 410, the download failed, // or the manifest changed while the download was in progress. appCache.addEventListener ( 'error', handleCacheError, false); // Fired after the first download of the manifest. appCache.addEventListener ( 'noupdate', handleCacheEvent, false); // Fired if the manifest file returns a 404 or 410. // This results in the application cache being deleted. appCache.addEventListener ( 'obsolete', handleCacheEvent, false); // Fired for each resource listed in the manifest as it is being fetched. appCache.addEventListener ( 'progress', handleCacheEvent, false); // Fired when the manifest resources have been newly redownloaded. appCache.addEventListener ( 'updateready', handleCacheEvent, false);

Якщо файл маніфесту або вказаний в ньому ресурс завантажити не вдається, оновлення не будуть виконуватись. В цьому випадку браузер продовжує використовувати старий кеш додатка.

посилання

Load it?