ওয়েব অ্যাপ স্কোপ এক্সটেনশন

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

Demián Renzulli

Thomas Steiner

সংক্ষিপ্ত বিবরণ

কিছু ওয়েব অ্যাপ্লিকেশনের একাধিক উৎস থাকে, উদাহরণস্বরূপ, example.com প্রধান অ্যাপ হিসেবে, এবং তারপর space_1.example.com , …, space_n.example.com , কখনও কখনও special-example.com এর সাথে মিলিত হয়ে সাব-অভিজ্ঞতা হিসেবে কাজ করে, যা মূল অ্যাপের ছাদের নিচে থাকে। এই ধরণের সাইট আর্কিটেকচারের প্রেক্ষাপটে প্রোগ্রেসিভ ওয়েব অ্যাপের প্রভাব রয়েছে। সীমাবদ্ধতার মধ্যে রয়েছে পরিষেবা কর্মী, যেকোনো ধরণের ডিভাইস, স্থানীয় স্টোরেজ এবং অরিজিন জুড়ে অনুমতি শেয়ার করতে না পারা। এছাড়াও, একটি স্বতন্ত্র PWA-তে ক্রস-অরিজিন নেভিগেশন একটি উইন্ডো UI ("স্কোপের বাইরে" বার) দেখায় যা নির্দেশ করে যে ব্যবহারকারী PWA অভিজ্ঞতা থেকে বেরিয়ে এসেছে। আপনি এই সমস্যাগুলির কিছু সমাধান কীভাবে করবেন তা "মাল্টি-অরিজিন সাইটগুলিতে প্রোগ্রেসিভ ওয়েব অ্যাপস" এবং একই ডোমেনে একাধিক প্রোগ্রেসিভ ওয়েব অ্যাপস তৈরি করা" নিবন্ধগুলিতে শিখতে পারেন।

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

দ্রষ্টব্য: এই লেখার সময়, শুধুমাত্র ChromeOS এই ডকুমেন্টে অন্তর্ভুক্ত স্কোপ এক্সটেনশনের উভয় বৈশিষ্ট্যই সমর্থন করে (ক্রস-অরিজিন ইন-স্কোপ নেভিগেশন এবং ক্রস-অরিজিন লিঙ্ক ক্যাপচারিং)। উইন্ডোজ, ম্যাকওএস এবং লিনাক্সে ক্রোমেও ক্রস-অরিজিন ইন-স্কোপ নেভিগেশন সমর্থিত, তবে লিঙ্ক ক্যাপচারিংয়ের সাথে ইন্টিগ্রেশন এখনও এই প্ল্যাটফর্মগুলিতে উপলব্ধ নয়। স্কোপ এক্সটেনশনগুলি এখনও মোবাইল ডিভাইসগুলিতে উপলব্ধ নয়।

লক্ষ্য

স্কোপ এক্সটেনশন API-এর মূল লক্ষ্য হল একাধিক সাবডোমেন এবং শীর্ষ স্তরের ডোমেন নিয়ন্ত্রণকারী সাইটগুলিকে ওয়েব অ্যাপ UI এবং লিঙ্ক ক্যাপচারিংয়ের ক্ষেত্রে একটি সংলগ্ন ওয়েব অ্যাপ হিসাবে আচরণ করার অনুমতি দেওয়া। উদাহরণস্বরূপ, example.com.co.uk এবং support.example.com এর মধ্যে বিস্তৃত সাইট example.com একটি একক ওয়েব অ্যাপ্লিকেশনের মতো যতটা সম্ভব আচরণ করতে দেওয়া।

স্কোপ এক্সটেনশনগুলি মাল্টি-অরিজিন PWA গুলিকে ওয়েব অ্যাপ UI-এর ক্ষেত্রে একটি সংলগ্ন ওয়েব অ্যাপ হিসেবে আচরণ করার অনুমতি দেয়।

বাস্তবে, এটি আরও দুটি নির্দিষ্ট লক্ষ্যে অনুবাদ করে:

• ক্রস-অরিজিন নেভিগেশন: ব্যবহারকারীদের PWA থেকে দূরে সরে যাওয়ার বিষয়টি জানিয়ে উইন্ডো UI ব্যবহার করে ব্যবহারকারীর অভিজ্ঞতা ব্যাহত না করে সংশ্লিষ্ট অরিজিনগুলিতে নেভিগেট করার অনুমতি দিন।
• ক্রস-অরিজিন লিঙ্ক ক্যাপচারিং: ওয়েব অ্যাপগুলিকে তাদের অনুমোদিত সাইটগুলিতে ব্যবহারকারীর নেভিগেশন ক্যাপচার করার অনুমতি দিন।

ক্রস-অরিজিন ইন-স্কোপ নেভিগেশন

ডিফল্টরূপে, যখন ব্যবহারকারীরা একটি স্বতন্ত্র PWA-তে অরিজিন জুড়ে নেভিগেট করেন, তখন তাদের একটি উইন্ডো UI দেখানো হয় যা নির্দেশ করে যে তারা PWA অভিজ্ঞতার বাইরে চলে যাচ্ছে। Chrome-এ, এই UI-তে একটি "আউট অফ স্কোপ" বার থাকে যাতে নতুন অরিজিনের URL থাকে। এটি ব্যবহারকারীর অভিজ্ঞতার জন্য ব্যাঘাত ঘটায়, কারণ ব্যবহারকারীরা একই অ্যাপ্লিকেশন প্রসঙ্গে নেভিগেট চালিয়ে যাওয়ার আশা করেন, তবে তারা বুঝতে পারেন যে তাদের এটি থেকে সরিয়ে নেওয়া হচ্ছে।

ব্যবহারকারীরা যখন একটি স্বতন্ত্র PWA-তে বিভিন্ন উৎস জুড়ে নেভিগেট করেন, তখন Chrome-এ "আউট অফ স্কোপ" বারটি দেখানো হয়।

স্কোপ এক্সটেনশনের সাহায্যে, ব্যবহারকারীরা যখন সংশ্লিষ্ট কোনও উৎসে নেভিগেট করবেন তখন উইন্ডো UI প্রদর্শিত হবে না, তাই PWA একটি সমন্বিত অভিজ্ঞতা হিসেবে উপস্থাপিত হবে।

ক্রস-অরিজিন লিঙ্ক ক্যাপচারিং

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

ChromeOS-এ একটি ট্যাবের জন্য Chrome অ্যাড্রেস বারের টুকরোটি একটি দৃশ্যমান ইঙ্গিত দেখায় যে লিঙ্কটি একটি PWA দ্বারা পরিচালনা করা যেতে পারে এবং সেই সিদ্ধান্তটি মনে রাখার বিকল্প রয়েছে।

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

বাস্তবায়ন

স্কোপ এক্সটেনশন বাস্তবায়নের জন্য মূল উৎস এবং সংশ্লিষ্ট উৎসের মধ্যে সম্পর্ক স্থাপন করা প্রয়োজন।

সংশ্লিষ্ট উৎসের তালিকা ঘোষণা করুন

মূল PWA অরিজিনে একটি scope_extensions ওয়েব অ্যাপ ম্যানিফেস্ট সদস্য যোগ করুন যাতে ওয়েব অ্যাপটি তাদের স্কোপ অন্যান্য অরিজিনে প্রসারিত করতে পারে।

ওয়েব অ্যাপ ম্যানিফেস্ট (https://example.com)

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

অ্যাসোসিয়েশন নিশ্চিত করুন

তালিকাভুক্ত প্রতিটি অরিজিন /.well-known/web-app-origin-association কনফিগারেশন ফাইল ব্যবহার করে ওয়েব অ্যাপের সাথে সংযোগ নিশ্চিত করে। এই ফাইলটির নাম web-app-origin-association রাখতে হবে এবং এটি একটি Well-Known URI হওয়ায় এই সঠিক স্থানে পরিবেশন করতে হবে।

/.well-known/web-app-origin-association (সম্পর্কিত উৎপত্তি)

{
  "web_apps": [{ "web_app_identity": "https://example.com" }]
}

ডেমো

ডেমোটিতে দুটি সাইট রয়েছে:

• প্রধান PWA : প্রকৃত PWA যা তার ওয়েব অ্যাপ ম্যানিফেস্টে scope_extensions সদস্যের মাধ্যমে সংশ্লিষ্ট উৎসের তালিকা ঘোষণা করে।
• বর্ধিত সুযোগে উৎপত্তি : মূল PWA-এর সুযোগের বাইরে একটি উৎপত্তি কিন্তু প্রধান PWA দ্বারা একটি সহযোগী উৎপত্তি হিসাবে তালিকাভুক্ত হওয়ার পরে এবং এর web-app-origin-association ফাইলের মাধ্যমে সম্পর্ক নিশ্চিত করার পরে এর সাথে যুক্ত।

নিম্নলিখিত পরীক্ষাগুলি সম্পাদন করার জন্য, আপনাকে about://flags/#enable-desktop-pwas-scope-extensions ফ্ল্যাগটি সক্ষম করতে হবে (Chrome v115 থেকে উপলব্ধ)।

ক্রস-অরিজিন নেভিগেশন পরীক্ষা করুন

এই পরীক্ষাগুলির পূর্বশর্ত হিসেবে, একটি ব্রাউজারে প্রধান PWA খুলুন, এটিকে PWA হিসেবে ইনস্টল করুন এবং এটিকে স্বতন্ত্র মোডে চালানোর জন্য খুলুন। PWA-তে বর্ধিত স্কোপে একটি অরিজিন এবং বর্ধিত স্কোপে নয় এমন অরিজিনের লিঙ্ক রয়েছে।

বর্ধিত স্কোপে উৎপত্তি এবং বর্ধিত স্কোপে উৎপত্তি নয় এমন উৎসের লিঙ্ক সহ PWA ডেমো।

ডিফল্ট ক্রস-অরিজিন নেভিগেশন (বর্ধিত স্কোপে নয়)

1. পূর্ণ পর্দার PWA-এর ভিতরে "অরিজিন নট ইন এক্সটেন্ডেড স্কোপ" লিঙ্কে ক্লিক করুন।
2. ফলস্বরূপ, নেভিগেশন ঘটে এবং সুযোগের বাইরের বারটি প্রদর্শিত হয়।

স্বতন্ত্র মোডে PWA-এর জন্য ক্রস-অরিজিন নেভিগেশনের জন্য "আউট অফ স্কোপ" বারটি ডিফল্টরূপে দেখানো হয়।

স্কোপ এক্সটেনশন সহ ক্রস-অরিজিন নেভিগেশন (বর্ধিত স্কোপে)

1. PWA এর হোম পেজে ফিরে যান।
2. বর্ধিত সুযোগে নয় এমন উৎসের লিঙ্কে ক্লিক করুন।
3. ডিফল্টরূপে, একটি "আউট অফ স্কোপ" বার দেখানো উচিত, কিন্তু স্কোপ এক্সটেনশন অ্যাসোসিয়েশনের কারণে, তা দেখানো হয় না।

স্কোপ এক্সটেনশনের সাথে অরিজিন অ্যাসোসিয়েশন তৈরি করার পরে ক্রস-অরিজিন নেভিগেশনে "আউট অফ স্কোপ" বারটি দেখানো হচ্ছে না।

ক্রস-অরিজিন লিঙ্ক ক্যাপচারিং পরীক্ষা করুন

1. একটি ChromeOS ডিভাইসে মূল PWA খুলুন এবং ইনস্টল করুন।
2. নিম্নলিখিত লিঙ্কে ক্লিক করুন: সংশ্লিষ্ট উৎপত্তি ।
3. লিঙ্কটি একটি নতুন ব্রাউজার ট্যাবে খোলা হবে এবং ইনস্টল করা PWA-তে এটি খোলার জন্য একটি প্রম্পট দেখানো হবে।

PWA-এর সংশ্লিষ্ট উৎসের লিঙ্কে ক্লিক করলে লিঙ্কটি একটি নতুন ট্যাবে খোলে এবং "অ্যাপে খুলুন" আইকন দেখায় যা ব্যবহারকারীকে স্বয়ংক্রিয় লিঙ্ক ক্যাপচারের জন্য অপ্ট-ইন করার অনুমতি দেয়।

অরিজিন ট্রায়াল

যদি আপনি আপনার অ্যাপ্লিকেশনে এই APIটি প্রকৃত ব্যবহারকারীদের সাথে পরীক্ষা করতে চান, তাহলে আপনি একটি origin trial দিয়ে তা করতে পারেন। Origin trials আপনাকে আপনার ডোমেনের সাথে সংযুক্ত একটি টেস্টিং টোকেন পেয়ে আপনার ব্যবহারকারীদের সাথে পরীক্ষামূলক বৈশিষ্ট্যগুলি চেষ্টা করতে দেয়। তারপরে আপনি আপনার অ্যাপটি স্থাপন করতে পারেন এবং আশা করতে পারেন যে এটি এমন একটি ব্রাউজারে কাজ করবে যা আপনার পরীক্ষা করা বৈশিষ্ট্যটিকে সমর্থন করে (এই ক্ষেত্রে, এটি Chrome এ 121 থেকে 126 পর্যন্ত উপলব্ধ)। একটি origin trial চালানোর জন্য আপনার নিজস্ব টোকেন পেতে, আবেদন ফর্মটি পূরণ করুন।

প্রতিক্রিয়া

Chrome টিম এই API এর কার্যকারিতা সম্পর্কে প্রতিক্রিয়া খুঁজছে। এই API এর কার্যকারিতা এবং বর্তমান সংস্করণে অন্তর্ভুক্ত নয় এমন নতুন ব্যবহারের ক্ষেত্রে প্রতিক্রিয়া সহ টিমকে এই API কে বিকশিত করতে সহায়তা করার জন্য, GitHub এ একটি সমস্যা খুলুন।

অতিরিক্ত সম্পদ

• স্কোপ এক্সটেনশন API - অরিজিন ট্রায়াল
• Chrome স্ট্যাটাস - ওয়েব অ্যাপ স্কোপ এক্সটেনশন
• ওয়েব অ্যাপ্লিকেশন ব্যাখ্যাকারীর জন্য স্কোপ এক্সটেনশন
• পরীক্ষা-নিরীক্ষার অভিপ্রায়
• মজিলা স্ট্যান্ডার্ডস পজিশন
• অ্যাপল স্ট্যান্ডার্ডস পজিশন
• ক্রোমিয়াম বাগ
• মাল্টি অরিজিন সাইটে প্রগতিশীল ওয়েব অ্যাপস
• একই ডোমেনে একাধিক প্রগতিশীল ওয়েব অ্যাপ তৈরি করা

স্বীকৃতি

এই API তৈরির পেছনের দলকে বিশেষ ধন্যবাদ। স্কোপ এক্সটেনশনগুলি অ্যালান কাটার এবং লু হুয়াং দ্বারা নির্দিষ্ট করা হয়েছিল, ম্যাট গিউকার ইনপুট নিয়ে। APIটি গুগল ক্রোমের অ্যালান কাটার এবং মাইক্রোসফ্ট এজ থেকে হাসান তালাত , ক্রিস্টিন লি এবং লু হুয়াং দ্বারা বাস্তবায়িত হয়েছিল।