URL হ্যান্ডলার হিসাবে PWAs

আরও সমন্বিত অভিজ্ঞতার জন্য ইনস্টল করা PWA-গুলিকে URL গুলি পরিচালনা করতে দিন।

টমাস স্টেইনার

URL হ্যান্ডলার হিসাবে PWAs কি?

কল্পনা করুন আপনি ম্যাকওএস-এ বার্তার মতো একটি তাত্ক্ষণিক মেসেঞ্জার অ্যাপ্লিকেশন ব্যবহার করে একজন বন্ধুর সাথে চ্যাট করছেন এবং আপনি সঙ্গীত সম্পর্কে কথা বলছেন। আরও কল্পনা করুন যে আপনার উভয়েরই আপনার ডিভাইসে music.example.com PWA ইনস্টল করা আছে। আপনি যদি আপনার বন্ধুকে উপভোগ করার জন্য আপনার প্রিয় ট্র্যাক শেয়ার করতে চান, আপনি তাদের একটি গভীর লিঙ্ক পাঠাতে পারেন যেমন https://music.example.com/rick-astley/never-gonna-give-you-up । যেহেতু এই লিঙ্কটি বেশ দীর্ঘ, তাই music.example.com এর বিকাশকারীরা প্রতিটি ট্র্যাকের সাথে একটি অতিরিক্ত ছোট লিঙ্ক যোগ করার সিদ্ধান্ত নিতে পারে, যেমন, https://🎵.example.com/ra/nggyu ।

URL হ্যান্ডলার হিসেবে PWA music.example.com এর মতো অ্যাপগুলিকে https://music.example.com , https://*.music.example.com , বা https://🎵.example.com মতো প্যাটার্নের সাথে মেলে এমন URLগুলির জন্য URL হ্যান্ডলার হিসেবে নিজেদের নিবন্ধন করতে দেয় https://🎵.example.com , যাতে PWA এর বাইরের লিঙ্কগুলি, উদাহরণস্বরূপ, একটি তাত্ক্ষণিক মেসেঞ্জার অ্যাপ্লিকেশন বা একটি ইমেল ক্লায়েন্ট থেকে, ব্রাউজার ট্যাবের পরিবর্তে ইনস্টল করা PWA-তে খুলতে পারে৷

ইউআরএল হ্যান্ডলার হিসাবে PWA দুটি সংযোজন নিয়ে গঠিত:

  1. "url_handlers" ওয়েব অ্যাপ ম্যানিফেস্ট সদস্য।
  2. web-app-origin-association ফাইল ফরম্যাট ইন- এবং অফ-স্কোপের ইউআরএল অ্যাসোসিয়েশন যাচাই করার জন্য।

ইউআরএল হ্যান্ডলার হিসাবে PWA-এর জন্য প্রস্তাবিত ব্যবহারের ক্ষেত্রে

এই API ব্যবহার করতে পারে এমন সাইটগুলির উদাহরণগুলির মধ্যে রয়েছে:

  • মিউজিক বা ভিডিও স্ট্রিমিং সাইট তাই অ্যাপের প্লেয়ার অভিজ্ঞতায় ট্র্যাক লিঙ্ক বা প্লেলিস্ট লিঙ্ক খোলা থাকে।
  • সংবাদ বা RSS পাঠকরা তাই অনুসরণ করা বা সাবস্ক্রাইব করা সাইটগুলি অ্যাপের রিডার মোডে খোলা।

ইউআরএল হ্যান্ডলার হিসাবে PWAs কিভাবে ব্যবহার করবেন

প্রায়://পতাকাগুলির মাধ্যমে সক্ষম করা হচ্ছে৷

স্থানীয়ভাবে ইউআরএল হ্যান্ডলার হিসেবে PWA-এর সাথে পরীক্ষা করতে, কোনো অরিজিন ট্রায়াল টোকেন ছাড়াই, about://flags এ #enable-desktop-pwas-url-handling পতাকা সক্রিয় করুন।

"url_handlers" ওয়েব অ্যাপ ম্যানিফেস্ট সদস্য

একটি ইনস্টল করা PWA-কে URL প্যাটার্নের সাথে সংযুক্ত করতে, এই প্যাটার্নগুলিকে ওয়েব অ্যাপ ম্যানিফেস্টে উল্লেখ করতে হবে। এটি "url_handlers" সদস্যের মাধ্যমে ঘটে। এটি একটি origin প্রোপার্টি সহ অবজেক্টের একটি অ্যারে গ্রহণ করে, যা একটি প্রয়োজনীয় string যা মিলিত অরিজিনগুলির জন্য একটি প্যাটার্ন। একাধিক সাব-ডোমেন (যেমন https://*.example.com ) অন্তর্ভুক্ত করার জন্য এই প্যাটার্নগুলিতে একটি ওয়াইল্ডকার্ড ( * ) উপসর্গ থাকার অনুমতি রয়েছে। এই উৎসগুলির সাথে মেলে এমন URLগুলি এই ওয়েব অ্যাপ দ্বারা পরিচালনা করা যেতে পারে৷ স্কিমটি সর্বদা https:// বলে ধরে নেওয়া হয়, তবে এটি স্পষ্টভাবে উল্লেখ করা প্রয়োজন।

নীচের একটি ওয়েব অ্যাপের উদ্ধৃতিটি দেখায় যে পরিচায়ক অনুচ্ছেদ থেকে সঙ্গীত PWA উদাহরণ কীভাবে এটি সেট আপ করতে পারে৷ ওয়াইল্ডকার্ড ( "https://*.music.example.com" ) সহ দ্বিতীয় এন্ট্রি নিশ্চিত করে যে অ্যাপটি https://www.music.example.com বা https://marketing-activity.music.example.com এর মতো সম্ভাব্য অন্যান্য উদাহরণের জন্যও সক্রিয় করা হয়েছে। https://marketing-activity.music.example.com

{
  "url_handlers": [
    {
      "origin": "https://music.example.com"
    },
    {
      "origin": "https://*.music.example.com"
    },
    {
      "origin": "https://🎵.example.com"
    }
  ]
}

web-app-origin-association ফাইল

যেহেতু PWA এর কিছু ইউআরএল (উদাহরণস্বরূপ, https://🎵.example.com ) এর চেয়ে ভিন্ন উৎসে ( music.example.com ) বাস করে, তাই অ্যাপটিকে এই অন্যান্য উৎসগুলির মালিকানা যাচাই করতে হবে। এটি অন্য অরিজিনে হোস্ট করা একটি web-app-origin-association ফাইলে ঘটে।

এই ফাইলে অবশ্যই বৈধ JSON থাকতে হবে। শীর্ষ-স্তরের কাঠামো হল একটি বস্তু, যার নাম "web_apps" । এই সদস্য বস্তুর একটি অ্যারে এবং প্রতিটি বস্তু একটি অনন্য ওয়েব অ্যাপের জন্য একটি এন্ট্রি প্রতিনিধিত্ব করে। প্রতিটি বস্তুর মধ্যে রয়েছে:

মাঠ বর্ণনা টাইপ ডিফল্ট
"manifest" (প্রয়োজনীয়) সংশ্লিষ্ট PWA-এর ওয়েব অ্যাপ ম্যানিফেস্টের URL স্ট্রিং string N/A
"details" (ঐচ্ছিক) একটি বস্তু যাতে অন্তর্ভুক্ত এবং বাদ দেওয়া URL প্যাটার্নের অ্যারে রয়েছে৷ object N/A

প্রতিটি "details" বস্তুর মধ্যে রয়েছে:

মাঠ বর্ণনা টাইপ ডিফল্ট
"paths" (ঐচ্ছিক) অনুমোদিত পাথ স্ট্রিংগুলির অ্যারে string[] []
"exclude_paths" (ঐচ্ছিক) অননুমোদিত পাথ স্ট্রিংগুলির অ্যারে string[] []

উপরে থেকে সঙ্গীত PWA উদাহরণের জন্য একটি web-app-origin-association ফাইল নীচে দেওয়া হল। এটি মূল 🎵.example.com এ হোস্ট করা হবে এবং music.example.com PWA-এর সাথে অ্যাসোসিয়েশন স্থাপন করবে, যা এর ওয়েব অ্যাপ ম্যানিফেস্ট URL দ্বারা চিহ্নিত করা হয়েছে।

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

কখন একটি URL মেলে?

একটি পিডব্লিউএ হ্যান্ডল করার জন্য একটি URL এর সাথে মেলে যদি নিম্নলিখিত দুটি শর্ত পূরণ করা হয়:

  • URLটি "url_handlers" এর মূল স্ট্রিংগুলির একটির সাথে মেলে।
  • ব্রাউজারটি সংশ্লিষ্ট web-app-origin-association ফাইলের মাধ্যমে যাচাই করতে সক্ষম যে প্রতিটি অরিজিন এই অ্যাপটিকে এমন একটি URL পরিচালনা করতে দিতে সম্মত হয়।

web-app-origin-association ফাইল আবিষ্কার সংক্রান্ত

ব্রাউজারটি web-app-origin-association ফাইলটি আবিষ্কার করতে, ডেভেলপারদেরকে অ্যাপের রুটে /.well-known/ ফোল্ডারে web-app-origin-association ফাইলটি রাখতে হবে। এটি কাজ করার জন্য, ফাইলের নামটি অবশ্যই web-app-origin-association হতে হবে।

ডেমো

ইউআরএল হ্যান্ডলার হিসেবে পিডব্লিউএ পরীক্ষা করতে, উপরে বর্ণিত হিসাবে ব্রাউজার ফ্ল্যাগ সেট করতে ভুলবেন না এবং তারপরে https://mandymsft.github.io/pwa/ এ PWA ইনস্টল করুন। এর ওয়েব অ্যাপ ম্যানিফেস্ট দেখে, আপনি দেখতে পাচ্ছেন যে এটি নিম্নলিখিত URL প্যাটার্ন সহ URLগুলি পরিচালনা করে: https://mandymsft.github.io এবং https://luhuangmsft.github.io । যেহেতু পরেরটি PWA-এর থেকে ভিন্ন উৎসে ( luhuangmsft.github.io ) রয়েছে, তাই mandymsft.github.io এর PWA-কে মালিকানা প্রমাণ করতে হবে, যা https:// এ হোস্ট করা web-app-origin-association ফাইলের মাধ্যমে ঘটে luhuangmsft.github.io/.well-known/web-app-origin-association

এটি সত্যিই কাজ করছে কিনা তা পরীক্ষা করতে, আপনার পছন্দের একটি তাত্ক্ষণিক বার্তাপ্রেরণ অ্যাপ ব্যবহার করে নিজেকে একটি পরীক্ষামূলক বার্তা পাঠান বা একটি ইমেল ক্লায়েন্টে দেখা একটি ইমেল পাঠান যা macOS-এ মেইলের মতো ওয়েব-ভিত্তিক নয়। ইমেল বা টেক্সট মেসেজে https://mandymsft.github.io বা https://luhuangmsft.github.io লিঙ্কগুলির মধ্যে একটি থাকা উচিত। উভয়ই ইনস্টল করা PWA এ খোলা উচিত।

ইনস্টল করা ডেমো PWA এর পাশে Windows Skype ইনস্ট্যান্ট মেসেঞ্জার অ্যাপ, যা একটি স্কাইপ চ্যাট বার্তার দ্বারা পরিচালিত একটি লিঙ্কে ক্লিক করার পরে স্বতন্ত্র মোডে খোলা হয়।

নিরাপত্তা এবং অনুমতি

Chromium টিম PWAs কে ইউআরএল হ্যান্ডলার হিসেবে ডিজাইন করেছে এবং প্রয়োগ করেছে ব্যবহারকারীর নিয়ন্ত্রণ, স্বচ্ছতা এবং ergonomics সহ শক্তিশালী ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলিতে অ্যাক্সেস নিয়ন্ত্রণে সংজ্ঞায়িত মূল নীতিগুলি ব্যবহার করে৷

ব্যবহারকারী নিয়ন্ত্রণ

যদি একটি প্রদত্ত URL প্যাটার্নের জন্য একাধিক PWA একটি URL হ্যান্ডলার হিসাবে নিবন্ধন করে, ব্যবহারকারীকে তারা কোন PWA-এর সাথে প্যাটার্ন পরিচালনা করতে চান তা বেছে নিতে অনুরোধ করা হবে-যদি থাকে। ব্রাউজার ট্যাবে শুরু হওয়া ন্যাভিগেশনগুলি এই প্রস্তাব দ্বারা পরিচালিত হয় না, এটি স্পষ্টভাবে ব্রাউজারের বাইরে শুরু হওয়া নেভিগেশনগুলির লক্ষ্যে।

স্বচ্ছতা

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

প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ্লিকেশনগুলি ইতিমধ্যেই ব্যবহারকারীর সিস্টেমে ইনস্টল করা অ্যাপ্লিকেশনগুলি গণনা করতে অপারেটিং সিস্টেম API ব্যবহার করতে পারে৷ উদাহরণস্বরূপ, উইন্ডোজের অ্যাপ্লিকেশনগুলি URL হ্যান্ডলারদের গণনা করতে FindAppUriHandlersAsync API ব্যবহার করতে পারে। যদি PWA গুলি Windows-এ OS স্তরের URL হ্যান্ডলার হিসাবে নিবন্ধন করে, তাহলে তাদের উপস্থিতি অন্যান্য অ্যাপ্লিকেশনগুলিতে দৃশ্যমান হবে৷

অনুমতি অধ্যবসায়

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

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

Chromium টিম URL হ্যান্ডলার হিসাবে PWA-এর সাথে আপনার অভিজ্ঞতার কথা শুনতে চায়।

API ডিজাইন সম্পর্কে আমাদের বলুন

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

বাস্তবায়নের সাথে একটি সমস্যা রিপোর্ট করুন

আপনি কি Chromium এর বাস্তবায়নের সাথে একটি বাগ খুঁজে পেয়েছেন? অথবা বাস্তবায়ন বৈশিষ্ট থেকে ভিন্ন? new.crbug.com এ একটি বাগ ফাইল করুন। আপনি যতটা পারেন বিশদ অন্তর্ভুক্ত করতে ভুলবেন না, পুনরুত্পাদনের জন্য সহজ নির্দেশাবলী, এবং উপাদান বাক্সে UI>Browser>WebAppInstalls লিখুন। দ্রুত এবং সহজ রিপ্রো শেয়ার করার জন্য গ্লিচ দুর্দান্ত কাজ করে।

API এর জন্য সমর্থন দেখান

আপনি কি ইউআরএল হ্যান্ডলার হিসাবে PWAs ব্যবহার করার পরিকল্পনা করছেন? আপনার সর্বজনীন সমর্থন Chromium টিমকে বৈশিষ্ট্যগুলিকে অগ্রাধিকার দিতে সাহায্য করে এবং অন্যান্য ব্রাউজার বিক্রেতাদের দেখায় যে তাদের সমর্থন করা কতটা গুরুত্বপূর্ণ৷

হ্যাশট্যাগ #URLHandlers ব্যবহার করে @ChromiumDev- এ একটি টুইট পাঠান এবং আপনি এটি কোথায় এবং কীভাবে ব্যবহার করছেন তা আমাদের জানান।

সাহা্য্যকারী লিংক

স্বীকৃতি

ইউআরএল হ্যান্ডলার হিসাবে পিডব্লিউএগুলি মাইক্রোসফ্ট এজ টিমের লু হুয়াং এবং ম্যান্ডি চেন দ্বারা নির্দিষ্ট এবং প্রয়োগ করা হয়েছিল। এই নিবন্ধটি জো মেডলি দ্বারা পর্যালোচনা করা হয়েছে। আনস্প্ল্যাশে ব্রাইসন হ্যামারের হিরো ছবি।