Sobes.tech
Middle

Ինչ է HTML5-ում ծրագրի կեշը։

sobes.tech AI

Պատասխան AI-ից

Հավելվածի կեշը (Application Cache) HTML5-ում մեխանիզմ է, որը թույլ է տալիս վեբ հավելվածին աշխատել օֆլայն, տրամադրելով ռեսուրսների հավաքածու (HTML էջեր, CSS, JavaScript, պատկերներ), որոնք բրաուզերը կեշավորում է տեղական մակարդակում:

Հավելվածի կեշը օգտագործելու համար անհրաժեշտ է .appcache ընդլայնմամբ մանიფեստային ֆայլ, որը կապվում է HTML էջի հետ manifestատրիբուտի միջոցով <html> թեգում:

<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՝ օֆլայն հասանելիության և այլ առաջադեմ ֆունկցիաների համար։