অ্যাপ্লিকেশন ক্যাশে ব্যবহার করার জন্য একটি শিক্ষানবিস গাইড

ভূমিকা

ওয়েব-ভিত্তিক অ্যাপ্লিকেশনগুলি অফলাইনে অ্যাক্সেসযোগ্য হওয়ার জন্য এটি ক্রমশ গুরুত্বপূর্ণ হয়ে উঠছে। হ্যাঁ, সমস্ত ব্রাউজার দীর্ঘ সময়ের জন্য পৃষ্ঠা এবং সংস্থানগুলি ক্যাশে করতে পারে যদি তা করতে বলা হয় তবে ব্রাউজার অন্য জিনিসগুলির জন্য জায়গা তৈরি করতে যে কোনও সময়ে ক্যাশে থেকে পৃথক আইটেমগুলিকে লাথি দিতে পারে৷ HTML5 অ্যাপ্লিকেশন ক্যাশে ইন্টারফেসের সাথে অফলাইন থাকার কিছু বিরক্তিকর সমাধান করে। ক্যাশে ইন্টারফেস ব্যবহার করে আপনার অ্যাপ্লিকেশন তিনটি সুবিধা দেয়:

  1. অফলাইন ব্রাউজিং - ব্যবহারকারীরা অফলাইনে থাকাকালীন আপনার সম্পূর্ণ সাইট নেভিগেট করতে পারে৷
  2. গতি - সম্পদ সরাসরি ডিস্ক থেকে আসে, নেটওয়ার্কে কোন ট্রিপ নেই।
  3. স্থিতিস্থাপকতা - যদি আপনার সাইট "রক্ষণাবেক্ষণ" এর জন্য নিচে চলে যায় (যেমন, কেউ ঘটনাক্রমে সবকিছু ভেঙে দেয়), আপনার ব্যবহারকারীরা অফলাইন অভিজ্ঞতা পাবেন

অ্যাপ্লিকেশন ক্যাশে (বা AppCache) একজন বিকাশকারীকে নির্দিষ্ট করতে দেয় যে ব্রাউজারটি কোন ফাইলগুলি ক্যাশ করবে এবং অফলাইন ব্যবহারকারীদের জন্য উপলব্ধ করবে৷ আপনার অ্যাপটি লোড হবে এবং সঠিকভাবে কাজ করবে, এমনকি ব্যবহারকারী অফলাইনে থাকাকালীন রিফ্রেশ বোতাম টিপেও।

ক্যাশে ম্যানিফেস্ট ফাইল

ক্যাশে ম্যানিফেস্ট ফাইল হল একটি সাধারণ টেক্সট ফাইল যা অফলাইন অ্যাক্সেসের জন্য ব্রাউজারকে ক্যাশে করা উচিত এমন সংস্থানগুলি তালিকাভুক্ত করে৷

একটি ম্যানিফেস্ট ফাইল উল্লেখ করা

একটি অ্যাপের জন্য অ্যাপ্লিকেশন ক্যাশে সক্ষম করতে, নথির html ট্যাগে ম্যানিফেস্ট বৈশিষ্ট্য অন্তর্ভুক্ত করুন:

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

manifest বৈশিষ্ট্যটি আপনার ওয়েব অ্যাপ্লিকেশনের প্রতিটি পৃষ্ঠায় অন্তর্ভুক্ত করা উচিত যা আপনি ক্যাশে করতে চান৷ ব্রাউজার কোনো পৃষ্ঠাকে ক্যাশে করে না যদি এতে manifest অ্যাট্রিবিউট না থাকে (যদি না এটি স্পষ্টভাবে ম্যানিফেস্ট ফাইলে তালিকাভুক্ত করা হয়। এর মানে হল যে ব্যবহারকারী যে কোনো পৃষ্ঠায় নেভিগেট করে যেটিতে একটি manifest অন্তর্ভুক্ত থাকে তা স্পষ্টভাবে অ্যাপ্লিকেশন ক্যাশে যোগ করা হবে। , আপনার ম্যানিফেস্টে প্রতিটি পৃষ্ঠা তালিকাভুক্ত করার প্রয়োজন নেই যদি একটি পৃষ্ঠা একটি ম্যানিফেস্টের দিকে নির্দেশ করে, তাহলে এই পৃষ্ঠাটিকে ক্যাশে করা প্রতিরোধ করার কোনো উপায় নেই৷

আপনি Chrome-এ প্রায়://://appcache-internals/-এ গিয়ে অ্যাপ্লিকেশন ক্যাশে দ্বারা নিয়ন্ত্রিত urlগুলি দেখতে পারেন৷ এখান থেকে আপনি ক্যাশে সাফ করতে পারেন এবং এন্ট্রি দেখতে পারেন। ফায়ারফক্সে অনুরূপ বিকাশকারী সরঞ্জাম রয়েছে।

manifest অ্যাট্রিবিউট একটি পরম URL বা আপেক্ষিক পাথ নির্দেশ করতে পারে, কিন্তু একটি পরম URL অবশ্যই ওয়েব অ্যাপ্লিকেশনের মতো একই উত্সের অধীনে হতে হবে৷ একটি ম্যানিফেস্ট ফাইলে যেকোনো ফাইল এক্সটেনশন থাকতে পারে, কিন্তু সঠিক মাইম-টাইপ দিয়ে পরিবেশন করা প্রয়োজন (নীচে দেখুন)।

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

একটি ম্যানিফেস্ট ফাইল অবশ্যই মাইম-টাইপ text/cache-manifest সাথে পরিবেশন করা উচিত। আপনাকে আপনার ওয়েব সার্ভারে বা .htaccess কনফিগারেশনে একটি কাস্টম ফাইল টাইপ যোগ করতে হতে পারে।

উদাহরণস্বরূপ, অ্যাপাচিতে এই মাইম-টাইপ পরিবেশন করতে, আপনার কনফিগার ফাইলে এই লাইনটি যোগ করুন:

AddType text/cache-manifest .appcache

অথবা, Google অ্যাপ ইঞ্জিনে আপনার app.yaml ফাইলে:

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

এই প্রয়োজনীয়তাটি কিছু সময় আগে স্পেসিফিকেশন থেকে বাদ দেওয়া হয়েছিল, এবং Chrome, Safari এবং Firefox-এর সর্বশেষ সংস্করণগুলির জন্য আর প্রয়োজন নেই, তবে পুরানো ব্রাউজার এবং IE11-এ কাজ করার জন্য আপনার মাইম-টাইপ প্রয়োজন হবে।

একটি ম্যানিফেস্ট ফাইলের গঠন

ম্যানিফেস্ট হল একটি আলাদা ফাইল যা আপনি html এলিমেন্টের ম্যানিফেস্ট অ্যাট্রিবিউটের মাধ্যমে লিঙ্ক করেন। একটি সাধারণ ম্যানিফেস্ট এইরকম কিছু দেখায়:

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js

এই উদাহরণটি পৃষ্ঠায় চারটি ফাইল ক্যাশে করবে যা এই ম্যানিফেস্ট ফাইলটিকে নির্দিষ্ট করে৷

উল্লেখ্য কিছু জিনিস আছে:

  • CACHE MANIFEST স্ট্রিংটি প্রথম লাইন এবং এটি প্রয়োজনীয়৷
  • ফাইল অন্য ডোমেইন থেকে হতে পারে
  • কিছু ব্রাউজার আপনার অ্যাপে উপলব্ধ স্টোরেজ কোটার পরিমাণের উপর সীমাবদ্ধতা রাখে। উদাহরণস্বরূপ, Chrome-এ, AppCache অস্থায়ী স্টোরেজের একটি শেয়ার্ড পুল ব্যবহার করে যা অন্যান্য অফলাইন API শেয়ার করতে পারে। আপনি যদি Chrome ওয়েব স্টোরের জন্য একটি অ্যাপ লিখছেন, unlimitedStorage ব্যবহার করে সেই সীমাবদ্ধতা সরিয়ে দেয়।
  • যদি ম্যানিফেস্ট নিজেই একটি 404 বা 410 প্রদান করে, ক্যাশে মুছে ফেলা হয়।
  • যদি ম্যানিফেস্ট বা এতে উল্লেখ করা কোনো সংস্থান ডাউনলোড করতে ব্যর্থ হয়, পুরো ক্যাশে আপডেট প্রক্রিয়া ব্যর্থ হয়। ব্যর্থতার ক্ষেত্রে ব্রাউজারটি পুরানো অ্যাপ্লিকেশন ক্যাশে ব্যবহার করতে থাকবে।

আরও জটিল উদাহরণের দিকে নজর দেওয়া যাক:

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:
*

# 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

একটি '#' দিয়ে শুরু হওয়া লাইনগুলি হল মন্তব্য লাইন, কিন্তু অন্য উদ্দেশ্যও পরিবেশন করতে পারে। একটি অ্যাপ্লিকেশনের ক্যাশে শুধুমাত্র আপডেট করা হয় যখন এর ম্যানিফেস্ট ফাইল পরিবর্তন হয়। সুতরাং উদাহরণস্বরূপ, আপনি যদি একটি ইমেজ রিসোর্স এডিট করেন বা একটি জাভাস্ক্রিপ্ট ফাংশন পরিবর্তন করেন, সেই পরিবর্তনগুলি পুনরায় ক্যাশে করা হবে না। ক্যাশে করা ফাইলগুলিকে রিফ্রেশ করতে ব্রাউজারকে জানাতে আপনাকে অবশ্যই ম্যানিফেস্ট ফাইলটি পরিবর্তন করতে হবে ৷

প্রতিবার জোর করে আপডেট করার জন্য ক্রমাগত-আপডেট করা টাইমস্ট্যাম্প বা এলোমেলো স্ট্রিং ব্যবহার করা এড়িয়ে চলুন। একটি আপডেটের সময় ম্যানিফেস্টটি দুবার চেক করা হয়, একবার শুরুতে এবং একবার সমস্ত ক্যাশে করা ফাইল আপডেট হওয়ার পরে৷ আপডেটের সময় যদি ম্যানিফেস্টটি পরিবর্তিত হয়ে থাকে, তবে ব্রাউজারটি একটি সংস্করণ থেকে কিছু ফাইল এবং অন্য সংস্করণ থেকে অন্য ফাইলগুলি নিয়ে এসেছে, তাই এটি ক্যাশে প্রয়োগ করে না এবং পরে পুনরায় চেষ্টা করে।

যদিও ক্যাশে আপডেট হয়, পৃষ্ঠাটি রিফ্রেশ না হওয়া পর্যন্ত ব্রাউজার সেই ফাইলগুলি ব্যবহার করবে না, কারণ ক্যাশের বর্তমান সংস্করণ থেকে পৃষ্ঠাটি লোড হওয়ার পরে আপডেটগুলি ঘটে৷

একটি ম্যানিফেস্টের তিনটি স্বতন্ত্র বিভাগ থাকতে পারে: CACHE , NETWORK এবং FALLBACK ।

CACHE:
এটি এন্ট্রির জন্য ডিফল্ট বিভাগ। এই শিরোনামের অধীনে তালিকাভুক্ত ফাইলগুলি (অথবা CACHE MANIFEST পরে) প্রথমবার ডাউনলোড করার পরে স্পষ্টভাবে ক্যাশে করা হবে৷ NETWORK:
এই বিভাগে তালিকাভুক্ত ফাইলগুলি নেটওয়ার্ক থেকে আসতে পারে যদি সেগুলি ক্যাশে না থাকে, অন্যথায় নেটওয়ার্ক ব্যবহার করা হয় না, এমনকি ব্যবহারকারী অনলাইন থাকলেও৷ আপনি এখানে নির্দিষ্ট URL গুলিকে সাদা-তালিকা দিতে পারেন, বা সহজভাবে " ", যা সমস্ত URL-কে অনুমতি দেয়৷ বেশিরভাগ সাইটের প্রয়োজন " "। FALLBACK:
একটি ঐচ্ছিক বিভাগ ফলব্যাক পৃষ্ঠাগুলি নির্দিষ্ট করে যদি একটি সংস্থান অ্যাক্সেসযোগ্য না হয়। প্রথম URI হল রিসোর্স, দ্বিতীয়টি হল ফ্যালব্যাক ব্যবহার করা হয় যদি নেটওয়ার্ক অনুরোধ ব্যর্থ হয় বা ত্রুটি হয়। উভয় ইউআরআই ম্যানিফেস্ট ফাইলের মতো একই মূল থেকে হতে হবে। আপনি নির্দিষ্ট ইউআরএল ক্যাপচার করতে পারেন কিন্তু ইউআরএল উপসর্গও। "images/large/" URL থেকে ব্যর্থতা ক্যাপচার করবে যেমন "images/large/whatever/img.jpg"।

নিম্নলিখিত ম্যানিফেস্ট একটি "ক্যাচ-অল" পৃষ্ঠা (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 (e.g. sites) require the user to be online.
NETWORK:
*

# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png

ক্যাশে আপডেট করা হচ্ছে

একবার একটি অ্যাপ্লিকেশন অফলাইন হয়ে গেলে নিম্নলিখিতগুলির মধ্যে একটি না হওয়া পর্যন্ত এটি ক্যাশে থাকে:

  1. ব্যবহারকারী আপনার সাইটের জন্য তাদের ব্রাউজারের ডেটা স্টোরেজ সাফ করে।
  2. ম্যানিফেস্ট ফাইলটি পরিবর্তিত হয়েছে। দ্রষ্টব্য: ম্যানিফেস্টে তালিকাভুক্ত একটি ফাইল আপডেট করার অর্থ এই নয় যে ব্রাউজার সেই সংস্থানটিকে পুনরায় ক্যাশে করবে৷ ম্যানিফেস্ট ফাইল নিজেই পরিবর্তন করা আবশ্যক.

ক্যাশে স্ট্যাটাস

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.
}

ভাল খবর: আপনি এটি স্বয়ংক্রিয় করতে পারেন। আপনার সাইটের নতুন সংস্করণে ব্যবহারকারীদের আপডেট করতে, পৃষ্ঠা লোডের 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.
    if (confirm('A new version of this site is available. Load it?')) {
    window.location.reload();
    }
} else {
    // Manifest didn't 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);

যদি ম্যানিফেস্ট ফাইল বা এতে উল্লেখ করা কোনো সংস্থান ডাউনলোড করতে ব্যর্থ হয়, তাহলে সম্পূর্ণ আপডেট ব্যর্থ হয়। এই ধরনের ব্যর্থতার ক্ষেত্রে ব্রাউজারটি পুরানো অ্যাপ্লিকেশন ক্যাশে ব্যবহার করা চালিয়ে যাবে।

তথ্যসূত্র