Sobes.tech
Интервью Жардам
Ресурстар
Интервьюга даярдоо
Ресурстар
Жумуш издөө
Ресурстар
Юридикалык
Суроолорго кайтуу
Middle

HTML5'те колдонмо кэши эмне?

sobes.tech AI

AIден жооп

Кушумча кэш (Application Cache) HTML5-де механизм болуп саналат, ал веб-колдонмого офлайн иштөө мүмкүнчүлүгүн берет, браузер жергиликтүү сактагычта ресурстарды (HTML баракчалар, CSS, JavaScript, сүрөттөр) сактайт.

Колдонмо кэшин колдонуу үчүн .appcache кеңейтүүсү менен манифест файл керек, ал HTML баракчасы менен <html> тегинин manifest атрибуту аркылуу байланыштырылат:

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

Манифест файлынын түзүмү төмөндөгүчө:

CACHE MANIFEST
# Манифесттин версиясы (опционалдуу, кэшти жаңыртуу үчүн)
# v1.0

CACHE:
# Ачык кэшке алынган ресурстар
/css/style.css
/js/script.js
/images/logo.png

FALLBACK:
# Байланыш жок учурда резервдик ресурстар
/offline.html /

NETWORK:
# Ар дайым желиден талап кылынган ресурстар
*

Манифесттин негизги бөлүмдөрү:

  • CACHE:: Бул бөлүмдө көрсөтүлгөн ресурстар биринчи баракча жүктөлгөндөн кийин кэшке алынып, сакталат.
  • FALLBACK:: Бул бөлүм резервдик ресурстарды аныктайт. Эгер негизги ресурска суроо-талап ишке ашпаса, браузер көрсөтүлгөн резервдик ресурсты жүктөйт. Форматы: негизги_ресурс резервдик_ресурс.
  • NETWORK:: Бул бөлүмдө көрсөтүлгөн ресурстар эч качан кэшке алынбайт жана дайыма желиден талап кылынат. * символу бардык ресурстарды билдирет, башка бөлүмдөрдө көрсөтүлбөгөн ресурстар да.

Кэш жаңыртуу манифест файлы өзгөргөндө болот. Браузер жаңыланган манифестти жүктөп, аны учурдагы менен салыштырып, жаңы же өзгөртүлгөн ресурстарды алат. Жаңы файлдар гана кайра жүктөө аркылуу жеткиликтүү болот.

Кэшке байланышкан иш-чаралар:

  • checking: Браузер жаңы версия бар-жогун текшерет.
  • downloading: Браузер жаңы версиядагы ресурстарды жүктөйт.
  • progress: Жүктөө процесси.
  • updateready: Жаңы кэш даяр, колдонууга даяр. Баракчаны кайра жүктөө керек.
  • cached: Ресурстар биринчи жолу ийгиликтүү кэшке алынды.
  • noupdate: Манифест өзгөргөн жок.
  • error: Жүктөөдө же жаңылоодо ката болду.

API window.applicationCache аркылуу жеткиликтүү:

// Кэштин абалын текшерүү
console.log(window.applicationCache.status);

// updateready иш-чарасын иштетүү
window.applicationCache.addEventListener('updateready', function() {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    // Жаңы версияны колдонуу жана баракчаны кайра жүктөө
    window.applicationCache.swapCache();
    window.location.reload();
  }
}, false);

Application Cache офлайн мүмкүнчүлүктөрдү камсыздаса да, анын колдонулушу сунушталбайт, анткени башкаруу кыйынчылыктарын, жаңылоодо көйгөйлөрдү жана ийкемдүүлүктүн жетишпегендигин жаратат. Заманауи ыкмалар — Service Workers — офлайн жеткиликтүүлүк жана башка функциялар үчүн колдонулат.

МурункуКийинки