HTTP ক্যাশিং আচরণ কনফিগার করা হচ্ছে

Jeff Posnick

এই কোডল্যাব আপনাকে দেখায় কিভাবে একটি Node.js-ভিত্তিক ওয়েব সার্ভার দ্বারা প্রত্যাবর্তিত HTTP ক্যাশিং শিরোনামগুলি পরিবর্তন করতে হয়, এক্সপ্রেস সার্ভিং ফ্রেমওয়ার্ক চালিয়ে৷ Chrome এর DevTools-এ নেটওয়ার্ক প্যানেল ব্যবহার করে আপনি যে ক্যাশিং আচরণটি আশা করছেন তা বাস্তবে প্রয়োগ করা হচ্ছে তা নিশ্চিত করবেন তাও এটি দেখাবে।

নমুনা প্রকল্পের সাথে পরিচিত হন

নমুনা প্রকল্পে আপনি যে মূল ফাইলগুলির সাথে কাজ করবেন সেগুলি হল:

• server.js Node.js কোড থাকে যা ওয়েব অ্যাপের বিষয়বস্তু পরিবেশন করে। এটি HTTP অনুরোধ এবং প্রতিক্রিয়া পরিচালনা করতে এক্সপ্রেস ব্যবহার করে। বিশেষ করে, express.static() পাবলিক ডিরেক্টরির সমস্ত স্থানীয় ফাইল পরিবেশন করতে ব্যবহৃত হয়, তাই serve-static ডকুমেন্টেশন কাজে আসবে।
• public/index.html হল ওয়েব অ্যাপের HTML। বেশিরভাগ এইচটিএমএল ফাইলের মতো, এটির URL এর অংশ হিসাবে এটিতে কোনো সংস্করণ তথ্য থাকে না।
• public/app.15261a07.js এবং public/style.391484cf.css হল ওয়েব অ্যাপের JavaScript এবং CSS সম্পদ। এই ফাইলগুলির প্রতিটিতে তাদের বিষয়বস্তুর সাথে মিল রেখে তাদের URL-এ একটি হ্যাশ থাকে৷ কোন নির্দিষ্ট সংস্করণের ইউআরএল লোড করতে হবে তা ট্র্যাক রাখার জন্য index.html দায়ী।

আমাদের HTML এর জন্য ক্যাশিং হেডার কনফিগার করুন

ভার্সনিং তথ্য নেই এমন URL-এর অনুরোধে সাড়া দেওয়ার সময়, আপনার প্রতিক্রিয়া বার্তাগুলিতে Cache-Control: no-cache যোগ করা নিশ্চিত করুন। সেই সাথে, দুটি অতিরিক্ত প্রতিক্রিয়া শিরোনামের মধ্যে একটি সেট করার সুপারিশ করা হয়: হয় Last-Modified বা ETag । index.html এই বিভাগে পড়ে। আপনি এটিকে দুটি ধাপে ভাগ করতে পারেন।

প্রথমত, Last-Modified এবং ETag হেডারগুলি etag এবং lastModified কনফিগারেশন বিকল্প দ্বারা নিয়ন্ত্রিত হয়। এই দুটি বিকল্পই প্রকৃতপক্ষে সমস্ত HTTP প্রতিক্রিয়াগুলির জন্য true হিসাবে ডিফল্ট, তাই এই বর্তমান সেটআপে, আপনাকে সেই আচরণটি পেতে অপ্ট-ইন করতে হবে না। কিন্তু আপনি যাইহোক আপনার কনফিগারেশনে স্পষ্ট হতে পারেন।

দ্বিতীয়ত, আপনাকে Cache-Control: no-cache হেডারে যোগ করতে সক্ষম হতে হবে, তবে শুধুমাত্র আপনার HTML নথির জন্য ( index.html , এই ক্ষেত্রে)। শর্তসাপেক্ষে এই শিরোনামটি সেট করার সবচেয়ে সহজ উপায় হল একটি কাস্টম setHeaders function লেখা, এবং এর মধ্যে, ইনকামিং অনুরোধটি একটি HTML নথির জন্য কিনা তা পরীক্ষা করে দেখুন৷

• প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷

server.js এ স্ট্যাটিক সার্ভিং কনফিগারেশন এভাবে শুরু হয়:

app.use(express.static('public'));

• উপরে বর্ণিত পরিবর্তনগুলি করুন, এবং আপনার এমন কিছু দিয়ে শেষ করা উচিত যা দেখতে:

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    }
  },
}));

সংস্করণযুক্ত URL গুলির জন্য ক্যাশিং শিরোনামগুলি কনফিগার করুন৷

যখন " আঙ্গুলের ছাপ " বা সংস্করণ সংক্রান্ত তথ্য ধারণ করে এমন URLগুলির অনুরোধে সাড়া দেওয়ার সময়, এবং যার বিষয়বস্তুগুলি কখনই পরিবর্তন করার জন্য নয়, আপনার প্রতিক্রিয়াগুলিতে Cache-Control: max-age=31536000 যোগ করুন৷ app.15261a07.js এবং style.391484cf.css এই বিভাগে পড়ে।

শেষ ধাপে ব্যবহৃত setHeaders function তৈরি করে, আপনি একটি প্রদত্ত অনুরোধ একটি সংস্করণযুক্ত URL এর জন্য কিনা তা পরীক্ষা করতে অতিরিক্ত যুক্তি যোগ করতে পারেন এবং যদি তাই হয়, Cache-Control: max-age=31536000 হেডার৷

এটি করার সবচেয়ে মজবুত উপায় হল একটি রেগুলার এক্সপ্রেশন ব্যবহার করে দেখার জন্য যে সম্পদের অনুরোধ করা হচ্ছে সেটি একটি নির্দিষ্ট প্যাটার্নের সাথে মেলে কিনা যা আপনি জানেন যে হ্যাশগুলি পড়ে। এই নমুনা প্রকল্পের ক্ষেত্রে, এটি সর্বদা 0-9 সংখ্যার সেট থেকে আটটি অক্ষর এবং ছোট হাতের অক্ষর a–f (অর্থাৎ হেক্সাডেসিমেল অক্ষর)। হ্যাশ সবসময় একটি দ্বারা পৃথক করা হয় . উভয় দিকে চরিত্র।

একটি রেগুলার এক্সপ্রেশন যা এই সাধারণ নিয়মগুলির সাথে মেলে new RegExp('\\.[0-9a-f]{8}\\.') হিসাবে প্রকাশ করা যেতে পারে।

• setHeaders ফাংশন পরিবর্তন করুন যাতে এটি এইরকম দেখায়:

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');

    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    } else if (hashRegExp.test(path)) {
      // If the RegExp matched, then we have a versioned URL.
      res.setHeader('Cache-Control', 'max-age=31536000');
    }
  },
}));

DevTools ব্যবহার করে নতুন আচরণ নিশ্চিত করুন

স্থির ফাইল সার্ভারে পরিবর্তনের সাথে, আপনি DevTools নেটওয়ার্ক প্যানেল খোলার সাথে লাইভ অ্যাপের পূর্বরূপ দেখে সঠিক শিরোনাম সেট করা হচ্ছে কিনা তা নিশ্চিত করতে পরীক্ষা করতে পারেন।

• সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .

• কলাম হেডারে ডান-ক্লিক করে সবচেয়ে প্রাসঙ্গিক তথ্য অন্তর্ভুক্ত করতে নেটওয়ার্ক প্যানেলে প্রদর্শিত কলামগুলি কাস্টমাইজ করুন:

এখানে, Name , Status , Cache-Control , ETag , এবং Last-Modified কলামগুলিকে মনোযোগ দিতে হবে।

• নেটওয়ার্ক প্যানেলে DevTools খোলার সাথে, পৃষ্ঠাটি রিফ্রেশ করুন।

পৃষ্ঠাটি লোড হওয়ার পরে, আপনি নেটওয়ার্ক প্যানেলে এন্ট্রিগুলি দেখতে পাবেন যা নীচের মত দেখাচ্ছে:

প্রথম সারিটি HTML নথির জন্য যা আপনি নেভিগেট করেছেন৷ এটি সঠিকভাবে Cache-Control: no-cache । সেই অনুরোধের জন্য HTTP প্রতিক্রিয়া স্থিতি হল একটি 304 । এর মানে হল যে ব্রাউজারটি ক্যাশ করা এইচটিএমএলকে অবিলম্বে ব্যবহার করতে জানত না, কিন্তু এর পরিবর্তে ওয়েব সার্ভারে একটি HTTP অনুরোধ করেছিল, Last-Modified এবং ETag তথ্য ব্যবহার করে দেখতে যে এইচটিএমএল এর কোনো আপডেট আছে কিনা তা আগে থেকেই তার ক্যাশে ছিল। . HTTP 304 প্রতিক্রিয়া নির্দেশ করে যে আপডেট করা HTML নেই।

পরবর্তী দুটি সারি সংস্করণযুক্ত জাভাস্ক্রিপ্ট এবং CSS সম্পদের জন্য। আপনি তাদের Cache-Control: max-age=31536000 , এবং প্রতিটির জন্য HTTP স্থিতি হল 200 । ব্যবহৃত কনফিগারেশনের কারণে, Node.js সার্ভারে কোনো প্রকৃত অনুরোধ করা হচ্ছে না, এবং এন্ট্রিতে ক্লিক করলে আপনাকে অতিরিক্ত বিবরণ দেখাবে, যার মধ্যে প্রতিক্রিয়া এসেছে "(ডিস্ক ক্যাশে থেকে)"।

ETag এবং শেষ-সংশোধিত কলামগুলির প্রকৃত মানগুলি খুব বেশি গুরুত্বপূর্ণ নয়৷ গুরুত্বপূর্ণ বিষয় হল নিশ্চিত করা যে তারা সেট করা হচ্ছে।

জিনিষ আপ সারসংক্ষেপ

এই কোডল্যাবের ধাপগুলি অতিক্রম করার পরে, আপনি এখন HTTP ক্যাশের সর্বোত্তম ব্যবহারের জন্য এক্সপ্রেস ব্যবহার করে একটি Node.js-ভিত্তিক ওয়েব সার্ভারে HTTP প্রতিক্রিয়া শিরোনামগুলি কীভাবে কনফিগার করতে হয় তার সাথে পরিচিত। Chrome এর DevTools-এ নেটওয়ার্ক প্যানেলের মাধ্যমে প্রত্যাশিত ক্যাশিং আচরণ ব্যবহার করা হচ্ছে তা নিশ্চিত করার জন্য আপনার প্রয়োজনীয় পদক্ষেপগুলিও রয়েছে৷