আমাকে পরিষেবা কর্মী ক্যাশে API-তে একটি মোটামুটি ছোটখাট আপডেটে এই পোস্টটি লিখতে বলা হয়েছে। আমি মনে করিনি যে এটি তার নিজস্ব নিবন্ধের সমর্থন করে, তবে দীর্ঘ বিতর্কের পরে যা অবশেষে শিলা-কাগজ-কাঁচির খেলায় নেমে এসেছিল, আমি হেরেছি, তাই এটি এখানে।
আপনি কি পরিষেবা কর্মী ক্যাশে API-এর Chrome এর বাস্তবায়নের আপডেটগুলি শুনতে প্রস্তুত?
আমি তোমাকে শুনতে পাচ্ছি না! আমি বললাম, আপনি কি ক্রোমের সার্ভিস ওয়ার্কার ক্যাশে এপিআই বাস্তবায়নের আপডেটগুলি শুনতে প্রস্তুত?
(আপনি কেবল তখনই পড়তে পারেন যদি আপনি আপনার চেয়ারে ঝাঁপিয়ে পড়েন এবং "ইয়েহহহহ!" চিৎকার করেন। একই সাথে একটি লাসো দোলানোর ভান করা ঐচ্ছিক, তবে উত্সাহিত করা হয়)।
cache.addAll Chrome 46 এ এসেছে
হ্যাঁ! সেটা ঠিক! ক্যাশে ! ডট সব যোগ করুন! ক্রোম 46!
ঠিক আছে, ব্যঙ্গাত্মক একপাশে, এটি আসলে একটি খুব বড় চুক্তি, কারণ cache.addAll হল ক্যাশে "প্রয়োজনীয়" পলিফিলের শেষ অবশিষ্ট অংশ, যার অর্থ এটি আর প্রয়োজন নেই।
এখানে কিভাবে cache.addAll কাজ করে:
// when the browser sees this SW for the first time
self.addEventListener('install', function(event) {
// wait until the following promise resolves
event.waitUntil(
// open/create a cache named 'mysite-static-v1'
caches.open('mysite-static-v1').then(function(cache) {
// fetch and add this stuff to it
return cache.addAll([
'/',
'/css/styles.css',
'/js/script.js',
'/imgs/cat-falls-over.gif'
]);
})
);
});
addAll url এবং অনুরোধগুলির একটি অ্যারে নেয়, সেগুলি নিয়ে আসে এবং সেগুলিকে ক্যাশে যুক্ত করে৷ এটি লেনদেনমূলক - যদি কোনো আনয়ন বা লেখা ব্যর্থ হয়, পুরো অপারেশন ব্যর্থ হয়, এবং ক্যাশে তার আগের অবস্থায় ফিরে আসে। এটি উপরের মত ইনস্টল অপারেশনের জন্য বিশেষভাবে কার্যকর, যেখানে একটি একক ব্যর্থতা সামগ্রিক ব্যর্থতা হওয়া উচিত।
উপরের উদাহরণটি একজন পরিষেবা কর্মীর মধ্যে, কিন্তু ক্যাশে API পৃষ্ঠাগুলি থেকেও সম্পূর্ণরূপে অ্যাক্সেসযোগ্য।
Firefox ইতিমধ্যেই তাদের ডেভেলপার সংস্করণে এই API সমর্থন করে, তাই এটি তাদের বাকি পরিষেবা কর্মী বাস্তবায়নের সাথে অবতরণ করবে।
তবে অপেক্ষা করুন, এটিই সব নয়, পাইপলাইনে আরও ক্যাশের উন্নতি রয়েছে…
cache.matchসমস্ত Chrome 47 এ আসছে
এটি আপনাকে একাধিক মিল পেতে দেয়:
caches.open('mysite-static-v1').then(function(cache) {
return cache.matchAll('/');
}).then(function(responses) {
// …
});
উপরের সবকিছু mysite-static-v1 তে পাবেন যা মেলে / । ক্যাশে আপনাকে ইউআরএল প্রতি একাধিক এন্ট্রি করতে দেয় যদি সেগুলি স্বাধীনভাবে ক্যাশেযোগ্য হয়, যেমন যদি তাদের ভিন্ন Vary হেডার থাকে।
Firefox ইতিমধ্যেই তাদের ডেভেলপার সংস্করণে এটি সমর্থন করে, তাই এটি তাদের পরিষেবা কর্মী বাস্তবায়নের সাথে সাথেই অবতরণ করবে।
ক্যাশে কোয়েরি অপশন Chrome-এ আসছে... শীঘ্রই
এখানে একটি সুন্দর স্ট্যান্ডার্ড আনা হ্যান্ডলার আছে:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
যদি আমাদের কাছে / ক্যাশে থাকে এবং আমরা / এর জন্য একটি অনুরোধ পাই তবে এটি ক্যাশে থেকে পরিবেশন করা হবে। যাইহোক, আমরা যদি /?utm_source=blahblahwhatever এর জন্য একটি অনুরোধ পাই যা ক্যাশে থেকে আসবে না । ম্যাচিং করার সময় url সার্চ স্ট্রিং উপেক্ষা করে আপনি এটিকে ঘিরে কাজ করতে পারেন:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request, {
ignoreSearch: true
}).then(function(response) {
return response || fetch(event.request);
})
);
});
এখন /?utm_source=blahblahwhatever / এর জন্য এন্ট্রির সাথে মিলিত হবে! সম্পূর্ণ বিকল্প হল:
-
ignoreSearch- রিকোয়েস্ট আর্গুমেন্ট এবং ক্যাশড রিকোয়েস্ট উভয় ক্ষেত্রেই url-এর সার্চের অংশ উপেক্ষা করুন -
ignoreMethod- অনুরোধ আর্গুমেন্টের পদ্ধতি উপেক্ষা করুন, তাই একটি POST অনুরোধ ক্যাশে একটি GET এন্ট্রির সাথে মেলে -
ignoreVary- ক্যাশে করা প্রতিক্রিয়াগুলিতে ভ্যারি হেডার উপেক্ষা করুন
ফায়ারফক্স ইতিমধ্যেই এটিকে সমর্থন করে... ঠিক আছে আপনি এতক্ষণে ড্রিলটি জানেন। বেন কেলিকে বলুন যে তিনি ফায়ারফক্সে এই সমস্ত কিছু পাওয়ার জন্য কতটা দুর্দান্ত।
আপনি যদি ক্যাশে কোয়েরি বিকল্পগুলির Chrome বাস্তবায়ন অনুসরণ করতে চান, crbug.com/426309 দেখুন।
“আমরা ক্যাশে API-তে কী প্রয়োগ করেছি”-এর আরেকটি উত্তেজনাপূর্ণ অধ্যায়ের জন্য পরের বার দেখা হবে!