ক্রোম 71 এ আসছে cache.addAll() এবং importScripts() এ টুইক

পরিষেবা কর্মী এবং ক্যাশে স্টোরেজ এপিআই ব্যবহারকারী বিকাশকারীরা Chrome 71-এ দুটি ছোট পরিবর্তনের সন্ধানে থাকা উচিত। উভয় পরিবর্তনই ক্রোমের প্রয়োগকে স্পেসিফিকেশন এবং অন্যান্য ব্রাউজারগুলির সাথে সঙ্গতিপূর্ণ করে।

অ্যাসিঙ্ক্রোনাস ইম্পোর্টস্ক্রিপ্ট () অনুমোদন করা হচ্ছে না

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

ব্রাউজাররা importScripts() মাধ্যমে টেনে আনা যেকোন কিছুকে স্বয়ংক্রিয়ভাবে ক্যাশ করে "ডাউনলোড করুন এবং কিছু সিঙ্ক্রোনাস কোড চালান" এর সম্ভাব্য কার্যক্ষমতা কমানোর চেষ্টা করে, যার অর্থ প্রাথমিক ডাউনলোডের পরে, আমদানি করা কোড কার্যকর করার ক্ষেত্রে খুব কম ওভারহেড জড়িত থাকে।

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

Chrome 71-এর আগে, install হ্যান্ডলারের বাইরে অসিঙ্ক্রোনাসভাবে importScripts() কল করা কাজ করবে। Chrome 71 দিয়ে শুরু করে , সেই কলগুলি একটি রানটাইম ব্যতিক্রম ছুঁড়ে দেয় (যদি না একই ইউআরএল পূর্বে একটি install হ্যান্ডলারে আমদানি করা হয়), অন্যান্য ব্রাউজারে আচরণের সাথে মিলে যায়।

এই মত কোড পরিবর্তে:

// This only works in Chrome 70 and below.
self.addEventListener('fetch', event => {
  importScripts('my-fetch-logic.js');
  event.respondWith(self.customFetchLogic(event));
});

আপনার পরিষেবা কর্মী কোড দেখতে হবে:

// Move the importScripts() to the top-level scope.
// (Alternatively, import the same URL in the install handler.)
importScripts('my-fetch-logic.js');
self.addEventListener('fetch', event => {
  event.respondWith(self.customFetchLogic(event));
});

পুনরাবৃত্ত ইউআরএল বাতিল করা হচ্ছে cache.addAll() এ পাস করা হচ্ছে

আপনি যদি কোনও পরিষেবা কর্মীর পাশাপাশি ক্যাশে স্টোরেজ API ব্যবহার করেন তবে প্রাসঙ্গিক স্পেসিফিকেশনের সাথে সারিবদ্ধ করার জন্য Chrome 71-এ আরেকটি ছোট পরিবর্তন রয়েছে। যখন একই ইউআরএল একাধিকবার cache.addAll() এ একটি একক কলে পাস করা হয়, তখন স্পেসিফিকেশন বলে যে কলের মাধ্যমে ফিরে আসা প্রতিশ্রুতি প্রত্যাখ্যান করা উচিত।

ক্রোম 71 এর আগে, এটি সনাক্ত করা হয়নি, এবং ডুপ্লিকেট URLগুলি কার্যকরভাবে উপেক্ষা করা হবে৷

Chrome এর কনসোলে সতর্কতা বার্তার একটি স্ক্রিনশট৷
Chrome 71 থেকে শুরু করে, আপনি কনসোলে লগ করা একটি সতর্কতা বার্তা দেখতে পাবেন।

এই লগিংটি Chrome 72-এর একটি পূর্বসূচী, যেখানে শুধুমাত্র একটি লগ করা সতর্কতার পরিবর্তে, ডুপ্লিকেট URL গুলি cache.addAll() প্রত্যাখ্যানের দিকে নিয়ে যাবে৷ আপনি যদি cache.addAll() কে InstallEvent.waitUntil() এ পাস করা একটি প্রতিশ্রুতি চেইনের অংশ হিসাবে কল করেন, যেমনটি সাধারণ অভ্যাস, সেই প্রত্যাখ্যান আপনার পরিষেবা কর্মীকে ইনস্টল করতে ব্যর্থ হতে পারে।

আপনি কীভাবে সমস্যায় পড়তে পারেন তা এখানে:

const urlsToCache = [
  '/index.html',
  '/main.css',
  '/app.js',
  '/index.html', // Oops! This is listed twice and should be removed.
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache').then(cache => cache.addAll(urlsToCache))
  );
});

এই বিধিনিষেধটি শুধুমাত্র cache.addAll() এ পাস করা প্রকৃত ইউআরএলগুলির ক্ষেত্রে প্রযোজ্য, এবং ক্যাশিং যা শেষ হয় দুটি সমতুল্য প্রতিক্রিয়া যার মধ্যে ভিন্ন URL রয়েছে—যেমন '/' এবং '/index.html' — একটি প্রত্যাখ্যান ট্রিগার করবে না।

আপনার পরিষেবা কর্মী বাস্তবায়ন ব্যাপকভাবে পরীক্ষা করুন

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