নির্দিষ্ট পাথের জন্য পরিষেবা কর্মীকে বাইপাস করতে পরিষেবা কর্মী স্ট্যাটিক রাউটিং API ব্যবহার করুন৷

Rachel Andrew

Chrome 123 থেকে, Service Worker Static Routing API পাওয়া যায়। এই API আপনাকে নির্দিষ্ট রিসোর্স পাথগুলি কীভাবে আনা উচিত তা ঘোষণামূলকভাবে বলতে দেয়, যার অর্থ হল ব্রাউজারকে কেবল ক্যাশে থেকে বা সরাসরি নেটওয়ার্ক থেকে প্রতিক্রিয়া আনার জন্য কোনও পরিষেবা কর্মী চালানোর প্রয়োজন হয় না। Chrome 116 সাল থেকে এই APIটি পরীক্ষামূলকভাবে চালু রয়েছে এবং এই পোস্টে Chrome 123-এ API চালু হওয়ার বিশদ বিবরণ দেওয়া হয়েছে।

API ব্যবহার করুন

সার্ভিস ওয়ার্কার install ইভেন্টে API কল event.addRoutes ব্যবহার করতে। এই পদ্ধতিতে নিম্নলিখিত বৈশিষ্ট্য সহ রুটের একটি তালিকা দিন:

condition

নিয়মটি কখন প্রযোজ্য তা নির্দিষ্ট করে। নিম্নলিখিত বৈশিষ্ট্যগুলি গ্রহণ করে:

• urlPattern : একটি URLPattern উদাহরণ, অথবা একটি বৈধ URLPattern প্রতিনিধিত্বকারী একটি স্ট্রিং, যা URLPattern কনস্ট্রাক্টরে পাস করা যেতে পারে।
• requestMethod : একটি স্ট্রিং যাতে একটি Request পদ্ধতি থাকে।
• requestMode : একটি স্ট্রিং যাতে একটি Request mode থাকে।
• requestDestination : একটি স্ট্রিং যার মধ্যে একটি Request destination থাকে।
• runningStatus : একটি স্ট্রিং, হয় "running" অথবা "not-running" । এটি পরিষেবা কর্মীর চলমান অবস্থা নির্দেশ করে।

source

রিসোর্স ম্যাচিং condition কীভাবে লোড করা হবে তা নির্দিষ্ট করে। নিম্নলিখিত স্ট্রিংগুলির মধ্যে একটি:

• "network"
• "cache"
• "fetch-event"
• "race-network-and-fetch-handler"

নিম্নলিখিত উদাহরণে, "/articles" দিয়ে শুরু হওয়া URL গুলি যদি পরিষেবা কর্মীর কাছে বর্তমানে চলমান থাকে তবে তাদের কাছে পাঠানো হয়। যেখানে একাধিক শর্ত রয়েছে, যেমন urlPattern এবং runningStatus , রুটটি ব্যবহারের জন্য সমস্ত শর্ত পূরণ করতে হবে।

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {

          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

নিম্নলিখিত উদাহরণে, একটি ফর্মের পোস্টগুলি সরাসরি নেটওয়ার্কে পাঠানো হয় এবং পরিষেবা কর্মীকে বাইপাস করে।

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/form/*",
          requestMethod: "post"
    },
    source: "network"
  });
});

নিম্নলিখিত উদাহরণে, "pictures" নামের ক্যাশে স্টোরেজটি .png বা .jpg ফাইল এক্সটেনশন সহ ফাইল আনার জন্য ব্যবহৃত হয়।

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
      or: [
        {urlPattern: "*.png"},
        {urlPattern: "*.jpg"}
      ]
    },
    source: {
      cacheName: "pictures"
    }
  });
});

অরিজিন ট্রায়াল থেকে পরিবর্তনগুলি

মূল অরিজিন ট্রায়ালে InstallEvent.registerRouter() এর পরিবর্তে InstallEvent.addRoutes() ব্যবহার করা হয়েছিল, registerRouter() পদ্ধতিটি শুধুমাত্র একবার কল করা যেত। এই পরিবর্তনটি অরিজিন ট্রায়ালের কমিউনিটির প্রতিক্রিয়ার উপর ভিত্তি করে করা হয়েছিল।

নতুন API Chrome 121 এ প্রবর্তিত URLPattern এ পরিবর্তনের সুবিধাও গ্রহণ করে, একটি অনুরোধ পদ্ধতি, মোড এবং গন্তব্য নির্দিষ্ট করার ক্ষমতা যোগ করে এবং অতিরিক্ত উৎস বিকল্প যোগ করে।

Chrome DevTools-এ সাপোর্ট

নিবন্ধিত রাউটারের নিয়মগুলি অ্যাপ্লিকেশন প্যানেলের সার্ভিস ওয়ার্কার ট্যাবে প্রদর্শিত হয়।

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