ক্রস-অরিজিন পরিষেবা কর্মী - বিদেশী আনার সাথে পরীক্ষা করা

Jeff Posnick

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

পটভূমি

পরিষেবা কর্মীরা ওয়েব ডেভেলপারদের তাদের ওয়েব অ্যাপ্লিকেশনগুলির দ্বারা করা নেটওয়ার্ক অনুরোধগুলিতে সাড়া দেওয়ার ক্ষমতা দেয়, তাদের অফলাইনে থাকাকালীনও কাজ চালিয়ে যেতে, লাই-ফাই-এর বিরুদ্ধে লড়াই করতে এবং stale-while-revalidate-এর মতো জটিল ক্যাশে ইন্টারঅ্যাকশনগুলি বাস্তবায়ন করার অনুমতি দেয়৷ কিন্তু পরিষেবা কর্মীদের ঐতিহাসিকভাবে একটি নির্দিষ্ট উত্সের সাথে আবদ্ধ করা হয়েছে—একটি ওয়েব অ্যাপের মালিক হিসাবে, আপনার ওয়েব অ্যাপের সমস্ত নেটওয়ার্ক অনুরোধগুলিকে বাধা দেওয়ার জন্য একজন পরিষেবা কর্মীকে লিখতে এবং স্থাপন করা আপনার দায়িত্ব৷ সেই মডেলে, প্রতিটি পরিষেবা কর্মী এমনকি ক্রস-অরিজিন অনুরোধগুলি পরিচালনা করার জন্য দায়ী, উদাহরণস্বরূপ তৃতীয় পক্ষের API বা ওয়েব ফন্টগুলির জন্য।

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

একটি পরিষেবা কর্মী মোতায়েন করা যা বিদেশী আনয়ন প্রয়োগ করে এমন কোনও পরিষেবার যে কোনও প্রদানকারীর জন্য বোধগম্য হয় যা ব্রাউজার থেকে HTTPS অনুরোধের মাধ্যমে অ্যাক্সেস করা হয়েছে—শুধু এমন পরিস্থিতিতে চিন্তা করুন যেখানে আপনি আপনার পরিষেবার একটি নেটওয়ার্ক-স্বাধীন সংস্করণ প্রদান করতে পারেন, যেখানে ব্রাউজারগুলি একটি সুবিধা নিতে পারে সাধারণ সম্পদ ক্যাশে। যে পরিষেবাগুলি এর থেকে উপকৃত হতে পারে সেগুলির মধ্যে রয়েছে, কিন্তু সীমাবদ্ধ নয়:

• RESTful ইন্টারফেস সহ API প্রদানকারী
• ওয়েব ফন্ট প্রদানকারী
• বিশ্লেষণ প্রদানকারী
• ইমেজ হোস্টিং প্রদানকারী
• জেনেরিক কন্টেন্ট ডেলিভারি নেটওয়ার্ক

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

পূর্বশর্ত

অরিজিন ট্রায়াল টোকেন

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

Origin-Trial: token_obtained_from_signup

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

একটি অফিসিয়াল অরিজিন ট্রায়াল টোকেনের জন্য নিবন্ধন করার আগে বিদেশী আনা নিয়ে পরীক্ষা করার সুবিধার্থে, আপনি chrome://flags/#enable-experimental-web-platform-features এ গিয়ে আপনার স্থানীয় কম্পিউটারের জন্য Chrome-এ প্রয়োজনীয়তা বাইপাস করতে পারেন এবং " পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য" পতাকা। অনুগ্রহ করে মনে রাখবেন যে আপনি আপনার স্থানীয় পরীক্ষা-নিরীক্ষায় ব্যবহার করতে চান এমন Chrome-এর প্রতিটি দৃষ্টান্তে এটি করা দরকার, যেখানে একটি অরিজিন ট্রায়াল টোকেন সহ বৈশিষ্ট্যটি আপনার সমস্ত Chrome ব্যবহারকারীদের জন্য উপলব্ধ হবে৷

HTTPS

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

বিদেশী আনা ব্যবহার করে

পূর্বশর্তগুলি শেষ হয়ে গেলে, আসুন একজন বিদেশী আনয়ন পরিষেবা কর্মীকে চালু এবং চালু করার জন্য প্রয়োজনীয় প্রযুক্তিগত বিবরণগুলিতে ডুব দেওয়া যাক।

আপনার সেবা কর্মী নিবন্ধন

প্রথম চ্যালেঞ্জ যেটি আপনি ধাক্কা দিতে পারেন তা হল আপনার পরিষেবা কর্মীকে কীভাবে নিবন্ধন করবেন। আপনি যদি আগে পরিষেবা কর্মীদের সাথে কাজ করে থাকেন তবে আপনি সম্ভবত নিম্নলিখিতগুলির সাথে পরিচিত:

// You can't do this!
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js');
}

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

সমাধানটি একটি HTTP শিরোনামের আকারে আসে যা আপনার সার্ভার যেকোনো প্রতিক্রিয়াতে অন্তর্ভুক্ত করতে পারে:

Link: </service-worker.js>; rel="serviceworker"; scope="/"

আসুন সেই উদাহরণের শিরোনামটিকে এর উপাদানগুলিতে ভেঙে ফেলি, যার প্রতিটি একটি দ্বারা পৃথক করা হয়েছে ; চরিত্র

• </service-worker.js> /service-worker.js এটি সরাসরি scriptURL স্ট্রিংয়ের সাথে মিলে যায় যা অন্যথায় navigator.serviceWorker.register() এ প্রথম প্যারামিটার হিসেবে পাস করা হবে। মানটিকে <> অক্ষরগুলিতে আবদ্ধ করা দরকার ( Link হেডার স্পেসিফিকেশন দ্বারা প্রয়োজনীয়), এবং যদি পরম URL এর পরিবর্তে একটি আপেক্ষিক প্রদান করা হয় তবে এটি প্রতিক্রিয়ার অবস্থানের সাথে আপেক্ষিক হিসাবে ব্যাখ্যা করা হবে।
• rel="serviceworker" ও প্রয়োজন, এবং কাস্টমাইজেশনের প্রয়োজন ছাড়াই অন্তর্ভুক্ত করা উচিত।
• scope=/ হল একটি ঐচ্ছিক সুযোগ ঘোষণা, options.scope স্ট্রিংয়ের সমতুল্য যা আপনি navigator.serviceWorker.register() এ দ্বিতীয় প্যারামিটার হিসেবে পাস করতে পারেন। অনেক ব্যবহারের ক্ষেত্রে, আপনি ডিফল্ট স্কোপ ব্যবহার করে ঠিক আছেন, তাই আপনার এটির প্রয়োজন না জানলে নির্দ্বিধায় এটি ছেড়ে দিন। সর্বোচ্চ অনুমোদিত সুযোগের চারপাশে একই বিধিনিষেধ, Service-Worker-Allowed হেডারের মাধ্যমে সেই সীমাবদ্ধতাগুলি শিথিল করার ক্ষমতা সহ, Link শিরোলেখ নিবন্ধনগুলিতে প্রযোজ্য৷

ঠিক যেমন একটি "প্রথাগত" পরিষেবা কর্মী নিবন্ধনের সাথে, Link শিরোনাম ব্যবহার করে একটি পরিষেবা কর্মী ইনস্টল করা হবে যা নিবন্ধিত সুযোগের বিরুদ্ধে করা পরবর্তী অনুরোধের জন্য ব্যবহার করা হবে৷ বিশেষ শিরোনাম অন্তর্ভুক্ত প্রতিক্রিয়ার মূল অংশটি যেমন আছে তেমন ব্যবহার করা হবে, এবং বিদেশী পরিষেবা কর্মী ইনস্টলেশন শেষ করার জন্য অপেক্ষা না করে অবিলম্বে পৃষ্ঠায় উপলব্ধ।

মনে রাখবেন যে বিদেশী ফেচ বর্তমানে একটি অরিজিন ট্রায়াল হিসাবে প্রয়োগ করা হয়েছে, তাই আপনার লিঙ্ক প্রতিক্রিয়া শিরোনামের পাশাপাশি, আপনাকে একটি বৈধ Origin-Trial শিরোনামও অন্তর্ভুক্ত করতে হবে। আপনার বিদেশী আনয়ন পরিষেবা কর্মী নিবন্ধন করার জন্য প্রতিক্রিয়া শিরোনামগুলির ন্যূনতম সেটটি হল

Link: </service-worker.js>; rel="serviceworker"
Origin-Trial: token_obtained_from_signup

দ্রষ্টব্য: পরিষেবা কর্মী স্পেসিফিকেশনের চৌকস পাঠকরা একটি <link rel="serviceworker"> DOM উপাদানের মাধ্যমে পরিষেবা কর্মী নিবন্ধন সম্পাদনের আরেকটি উপায় লক্ষ্য করেছেন ৷ Chrome-এ <link> -ভিত্তিক নিবন্ধনের জন্য সমর্থন বর্তমানে Link শিরোলেখের মতো একই অরিজিন ট্রায়াল দ্বারা নিয়ন্ত্রিত হয়, তাই এটি এখনও ডিফল্টরূপে সক্ষম করা হয়নি। <link> -ভিত্তিক নিবন্ধনের ক্ষেত্রে জাভাস্ক্রিপ্ট-ভিত্তিক নিবন্ধনের মতো একই সীমাবদ্ধতা রয়েছে যখন এটি বিদেশী আনয়ন নিবন্ধনের ক্ষেত্রে আসে, তাই এই নিবন্ধটির উদ্দেশ্যে, Link শিরোনামটি আপনার ব্যবহার করা উচিত।

ডিবাগিং রেজিস্ট্রেশন

বিকাশের সময়, আপনি সম্ভবত নিশ্চিত করতে চাইবেন যে আপনার বিদেশী আনয়ন পরিষেবা কর্মী সঠিকভাবে ইনস্টল করা হয়েছে এবং অনুরোধগুলি প্রক্রিয়া করা হচ্ছে৷ কিছু জিনিস আছে যা আপনি Chrome এর ডেভেলপার টুলে চেক করতে পারেন তা নিশ্চিত করতে যে জিনিসগুলি প্রত্যাশা অনুযায়ী কাজ করছে৷

সঠিক প্রতিক্রিয়া শিরোনাম পাঠানো হচ্ছে?

বিদেশী আনয়ন পরিষেবা কর্মী নিবন্ধন করার জন্য, আপনাকে আপনার ডোমেনে হোস্ট করা একটি সংস্থানের প্রতিক্রিয়াতে একটি লিঙ্ক শিরোনাম সেট করতে হবে, যেমনটি এই পোস্টে আগে বর্ণিত হয়েছে৷ অরিজিন ট্রায়াল সময়কালে, এবং ধরে নিচ্ছি যে আপনার কাছে chrome://flags/#enable-experimental-web-platform-features সেট নেই, আপনাকে একটি Origin-Trial প্রতিক্রিয়া শিরোনামও সেট করতে হবে। DevTools-এর নেটওয়ার্ক প্যানেলে এন্ট্রি দেখে আপনি নিশ্চিত করতে পারেন যে আপনার ওয়েব সার্ভার সেই শিরোনামগুলি সেট করছে:

ফরেন ফেচ সার্ভিস কর্মী কি সঠিকভাবে নিবন্ধিত?

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

ইভেন্ট হ্যান্ডলার ইনস্টল করুন

এখন যেহেতু আপনি আপনার তৃতীয় পক্ষের পরিষেবা কর্মীকে নিবন্ধিত করেছেন, এটি অন্যান্য পরিষেবা কর্মীর মতোই install এবং activate ইভেন্টগুলিতে প্রতিক্রিয়া জানানোর সুযোগ পাবে৷ এটি সেই ইভেন্টগুলির সুবিধা নিতে পারে, উদাহরণস্বরূপ, install ইভেন্টের সময় প্রয়োজনীয় সংস্থানগুলির সাথে ক্যাশেগুলি পূরণ করতে, বা activate ইভেন্টে পুরানো ক্যাশে ছাঁটাই করতে পারে৷

স্বাভাবিক install ইভেন্ট ক্যাশিং কার্যকলাপের বাইরে, আপনার তৃতীয় পক্ষের পরিষেবা কর্মীর install ইভেন্ট হ্যান্ডলারের ভিতরে একটি অতিরিক্ত পদক্ষেপ প্রয়োজন । আপনার কোডটিকে কল করতে হবে registerForeignFetch() , নিম্নলিখিত উদাহরণের মতো:

self.addEventListener('install', event => {
    event.registerForeignFetch({
    scopes: [self.registration.scope], // or some sub-scope
    origins: ['*'] // or ['https://example.com']
    });
});

দুটি কনফিগারেশন বিকল্প আছে, উভয়ই প্রয়োজন:

• scopes এক বা একাধিক স্ট্রিংয়ের একটি অ্যারে নেয়, যার প্রতিটি অনুরোধের জন্য একটি সুযোগ উপস্থাপন করে যা একটি foreignfetch ইভেন্টকে ট্রিগার করবে। কিন্তু অপেক্ষা করুন , আপনি হয়তো ভাবছেন, আমি ইতিমধ্যেই পরিষেবা কর্মী নিবন্ধনের সময় একটি সুযোগ সংজ্ঞায়িত করেছি! এটা সত্য, এবং সেই সামগ্রিক সুযোগ এখনও প্রাসঙ্গিক—আপনি এখানে নির্দিষ্ট করেছেন এমন প্রতিটি সুযোগ অবশ্যই পরিষেবা কর্মীর সামগ্রিক সুযোগের সমান বা একটি উপ-স্কোপের হতে হবে। এখানে অতিরিক্ত স্কোপিং বিধিনিষেধ আপনাকে একটি সর্ব-উদ্দেশ্য পরিষেবা কর্মী মোতায়েন করার অনুমতি দেয় যা প্রথম পক্ষের fetch ইভেন্ট (আপনার নিজস্ব সাইট থেকে করা অনুরোধের জন্য) এবং তৃতীয় পক্ষের foreignfetch ইভেন্ট (অন্যান্য ডোমেন থেকে করা অনুরোধের জন্য) উভয়ই পরিচালনা করতে পারে এবং এটা স্পষ্ট যে আপনার বৃহত্তর সুযোগের একটি উপসেটই foreignfetch ট্রিগার করবে। বাস্তবে, আপনি যদি শুধুমাত্র তৃতীয় পক্ষের, foreignfetch ইভেন্টগুলি পরিচালনা করার জন্য নিবেদিত একজন পরিষেবা কর্মীকে মোতায়েন করেন, তাহলে আপনি শুধুমাত্র একটি একক, সুস্পষ্ট সুযোগ ব্যবহার করতে চান যা আপনার পরিষেবা কর্মীর সামগ্রিক সুযোগের সমান। মান self.registration.scope ব্যবহার করে উপরের উদাহরণটি এটিই করবে।
• origins এক বা একাধিক স্ট্রিংয়ের অ্যারেও নেয় এবং আপনাকে আপনার foreignfetch হ্যান্ডলারকে শুধুমাত্র নির্দিষ্ট ডোমেনের অনুরোধে সাড়া দেওয়ার জন্য সীমাবদ্ধ করতে দেয়। উদাহরণস্বরূপ, যদি আপনি স্পষ্টভাবে 'https://example.com'-এর অনুমতি দেন, তাহলে আপনার বিদেশী আনার সুযোগ থেকে পরিবেশিত একটি সংস্থানের জন্য https://example.com/path/to/page.html এ হোস্ট করা একটি পৃষ্ঠা থেকে একটি অনুরোধ করা হয়েছে আপনার বিদেশী ফেচ হ্যান্ডলারকে ট্রিগার করবে, কিন্তু https://random-domain.com/path/to/page.html থেকে করা অনুরোধগুলি আপনার হ্যান্ডলারকে ট্রিগার করবে না। দূরবর্তী উত্সের একটি উপসেটের জন্য শুধুমাত্র আপনার বিদেশী আনয়ন যুক্তি ট্রিগার করার একটি নির্দিষ্ট কারণ না থাকলে, আপনি অ্যারের একমাত্র মান হিসাবে '*' নির্দিষ্ট করতে পারেন এবং সমস্ত উত্স অনুমোদিত হবে৷

বিদেশী ফেচ ইভেন্ট হ্যান্ডলার

এখন যেহেতু আপনি আপনার তৃতীয়-পক্ষের পরিষেবা কর্মীকে ইনস্টল করেছেন এবং এটি registerForeignFetch() এর মাধ্যমে কনফিগার করা হয়েছে, এটি আপনার সার্ভারে ক্রস-অরিজিন সাবরিসোর্স অনুরোধগুলিকে বাধা দেওয়ার সুযোগ পাবে যা বিদেশী আনার সুযোগের মধ্যে পড়ে৷

দ্রষ্টব্য: Chrome এর বর্তমান বাস্তবায়নে একটি অতিরিক্ত সীমাবদ্ধতা রয়েছে: শুধুমাত্র GET , POST , বা HEAD অনুরোধ যাতে শুধুমাত্র CORS-নিরাপদ শিরোনাম থাকে বিদেশী আনার জন্য যোগ্য৷ এই বিধিনিষেধটি বিদেশী আনার স্পেসিফিকেশনের অংশ নয় এবং Chrome এর ভবিষ্যতের সংস্করণগুলিতে শিথিল হতে পারে৷

একটি প্রথাগত, প্রথম-পক্ষের পরিষেবা কর্মী, প্রতিটি অনুরোধ একটি fetch ইভেন্টকে ট্রিগার করবে যা আপনার পরিষেবা কর্মীকে সাড়া দেওয়ার সুযোগ ছিল। আমাদের তৃতীয়-পক্ষের পরিষেবা কর্মীকে একটি সামান্য ভিন্ন ইভেন্ট পরিচালনা করার সুযোগ দেওয়া হয়েছে, যার নাম foreignfetch ৷ ধারণাগতভাবে, দুটি ইভেন্ট বেশ একই রকম, এবং তারা আপনাকে আগত অনুরোধটি পরিদর্শন করার সুযোগ দেয়, এবং ঐচ্ছিকভাবে respondWith() মাধ্যমে এটির প্রতিক্রিয়া প্রদান করে।

self.addEventListener('foreignfetch', event => {
    // Assume that requestLogic() is a custom function that takes
    // a Request and returns a Promise which resolves with a Response.
    event.respondWith(
    requestLogic(event.request).then(response => {
        return {
        response: response,
        // Omit to origin to return an opaque response.
        // With this set, the client will receive a CORS response.
        origin: event.origin,
        // Omit headers unless you need additional header filtering.
        // With this set, only Content-Type will be exposed.
        headers: ['Content-Type']
        };
    })
    );
});

ধারণাগত মিল থাকা সত্ত্বেও, একটি ForeignFetchEvent এ respondWith() কল করার সময় অনুশীলনে কিছু পার্থক্য রয়েছে। Response (অথবা Promise যা একটি Response দিয়ে সমাধান করে respondWith() প্রদান করার পরিবর্তে, যেমন আপনি একটি FetchEvent সাথে করেন , আপনাকে একটি Promise পাস করতে হবে যা নির্দিষ্ট বৈশিষ্ট্য সহ একটি অবজেক্টের সাথে সমাধান করে ForeignFetchEvent এর respondWith() :

• response প্রয়োজন, এবং অবশ্যই Response অবজেক্টে সেট করতে হবে যা অনুরোধকারী ক্লায়েন্টকে ফেরত দেওয়া হবে। আপনি একটি বৈধ Response ছাড়া অন্য কিছু প্রদান করলে, ক্লায়েন্টের অনুরোধ একটি নেটওয়ার্ক ত্রুটির সাথে সমাপ্ত হবে৷ একটি fetch ইভেন্ট হ্যান্ডলারের ভিতরে respondWith() কল করার বিপরীতে, আপনাকে অবশ্যই এখানে একটি Response প্রদান করতে হবে , একটি Promise নয় যা একটি Response সাথে সমাধান করে! আপনি একটি প্রতিশ্রুতি শৃঙ্খলের মাধ্যমে আপনার প্রতিক্রিয়া তৈরি করতে পারেন এবং সেই চেইনটিকে পরামিতি হিসাবে foreignfetch এর respondWith() এ পাস করতে পারেন, তবে চেইনটিকে অবশ্যই একটি অবজেক্টের সাথে সমাধান করতে হবে যাতে একটি Response অবজেক্টে সেট করা response বৈশিষ্ট্য রয়েছে। আপনি উপরের কোড নমুনায় এটির একটি প্রদর্শন দেখতে পারেন।
• origin হল ঐচ্ছিক, এবং প্রত্যাবর্তিত প্রতিক্রিয়া অস্বচ্ছ কিনা তা নির্ধারণ করতে এটি ব্যবহার করা হয়। আপনি এটি ছেড়ে দিলে, প্রতিক্রিয়া অস্বচ্ছ হবে, এবং ক্লায়েন্টের প্রতিক্রিয়ার মূল অংশ এবং শিরোনামগুলিতে সীমিত অ্যাক্সেস থাকবে। যদি অনুরোধটি mode: 'cors' , তাহলে একটি অস্বচ্ছ প্রতিক্রিয়া প্রদান করা একটি ত্রুটি হিসাবে বিবেচিত হবে। যাইহোক, আপনি যদি দূরবর্তী ক্লায়েন্টের উৎপত্তির সমান একটি স্ট্রিং মান নির্দিষ্ট করেন (যা event.origin এর মাধ্যমে পাওয়া যেতে পারে), আপনি স্পষ্টভাবে ক্লায়েন্টকে একটি CORS-সক্ষম প্রতিক্রিয়া প্রদান করতে বেছে নিচ্ছেন।
• headers ঐচ্ছিক, এবং শুধুমাত্র তখনই উপযোগী যদি আপনি origin নির্দিষ্ট করেন এবং একটি CORS প্রতিক্রিয়া প্রদান করেন। ডিফল্টরূপে, শুধুমাত্র CORS-নিরাপদ প্রতিক্রিয়া শিরোনাম তালিকার শিরোনামগুলি আপনার প্রতিক্রিয়াতে অন্তর্ভুক্ত করা হবে। আপনি যদি আরও ফিল্টার করতে চান যা ফেরত এসেছে, শিরোনামগুলি এক বা একাধিক শিরোনামের নামের একটি তালিকা নেয় এবং এটি প্রতিক্রিয়াতে কোন শিরোনামগুলি প্রকাশ করতে হবে তার একটি অনুমোদিত তালিকা হিসাবে এটি ব্যবহার করবে৷ এটি আপনাকে CORS-এ অপ্ট-ইন করার অনুমতি দেয় যখন এখনও সম্ভাব্য সংবেদনশীল প্রতিক্রিয়া শিরোনামগুলিকে দূরবর্তী ক্লায়েন্টের কাছে সরাসরি প্রকাশ করা থেকে বাধা দেয়।

এটি লক্ষ্য করা গুরুত্বপূর্ণ যে যখন foreignfetch হ্যান্ডলার চালানো হয়, তখন এটি পরিষেবা কর্মীকে হোস্ট করা মূলের সমস্ত শংসাপত্র এবং পরিবেষ্টিত কর্তৃপক্ষের অ্যাক্সেস পায় ৷ একজন বিকাশকারী একজন বিদেশী আনয়ন-সক্ষম পরিষেবা কর্মীকে মোতায়েন করার জন্য, এটি নিশ্চিত করা আপনার দায়িত্ব যে আপনি কোনো বিশেষ সুবিধাপ্রাপ্ত প্রতিক্রিয়া ডেটা ফাঁস করবেন না যা অন্যথায় এই শংসাপত্রগুলির কারণে উপলব্ধ হবে না। CORS প্রতিক্রিয়াগুলির জন্য একটি অপ্ট-ইন প্রয়োজন অসাবধানতা প্রকাশকে সীমিত করার একটি পদক্ষেপ, কিন্তু একজন বিকাশকারী হিসাবে আপনি স্পষ্টভাবে আপনার foreignfetch হ্যান্ডলারের মধ্যে fetch() অনুরোধ করতে পারেন যা এর মাধ্যমে অন্তর্নিহিত শংসাপত্রগুলি ব্যবহার করে না :

self.addEventListener('foreignfetch', event => {
    // The new Request will have credentials omitted by default.
    const noCredentialsRequest = new Request(event.request.url);
    event.respondWith(
    // Replace with your own request logic as appropriate.
    fetch(noCredentialsRequest)
        .catch(() => caches.match(noCredentialsRequest))
        .then(response => ({response}))
    );
});

ক্লায়েন্ট বিবেচনা

কিছু অতিরিক্ত বিবেচনা রয়েছে যা আপনার বিদেশী আনয়ন পরিষেবা কর্মী কীভাবে আপনার পরিষেবার ক্লায়েন্টদের কাছ থেকে করা অনুরোধগুলি পরিচালনা করে তা প্রভাবিত করে।

ক্লায়েন্টদের নিজস্ব প্রথম পক্ষের পরিষেবা কর্মী আছে

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

প্রথম পক্ষের পরিষেবা কর্মীর মধ্যে fetch হ্যান্ডলার(গুলি) ওয়েব অ্যাপের দ্বারা করা সমস্ত অনুরোধের উত্তর দেওয়ার প্রথম সুযোগ পায়, এমনকি যদি অনুরোধটি কভার করে এমন একটি সুযোগ সহ foreignfetch সক্ষম সহ তৃতীয় পক্ষের পরিষেবা কর্মী থাকে। কিন্তু প্রথম পক্ষের পরিষেবা কর্মীদের সঙ্গে ক্লায়েন্ট এখনও আপনার বিদেশী আনা পরিষেবা কর্মীর সুবিধা নিতে পারেন!

প্রথম-পক্ষের পরিষেবা কর্মীর ভিতরে, ক্রস-অরিজিন সংস্থানগুলি পুনরুদ্ধার করতে fetch() ব্যবহার করা উপযুক্ত বিদেশী ফেচ পরিষেবা কর্মীকে ট্রিগার করবে৷ তার মানে নিচের মত কোড আপনার foreignfetch হ্যান্ডলারের সুবিধা নিতে পারে:

// Inside a client's first-party service-worker.js:
self.addEventListener('fetch', event => {
    // If event.request is under your foreign fetch service worker's
    // scope, this will trigger your foreignfetch handler.
    event.respondWith(fetch(event.request));
});

একইভাবে, যদি ফার্স্ট-পার্টি ফেচ হ্যান্ডলার থাকে, কিন্তু আপনার ক্রস-অরিজিন রিসোর্সের জন্য অনুরোধগুলি পরিচালনা করার সময় তারা event.respondWith() কল না করে, অনুরোধটি স্বয়ংক্রিয়ভাবে আপনার foreignfetch হ্যান্ডলারের কাছে "পড়ে যাবে":

// Inside a client's first-party service-worker.js:
self.addEventListener('fetch', event => {
    if (event.request.mode === 'same-origin') {
    event.respondWith(localRequestLogic(event.request));
    }

    // Since event.respondWith() isn't called for cross-origin requests,
    // any foreignfetch handlers scoped to the request will get a chance
    // to provide a response.
});

যদি কোনো প্রথম পক্ষের fetch হ্যান্ডলার event.respondWith() কল করে কিন্তু আপনার বিদেশী আনার সুযোগের অধীনে একটি সংস্থান অনুরোধ করতে fetch() ব্যবহার না করে, তাহলে আপনার বিদেশী ফেচ পরিষেবা কর্মী অনুরোধটি পরিচালনা করার সুযোগ পাবেন না।

ক্লায়েন্টদের নিজস্ব পরিষেবা কর্মী নেই

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

এটি সব একত্রিত করা: যেখানে ক্লায়েন্টরা একটি প্রতিক্রিয়া খুঁজছেন

উপরের তথ্যগুলিকে বিবেচনায় রেখে, আমরা একটি ক্রস-অরিজিন অনুরোধের জন্য একটি প্রতিক্রিয়া খুঁজে পেতে একটি ক্লায়েন্ট ব্যবহার করবে এমন উত্সগুলির একটি শ্রেণিবিন্যাস একত্রিত করতে পারি৷

1. একজন প্রথম পক্ষের পরিষেবা কর্মীর fetch হ্যান্ডলার (যদি উপস্থিত থাকে)
2. একটি তৃতীয় পক্ষের পরিষেবা কর্মীর foreignfetch হ্যান্ডলার (যদি উপস্থিত থাকে, এবং শুধুমাত্র ক্রস-অরিজিন অনুরোধের জন্য)
3. ব্রাউজারের HTTP ক্যাশে (যদি একটি নতুন প্রতিক্রিয়া বিদ্যমান থাকে)
4. নেটওয়ার্ক

ব্রাউজারটি উপরে থেকে শুরু হয় এবং, পরিষেবা কর্মী বাস্তবায়নের উপর নির্ভর করে, এটি প্রতিক্রিয়ার জন্য একটি উৎস খুঁজে না পাওয়া পর্যন্ত তালিকাটি নিচে চালিয়ে যাবে।

আরও জানুন

• বিদেশী আনা ব্যাখ্যাকারী
• নমুনা কোড এবং লাইভ ডেমো
• পরিষেবা কর্মী সমস্যা ট্র্যাকার

আপ টু ডেট থাকুন

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