PWA-এর জন্য ট্যাবযুক্ত অ্যাপ্লিকেশন মোড

আপনার প্রগ্রেসিভ ওয়েব অ্যাপে ট্যাব সহ এক সময়ে একাধিক নথিতে কাজ করুন

Thomas Steiner

কম্পিউটিং জগতে, ডেস্কটপ রূপক হল একটি ইন্টারফেস রূপক যা ব্যবহারকারীদের কম্পিউটারের সাথে আরও সহজে যোগাযোগ করতে সাহায্য করার জন্য গ্রাফিকাল ইউজার ইন্টারফেস (GUI) দ্বারা ব্যবহৃত একীভূত ধারণার একটি সেট। ডেস্কটপ রূপকের সাথে তাল মিলিয়ে, GUI ট্যাবগুলিকে বই, কাগজের ফাইল বা কার্ড সূচীতে ঢোকানো ঐতিহ্যবাহী কার্ড ট্যাবের অনুকরণ করা হয়। একটি ট্যাবড ডকুমেন্ট ইন্টারফেস (TDI) বা ট্যাব হল একটি গ্রাফিকাল কন্ট্রোল উপাদান যা একাধিক নথি বা প্যানেলকে একটি উইন্ডোর মধ্যে থাকতে দেয়, নথিগুলির সেটগুলির মধ্যে স্যুইচ করার জন্য একটি নেভিগেশনাল উইজেট হিসাবে ট্যাবগুলি ব্যবহার করে৷

প্রগতিশীল ওয়েব অ্যাপগুলি ওয়েব অ্যাপ ম্যানিফেস্টে display বৈশিষ্ট্য দ্বারা নির্ধারিত বিভিন্ন প্রদর্শন মোডে চলতে পারে। উদাহরণ হল fullscreen , standalone , minimal-ui , এবং browser ৷ এই ডিসপ্লে মোডগুলি একটি সু-সংজ্ঞায়িত ফলব্যাক চেইন অনুসরণ করে ( "fullscreen" → "standalone" → "minimal-ui" → "browser" )। যদি একটি ব্রাউজার একটি প্রদত্ত মোড সমর্থন না করে, এটি চেইনের পরবর্তী প্রদর্শন মোডে ফিরে আসে। "display_override" প্রপার্টির মাধ্যমে, ডেভেলপাররা প্রয়োজনে তাদের নিজস্ব ফলব্যাক চেইন নির্দিষ্ট করতে পারে।

ট্যাবড অ্যাপ্লিকেশন মোড কি?

এখন পর্যন্ত প্ল্যাটফর্ম থেকে অনুপস্থিত কিছু হল PWA ডেভেলপারদের তাদের ব্যবহারকারীদের একটি ট্যাবড ডকুমেন্ট ইন্টারফেস অফার করার একটি উপায়, উদাহরণস্বরূপ, একই PWA উইন্ডোতে বিভিন্ন ফাইল সম্পাদনা সক্ষম করতে। ট্যাবড অ্যাপ্লিকেশন মোড এই ফাঁক বন্ধ করে.

ট্যাবযুক্ত অ্যাপ্লিকেশন মোডের জন্য প্রস্তাবিত ব্যবহারের ক্ষেত্রে

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

• প্রোডাক্টিভিটি অ্যাপ যা ব্যবহারকারীকে একই সময়ে একাধিক নথি (বা ফাইল) সম্পাদনা করতে দেয়।
• কমিউনিকেশন অ্যাপ যা ব্যবহারকারীকে ট্যাব প্রতি বিভিন্ন কক্ষে কথোপকথন করতে দেয়।
• নতুন ইন-অ্যাপ ট্যাবে নিবন্ধের লিঙ্ক খোলে এমন অ্যাপ পড়া।

বিকাশকারী-নির্মিত ট্যাবের পার্থক্য

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

"display": "browser"

বর্তমান "display": "browser" ইতিমধ্যেই একটি নির্দিষ্ট অর্থ রয়েছে:

ব্যবহারকারী এজেন্টে হাইপারলিঙ্ক খোলার জন্য প্ল্যাটফর্ম-নির্দিষ্ট কনভেনশন ব্যবহার করে ওয়েব অ্যাপ্লিকেশন খোলে (যেমন, একটি ব্রাউজার ট্যাবে বা একটি নতুন উইন্ডোতে)।

যদিও ব্রাউজাররা UI এর ব্যাপারে যা খুশি তাই করতে পারে, এটি স্পষ্টতই ডেভেলপারের প্রত্যাশার একটি চমত্কার বড় বিপর্যয় হবে যদি "display": "browser" হঠাৎ বোঝায় "কোন ব্রাউজার সুবিধা ছাড়া একটি পৃথক অ্যাপ্লিকেশন-নির্দিষ্ট উইন্ডোতে চালানো, কিন্তু একটি ট্যাবড ডকুমেন্ট ইন্টারফেস। "

"display": "browser" কার্যকরভাবে যেভাবে আপনি একটি অ্যাপ্লিকেশন উইন্ডোতে রাখা থেকে অপ্ট আউট করেন ৷

এখনকার অবস্থা

ট্যাবড অ্যাপ্লিকেশন মোড ব্যবহার করে

ট্যাবড অ্যাপ্লিকেশন মোড ব্যবহার করার জন্য, ডেভেলপারদের ওয়েব অ্যাপ ম্যানিফেস্টে একটি নির্দিষ্ট "display_override" মোড মান সেট করে তাদের অ্যাপ বেছে নিতে হবে।

{
  "display": "standalone",
  "display_override": ["tabbed"]
}

এরপরে, "tab_strip" বৈশিষ্ট্যটি ঐচ্ছিকভাবে ট্যাব আচরণকে সূক্ষ্ম-টিউন করতে ব্যবহার করা যেতে পারে। এটিতে দুটি অনুমোদিত সাব-প্রপার্টি রয়েছে, "home_tab" এবং "new_tab_button" । যদি "tab_strip" বৈশিষ্ট্যটি উপস্থিত না থাকে, তবে নির্দিষ্ট বৈশিষ্ট্যগুলির "auto" মানগুলি ব্যবহার করা হয়। "auto" এর জন্য কোন মানগুলি ব্যবহার করতে হবে তা ব্রাউজার নির্ধারণ করে।

মূল স্থান

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

"home_tab" এর জন্য অনুমোদিত মানগুলি হল:

• "auto" ব্রাউজারকে কি করতে হবে তা নির্ধারণ করতে দেয়।
• একটি হোম ট্যাব না দেখাতে ব্রাউজারকে বলতে "absent" ৷
• দুটি উপ-বৈশিষ্ট্য সহ একটি বস্তু:
  • "auto" বা হোম ট্যাব লক করার জন্য একটি URL এর অনুমোদিত মান সহ "url" ৷
  • "icons" "auto" বা প্রধান "icons" বৈশিষ্ট্যের মতো আইকনগুলির একটি বিন্যাস।

নতুন ট্যাব বোতাম

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

"new_tab_button" এর জন্য অনুমোদিত মানগুলি হল:

• "auto" ব্রাউজারকে কি করতে হবে তা নির্ধারণ করতে দেয়।
• একটি নতুন ট্যাব বোতাম না দেখাতে ব্রাউজারকে বলতে "absent" ।
• দুটি উপ-বৈশিষ্ট্য সহ একটি বস্তু:
  • নতুন ট্যাব খোলার জন্য "auto" বা একটি ইন-স্কোপ URL এর অনুমোদিত মান সহ "url" ।
  • "icons" "auto" বা প্রধান "icons" বৈশিষ্ট্যের মতো আইকনগুলির একটি বিন্যাস।

সম্পূর্ণ উদাহরণ

ট্যাবযুক্ত ইন্টারফেসের সাথে একটি অ্যাপের আচরণ কনফিগার করার একটি সম্পূর্ণ উদাহরণ নিম্নরূপ দেখতে পারে:

{
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "url": "./home/",
      "icons": [
        {
          "src": "./home.svg",
          "sizes": "any",
          "type": "image/svg+xml"
        }
      ]
    },
    "new_tab_button": {
      "url": "./new-tab/",
      "icons": [
        {
          "src": "./new-tab.svg",
          "sizes": "any",
          "type": "image/svg+xml"
        }
      ]
    }
  }
}

ট্যাবযুক্ত অ্যাপ্লিকেশন মোড সনাক্ত করা হচ্ছে

অ্যাপগুলি সিএসএস বা জাভাস্ক্রিপ্টে display-mode সিএসএস মিডিয়া বৈশিষ্ট্য পরীক্ষা করে ট্যাবযুক্ত অ্যাপ্লিকেশন মোডে চলছে কিনা তা সনাক্ত করতে পারে:

@media (display-mode: tabbed) {
  /* Styles to apply in tabbed application mode. */
}

const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;

লঞ্চ হ্যান্ডলার API এর সাথে মিথস্ক্রিয়া

লঞ্চ হ্যান্ডলার API সাইটগুলিকে সদৃশ উইন্ডোগুলি খোলা থেকে আটকাতে বিদ্যমান অ্যাপ উইন্ডোতে অ্যাপ লঞ্চগুলিকে পুনঃনির্দেশ করতে দেয়৷ যখন একটি ট্যাবযুক্ত অ্যাপ "client_mode": "navigate-new" সেট করে, তখন অ্যাপ লঞ্চ একটি বিদ্যমান অ্যাপ উইন্ডোতে একটি নতুন ট্যাব খুলবে।

ডেমো

আপনি একটি ব্রাউজার পতাকা সেট করে ট্যাবড অ্যাপ্লিকেশন মোড চেষ্টা করতে পারেন:

1. #enable-desktop-pwas-tab-strip পতাকা সেট করুন।
2. অ্যাপটি ইনস্টল করুন tabbed-application-mode.glitch.me ( উৎস কোড )।
3. বিভিন্ন ট্যাবের বিভিন্ন লিঙ্কে ক্লিক করুন।

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

Chrome টিম ট্যাবযুক্ত অ্যাপ্লিকেশন মোডের সাথে আপনার অভিজ্ঞতা সম্পর্কে শুনতে চায়৷

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

ট্যাবড অ্যাপ্লিকেশন মোড সম্পর্কে এমন কিছু আছে যা আপনার প্রত্যাশার মতো কাজ করে না? ওয়েব অ্যাপ ম্যানিফেস্ট ইস্যুতে মন্তব্য করুন যা আমরা তৈরি করেছি।

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

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

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

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

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

উপকারী সংজুক

• ব্যাখ্যাকারী
• ওয়েব অ্যাপ ম্যানিফেস্ট স্পেস সমস্যা
• ক্রোমিয়াম বাগ
• ব্লিঙ্ক কম্পোনেন্ট: UI>Browser>WebAppInstalls

স্বীকৃতি

ট্যাবড অ্যাপ্লিকেশন মোড ম্যাট জিউকা দ্বারা অন্বেষণ করা হয়েছিল। ক্রোমে পরীক্ষামূলক বাস্তবায়ন ছিল অ্যালান কাটারের কাজ। এই নিবন্ধটি জো মেডলি দ্বারা পর্যালোচনা করা হয়েছে। উইকিমিডিয়া কমন্সে টিল নিয়েরম্যানের নায়কের ছবি।