উইন্ডো ম্যানেজমেন্ট এপিআই এর সাথে বেশ কয়েকটি ডিসপ্লে পরিচালনা করা, উইন্ডো ম্যানেজমেন্ট এপিআই দিয়ে বেশ কয়েকটি ডিসপ্লে পরিচালনা করা

সেই ডিসপ্লেগুলির সাপেক্ষে সংযুক্ত ডিসপ্লে এবং অবস্থান উইন্ডো সম্পর্কে তথ্য পান।

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

উইন্ডো ম্যানেজমেন্ট API

উইন্ডো ম্যানেজমেন্ট API আপনাকে আপনার মেশিনের সাথে সংযুক্ত ডিসপ্লেগুলি গণনা করতে এবং নির্দিষ্ট স্ক্রিনে উইন্ডো স্থাপন করতে দেয়।

প্রস্তাবিত ব্যবহারের ক্ষেত্রে

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

  • মাল্টি-উইন্ডো গ্রাফিক্স এডিটর à la Gimp সঠিকভাবে অবস্থান করা উইন্ডোতে বিভিন্ন সম্পাদনা সরঞ্জাম রাখতে পারে।
  • ভার্চুয়াল ট্রেডিং ডেস্ক একাধিক উইন্ডোতে বাজারের প্রবণতা দেখাতে পারে যার যেকোনো একটি ফুলস্ক্রিন মোডে দেখা যেতে পারে।
  • স্লাইডশো অ্যাপগুলি অভ্যন্তরীণ প্রাথমিক স্ক্রিনে স্পিকার নোট এবং একটি বহিরাগত প্রজেক্টরে উপস্থাপনা দেখাতে পারে।

কিভাবে উইন্ডো ম্যানেজমেন্ট API ব্যবহার করবেন

সমস্যা

উইন্ডোজ নিয়ন্ত্রণ করার সময়-পরীক্ষিত পদ্ধতি, Window.open() , দুর্ভাগ্যবশত অতিরিক্ত স্ক্রীন সম্পর্কে অজানা। যদিও এই API-এর কিছু দিক একটু প্রাচীন বলে মনে হচ্ছে, যেমন এর windowFeatures DOMString প্যারামিটার, তবুও এটি বছরের পর বছর ধরে আমাদের ভালোভাবে পরিবেশন করেছে। একটি উইন্ডোর অবস্থান নির্দিষ্ট করতে, আপনি স্থানাঙ্কগুলিকে left এবং top (বা যথাক্রমে screenX এবং screenY ) হিসাবে পাস করতে পারেন এবং width এবং height (বা যথাক্রমে innerWidth এবং innerHeight ) হিসাবে পছন্দসই আকার পাস করতে পারেন। উদাহরণস্বরূপ, বাম দিক থেকে 50 পিক্সেল এবং উপরে থেকে 50 পিক্সেলে একটি 400×300 উইন্ডো খুলতে, এই কোডটি আপনি ব্যবহার করতে পারেন:

const popup = window.open(
  'https://example.com/',
  'My Popup',
  'left=50,top=50,width=400,height=300',
);

আপনি window.screen প্রপার্টি দেখে বর্তমান স্ক্রীন সম্পর্কে তথ্য পেতে পারেন, যা একটি Screen অবজেক্ট রিটার্ন করে। এটি আমার MacBook Pro 13″ এর আউটপুট:

window.screen;
/* Output from my MacBook Pro 13″:
  availHeight: 969
  availLeft: 0
  availTop: 25
  availWidth: 1680
  colorDepth: 30
  height: 1050
  isExtended: true
  onchange: null
  orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
  pixelDepth: 30
  width: 1680
*/

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

দুটি চেয়ারে স্কুলের বেঞ্চ। স্কুলের বেঞ্চের উপরে একটি ল্যাপটপ সমর্থনকারী জুতার বাক্স এবং এর চারপাশে দুটি আইপ্যাড রয়েছে।
একটি মাল্টি-স্ক্রিন সেটআপ।

আমি যদি বড় পর্দার সুবিধা নিতে চাই, আমি উপরের কোড নমুনা থেকে পপআপটি দ্বিতীয় স্ক্রিনে রাখতে পারি। আমি এটি এই মত করি:

popup.moveTo(2500, 50);

এটি একটি মোটামুটি অনুমান, যেহেতু দ্বিতীয় পর্দার মাত্রা জানার কোন উপায় নেই। window.screen থেকে পাওয়া তথ্য শুধুমাত্র অন্তর্নির্মিত স্ক্রীনকে কভার করে, কিন্তু iPad স্ক্রীন নয়। বিল্ট-ইন স্ক্রিনের রিপোর্ট করা width ছিল 1680 পিক্সেল, তাই 2500 পিক্সেলে চলে যাওয়া উইন্ডোটিকে আইপ্যাডে স্থানান্তর করতে কাজ করতে পারে , যেহেতু আমি জানি যে এটি আমার ম্যাকবুকের ডানদিকে অবস্থিত। সাধারণ ক্ষেত্রে আমি কীভাবে এটি করতে পারি? দেখা যাচ্ছে, অনুমান করার চেয়ে ভালো উপায় আছে। এই উপায় হল উইন্ডো ম্যানেজমেন্ট API।

বৈশিষ্ট্য সনাক্তকরণ

উইন্ডো ম্যানেজমেন্ট API সমর্থিত কিনা তা পরীক্ষা করতে, ব্যবহার করুন:

if ('getScreenDetails' in window) {
  // The Window Management API is supported.
}

window-management অনুমতি

আমি উইন্ডো ম্যানেজমেন্ট এপিআই ব্যবহার করার আগে, আমাকে অবশ্যই ব্যবহারকারীর কাছে এটি করার অনুমতি চাইতে হবে। window-management অনুমতিটি অনুমতি API এর সাথে জিজ্ঞাসা করা যেতে পারে:

let granted = false;
try {
  const { state } = await navigator.permissions.query({ name: 'window-management' });
  granted = state === 'granted';
} catch {
  // Nothing.
}

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

async function getWindowManagementPermissionState() {
  let state;
  // The new permission name.
  try {
    ({ state } = await navigator.permissions.query({
      name: "window-management",
    }));
  } catch (err) {
    return `${err.name}: ${err.message}`;
  }
  return state;
}

document.querySelector("button").addEventListener("click", async () => {
  const state = await getWindowManagementPermissionState();
  document.querySelector("pre").textContent = state;
});

ব্রাউজারটি নতুন API-এর যেকোনো পদ্ধতি ব্যবহার করার প্রথম প্রচেষ্টায় গতিশীলভাবে অনুমতি প্রম্পট দেখানোর জন্য বেছে নিতে পারে । আরও জানতে পড়ুন।

window.screen.isExtended এক্সটেন্ডেড প্রপার্টি

আমার ডিভাইসের সাথে একাধিক স্ক্রীন সংযুক্ত আছে কিনা তা জানতে, আমি window.screen.isExtended প্রপার্টি অ্যাক্সেস করি। এটি true বা false ফেরত দেয়। আমার সেটআপের জন্য, এটি true ফিরে আসে।

window.screen.isExtended;
// Returns `true` or `false`.

getScreenDetails() পদ্ধতি

এখন যেহেতু আমি জানি যে বর্তমান সেটআপটি মাল্টি-স্ক্রিন, আমি Window.getScreenDetails() ব্যবহার করে দ্বিতীয় স্ক্রীন সম্পর্কে আরও তথ্য পেতে পারি। এই ফাংশনটি কল করলে একটি অনুমতি প্রম্পট দেখাবে যা আমাকে জিজ্ঞাসা করবে যে সাইটটি খুলতে এবং আমার স্ক্রিনে উইন্ডো রাখতে পারে কিনা। ফাংশনটি একটি প্রতিশ্রুতি প্রদান করে যা একটি ScreenDetailed বস্তুর সাথে সমাধান করে। আমার ম্যাকবুক প্রো 13-এ একটি সংযুক্ত আইপ্যাড সহ, এর মধ্যে দুটি ScreenDetailed অবজেক্ট সহ একটি screens ক্ষেত্র রয়েছে:

await window.getScreenDetails();
/* Output from my MacBook Pro 13″ with the iPad attached:
{
  currentScreen: ScreenDetailed {left: 0, top: 0, isPrimary: true, isInternal: true, devicePixelRatio: 2, …}
  oncurrentscreenchange: null
  onscreenschange: null
  screens: [{
    // The MacBook Pro
    availHeight: 969
    availLeft: 0
    availTop: 25
    availWidth: 1680
    colorDepth: 30
    devicePixelRatio: 2
    height: 1050
    isExtended: true
    isInternal: true
    isPrimary: true
    label: "Built-in Retina Display"
    left: 0
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 30
    top: 0
    width: 1680
  },
  {
    // The iPad
    availHeight: 999
    availLeft: 1680
    availTop: 25
    availWidth: 1366
    colorDepth: 24
    devicePixelRatio: 2
    height: 1024
    isExtended: true
    isInternal: false
    isPrimary: false
    label: "Sidecar Display (AirPlay)"
    left: 1680
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 24
    top: 0
    width: 1366
  }]
}
*/

সংযুক্ত স্ক্রীন সম্পর্কে তথ্য screens অ্যারেতে পাওয়া যায়। লক্ষ্য করুন কিভাবে আইপ্যাডের জন্য left মান 1680 থেকে শুরু হয়, যা বিল্ট-ইন ডিসপ্লের width ঠিক। এটি আমাকে ঠিক কীভাবে স্ক্রিনগুলি যৌক্তিকভাবে সাজানো হয়েছে তা নির্ধারণ করতে দেয় (একে অপরের পাশে, একে অপরের উপরে, ইত্যাদি)। এটি একটি isInternal একটি কিনা এবং এটি একটি isPrimary কিনা তা দেখানোর জন্য প্রতিটি স্ক্রিনের জন্য এখন ডেটা রয়েছে৷ মনে রাখবেন যে অন্তর্নির্মিত স্ক্রিনটি অগত্যা প্রাথমিক পর্দা নয় ।

currentScreen ক্ষেত্রটি বর্তমান window.screen এর সাথে সম্পর্কিত একটি লাইভ অবজেক্ট। বস্তুটি ক্রস-স্ক্রিন উইন্ডো প্লেসমেন্ট বা ডিভাইস পরিবর্তনের উপর আপডেট করা হয়।

screenschange ইভেন্ট

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

মনে রাখবেন যে আপনাকে অ্যাসিঙ্ক্রোনাসভাবে নতুন স্ক্রীনের বিবরণ দেখতে হবে, screenschange ইভেন্ট নিজেই এই ডেটা প্রদান করে না। স্ক্রীনের বিশদ বিবরণ দেখতে, একটি ক্যাশে Screens ইন্টারফেস থেকে লাইভ অবজেক্ট ব্যবহার করুন।

const screenDetails = await window.getScreenDetails();
let cachedScreensLength = screenDetails.screens.length;
screenDetails.addEventListener('screenschange', (event) => {
  if (screenDetails.screens.length !== cachedScreensLength) {
    console.log(
      `The screen count changed from ${cachedScreensLength} to ${screenDetails.screens.length}`,
    );
    cachedScreensLength = screenDetails.screens.length;
  }
});

currentscreenchange ইভেন্ট

যদি আমি শুধুমাত্র বর্তমান স্ক্রিনে পরিবর্তন করতে আগ্রহী হই (অর্থাৎ, লাইভ অবজেক্ট currentScreen মান), আমি currentscreenchange ইভেন্টের জন্য শুনতে পারি। 

const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('currentscreenchange', async (event) => {
  const details = screenDetails.currentScreen;
  console.log('The current screen has changed.', event, details);
});

change ঘটনা

অবশেষে, যদি আমি শুধুমাত্র একটি কংক্রিট স্ক্রিনে পরিবর্তন করতে আগ্রহী, আমি সেই পর্দার change ইভেন্ট শুনতে পারি। 

const firstScreen = (await window.getScreenDetails())[0];
firstScreen.addEventListener('change', async (event) => {
  console.log('The first screen has changed.', event, firstScreen);
});

নতুন ফুলস্ক্রিন বিকল্প

এখন অবধি, আপনি অনুরোধ করতে পারেন যে উপাদানগুলি যথাযথভাবে নামযুক্ত requestFullScreen() পদ্ধতির মাধ্যমে ফুলস্ক্রিন মোডে প্রদর্শিত হবে। পদ্ধতিটি একটি options প্যারামিটার নেয় যেখানে আপনি FullscreenOptions পাস করতে পারেন। এখন পর্যন্ত, এর একমাত্র সম্পত্তি navigationUI । উইন্ডো ম্যানেজমেন্ট এপিআই একটি নতুন screen প্রপার্টি যোগ করে যা আপনাকে কোন স্ক্রীনটি ফুলস্ক্রিন ভিউ শুরু করতে হবে তা নির্ধারণ করতে দেয়। উদাহরণস্বরূপ, আপনি যদি প্রাথমিক স্ক্রিনটিকে পূর্ণস্ক্রীন করতে চান: 

try {
  const primaryScreen = (await getScreenDetails()).screens.filter((screen) => screen.isPrimary)[0];
  await document.body.requestFullscreen({ screen: primaryScreen });
} catch (err) {
  console.error(err.name, err.message);
}

পলিফিল

উইন্ডো ম্যানেজমেন্ট এপিআই পলিফিল করা সম্ভব নয়, তবে আপনি এটির আকৃতিকে শিম করতে পারেন যাতে আপনি নতুন API এর বিরুদ্ধে একচেটিয়াভাবে কোড করতে পারেন: 

if (!('getScreenDetails' in window)) {
  // Returning a one-element array with the current screen,
  // noting that there might be more.
  window.getScreenDetails = async () => [window.screen];
  // Set to `false`, noting that this might be a lie.
  window.screen.isExtended = false;
}

API-এর অন্যান্য দিক, অর্থাৎ, বিভিন্ন স্ক্রীন পরিবর্তন ইভেন্ট এবং FullscreenOptions এর screen প্রপার্টি, অ-সমর্থক ব্রাউজার দ্বারা যথাক্রমে কখনই ফায়ার বা নীরবভাবে উপেক্ষা করা হবে না।

ডেমো

আপনি যদি আমার মতো কিছু হন, আপনি বিভিন্ন ক্রিপ্টোকারেন্সির বিকাশের উপর ঘনিষ্ঠ নজর রাখেন। (বাস্তবে আমি এই গ্রহটিকে ভালবাসি বলে আমি খুব বেশি করি না, কিন্তু, এই নিবন্ধটির জন্য, অনুমান করুন যে আমি করেছি।) আমার মালিকানাধীন ক্রিপ্টোকারেন্সিগুলির ট্র্যাক রাখতে, আমি একটি ওয়েব অ্যাপ তৈরি করেছি যা আমাকে জীবনের সমস্ত পরিস্থিতিতে বাজার দেখতে দেয়, যেমন আমার বিছানার আরাম থেকে, যেখানে আমার একটি শালীন একক-স্ক্রিন সেটআপ রয়েছে।

একটি বিছানার শেষে লেখকের পা আংশিকভাবে দৃশ্যমান সহ বিশাল টিভি পর্দা। স্ক্রিনে, একটি জাল ক্রিপ্টো কারেন্সি ট্রেডিং ডেস্ক।
আরাম করে বাজার দেখছি।

এটি ক্রিপ্টো সম্পর্কে, বাজারগুলি যে কোনও সময় ব্যস্ত হতে পারে। এটি ঘটলে, আমি দ্রুত আমার ডেস্কে চলে যেতে পারি যেখানে আমার একটি মাল্টি-স্ক্রিন সেটআপ আছে। আমি যেকোনো মুদ্রার উইন্ডোতে ক্লিক করতে পারি এবং বিপরীত স্ক্রিনে একটি পূর্ণস্ক্রীন ভিউতে দ্রুত সম্পূর্ণ বিবরণ দেখতে পারি। নিচে আমার সাম্প্রতিক YCY রক্তস্নানের সময় তোলা একটি সাম্প্রতিক ছবি দেওয়া হল। এটা আমাকে সম্পূর্ণভাবে আঁকড়ে ধরল এবং আমার মুখে হাত রেখে আমাকে ছেড়ে দিল।

লেখক তার আতঙ্কিত মুখে হাত রেখে নকল ক্রিপ্টো কারেন্সি ট্রেডিং ডেস্কের দিকে তাকিয়ে আছেন।
আতঙ্কিত, YCY রক্তস্নানের সাক্ষী।

আপনি নীচে এমবেড করা ডেমোর সাথে খেলতে পারেন, বা ত্রুটিতে এর উত্স কোডটি দেখতে পারেন৷

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

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

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

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

এন্টারপ্রাইজ নিয়ন্ত্রণ

Chrome এন্টারপ্রাইজ ব্যবহারকারীরা পারমাণবিক নীতি গ্রুপ সেটিংসের প্রাসঙ্গিক বিভাগে বর্ণিত উইন্ডো ম্যানেজমেন্ট API-এর বিভিন্ন দিক নিয়ন্ত্রণ করতে পারেন।

স্বচ্ছতা

উইন্ডো ম্যানেজমেন্ট এপিআই ব্যবহার করার অনুমতি দেওয়া হয়েছে কিনা তা ব্রাউজারের সাইটের তথ্যে প্রকাশ করা হয়েছে এবং অনুমতি API-এর মাধ্যমেও জিজ্ঞাসাযোগ্য।

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

ব্রাউজার অনুমতি অনুদান অব্যাহত. ব্রাউজারের সাইটের তথ্যের মাধ্যমে অনুমতি প্রত্যাহার করা যেতে পারে।

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

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

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

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

  • সংশ্লিষ্ট গিটহাব রেপোতে একটি বিশেষ সমস্যা ফাইল করুন, বা বিদ্যমান সমস্যাটিতে আপনার চিন্তা যোগ করুন।

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

আপনি কি Chrome এর বাস্তবায়নের সাথে একটি বাগ খুঁজে পেয়েছেন? অথবা বাস্তবায়ন বৈশিষ্ট থেকে ভিন্ন?

  • new.crbug.com এ একটি বাগ ফাইল করুন। আপনি যতটা পারেন বিশদ অন্তর্ভুক্ত করতে ভুলবেন না, পুনরুত্পাদনের জন্য সহজ নির্দেশাবলী, এবং উপাদান বাক্সে Blink>Screen>MultiScreen লিখুন। দ্রুত এবং সহজ রিপ্রো শেয়ার করার জন্য গ্লিচ দুর্দান্ত কাজ করে।

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

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

  • WICG ডিসকোর্স থ্রেডে আপনি কীভাবে এটি ব্যবহার করার পরিকল্পনা করছেন তা শেয়ার করুন।
  • হ্যাশট্যাগ #WindowManagement ব্যবহার করে @ChromiumDev- এ একটি টুইট পাঠান এবং আপনি কোথায় এবং কীভাবে এটি ব্যবহার করছেন তা আমাদের জানান।
  • অন্যান্য ব্রাউজার বিক্রেতাদের API বাস্তবায়ন করতে বলুন।

সহায়ক লিঙ্ক

স্বীকৃতি

উইন্ডো ম্যানেজমেন্ট API স্পেকটি ভিক্টর কস্টান , জোশুয়া বেল এবং মাইক ওয়াসারম্যান দ্বারা সম্পাদনা করা হয়েছিল। এপিআইটি মাইক ওয়াসারম্যান এবং অ্যাড্রিয়েন ওয়াকার দ্বারা প্রয়োগ করা হয়েছিল। এই নিবন্ধটি Joe Medley , François Beaufort , এবং Kayce Basques দ্বারা পর্যালোচনা করা হয়েছে। ফটোগুলির জন্য লরা টরেন্ট পুইগকে ধন্যবাদ।

,

সেই ডিসপ্লেগুলির সাপেক্ষে সংযুক্ত ডিসপ্লে এবং অবস্থান উইন্ডো সম্পর্কে তথ্য পান।

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

উইন্ডো ম্যানেজমেন্ট API

উইন্ডো ম্যানেজমেন্ট API আপনাকে আপনার মেশিনের সাথে সংযুক্ত ডিসপ্লেগুলি গণনা করতে এবং নির্দিষ্ট স্ক্রিনে উইন্ডো স্থাপন করতে দেয়।

প্রস্তাবিত ব্যবহারের ক্ষেত্রে

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

  • মাল্টি-উইন্ডো গ্রাফিক্স এডিটর à la Gimp সঠিকভাবে অবস্থান করা উইন্ডোতে বিভিন্ন সম্পাদনা সরঞ্জাম রাখতে পারে।
  • ভার্চুয়াল ট্রেডিং ডেস্ক একাধিক উইন্ডোতে বাজারের প্রবণতা দেখাতে পারে যার যেকোনো একটি ফুলস্ক্রিন মোডে দেখা যেতে পারে।
  • স্লাইডশো অ্যাপগুলি অভ্যন্তরীণ প্রাথমিক স্ক্রিনে স্পিকার নোট এবং একটি বহিরাগত প্রজেক্টরে উপস্থাপনা দেখাতে পারে।

কিভাবে উইন্ডো ম্যানেজমেন্ট API ব্যবহার করবেন

সমস্যা

উইন্ডোজ নিয়ন্ত্রণ করার সময়-পরীক্ষিত পদ্ধতি, Window.open() , দুর্ভাগ্যবশত অতিরিক্ত স্ক্রীন সম্পর্কে অজানা। যদিও এই API-এর কিছু দিক একটু প্রাচীন বলে মনে হচ্ছে, যেমন এর windowFeatures DOMString প্যারামিটার, তবুও এটি বছরের পর বছর ধরে আমাদের ভালোভাবে পরিবেশন করেছে। একটি উইন্ডোর অবস্থান নির্দিষ্ট করতে, আপনি স্থানাঙ্কগুলিকে left এবং top (বা যথাক্রমে screenX এবং screenY ) হিসাবে পাস করতে পারেন এবং width এবং height (বা যথাক্রমে innerWidth এবং innerHeight ) হিসাবে পছন্দসই আকার পাস করতে পারেন। উদাহরণস্বরূপ, বাম দিক থেকে 50 পিক্সেল এবং উপরে থেকে 50 পিক্সেলে একটি 400×300 উইন্ডো খুলতে, এই কোডটি আপনি ব্যবহার করতে পারেন:

const popup = window.open(
  'https://example.com/',
  'My Popup',
  'left=50,top=50,width=400,height=300',
);

আপনি window.screen প্রপার্টি দেখে বর্তমান স্ক্রীন সম্পর্কে তথ্য পেতে পারেন, যা একটি Screen অবজেক্ট রিটার্ন করে। এটি আমার MacBook Pro 13″ এর আউটপুট:

window.screen;
/* Output from my MacBook Pro 13″:
  availHeight: 969
  availLeft: 0
  availTop: 25
  availWidth: 1680
  colorDepth: 30
  height: 1050
  isExtended: true
  onchange: null
  orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
  pixelDepth: 30
  width: 1680
*/

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

দুটি চেয়ারে স্কুলের বেঞ্চ। স্কুলের বেঞ্চের উপরে একটি ল্যাপটপ সমর্থনকারী জুতার বাক্স এবং এর চারপাশে দুটি আইপ্যাড রয়েছে।
একটি মাল্টি-স্ক্রিন সেটআপ।

আমি যদি বড় পর্দার সুবিধা নিতে চাই, আমি উপরের কোড নমুনা থেকে পপআপটি দ্বিতীয় স্ক্রিনে রাখতে পারি। আমি এটি এই মত করি:

popup.moveTo(2500, 50);

এটি একটি মোটামুটি অনুমান, যেহেতু দ্বিতীয় পর্দার মাত্রা জানার কোন উপায় নেই। window.screen থেকে পাওয়া তথ্য শুধুমাত্র অন্তর্নির্মিত স্ক্রীনকে কভার করে, কিন্তু iPad স্ক্রীন নয়। বিল্ট-ইন স্ক্রিনের রিপোর্ট করা width ছিল 1680 পিক্সেল, তাই 2500 পিক্সেলে চলে যাওয়া উইন্ডোটিকে আইপ্যাডে স্থানান্তর করতে কাজ করতে পারে , যেহেতু আমি জানি যে এটি আমার ম্যাকবুকের ডানদিকে অবস্থিত। সাধারণ ক্ষেত্রে আমি কীভাবে এটি করতে পারি? দেখা যাচ্ছে, অনুমান করার চেয়ে ভালো উপায় আছে। এই উপায় হল উইন্ডো ম্যানেজমেন্ট API।

বৈশিষ্ট্য সনাক্তকরণ

উইন্ডো ম্যানেজমেন্ট API সমর্থিত কিনা তা পরীক্ষা করতে, ব্যবহার করুন:

if ('getScreenDetails' in window) {
  // The Window Management API is supported.
}

window-management অনুমতি

আমি উইন্ডো ম্যানেজমেন্ট এপিআই ব্যবহার করার আগে, আমাকে অবশ্যই ব্যবহারকারীর কাছে এটি করার অনুমতি চাইতে হবে। window-management অনুমতিটি অনুমতি API এর সাথে জিজ্ঞাসা করা যেতে পারে:

let granted = false;
try {
  const { state } = await navigator.permissions.query({ name: 'window-management' });
  granted = state === 'granted';
} catch {
  // Nothing.
}

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

async function getWindowManagementPermissionState() {
  let state;
  // The new permission name.
  try {
    ({ state } = await navigator.permissions.query({
      name: "window-management",
    }));
  } catch (err) {
    return `${err.name}: ${err.message}`;
  }
  return state;
}

document.querySelector("button").addEventListener("click", async () => {
  const state = await getWindowManagementPermissionState();
  document.querySelector("pre").textContent = state;
});

ব্রাউজারটি নতুন API-এর যেকোনো পদ্ধতি ব্যবহার করার প্রথম প্রচেষ্টায় গতিশীলভাবে অনুমতি প্রম্পট দেখানোর জন্য বেছে নিতে পারে । আরও জানতে পড়ুন।

window.screen.isExtended এক্সটেন্ডেড প্রপার্টি

আমার ডিভাইসের সাথে একাধিক স্ক্রীন সংযুক্ত আছে কিনা তা জানতে, আমি window.screen.isExtended প্রপার্টি অ্যাক্সেস করি। এটি true বা false ফেরত দেয়। আমার সেটআপের জন্য, এটি true ফিরে আসে।

window.screen.isExtended;
// Returns `true` or `false`.

getScreenDetails() পদ্ধতি

এখন যেহেতু আমি জানি যে বর্তমান সেটআপটি মাল্টি-স্ক্রিন, আমি Window.getScreenDetails() ব্যবহার করে দ্বিতীয় স্ক্রীন সম্পর্কে আরও তথ্য পেতে পারি। এই ফাংশনটি কল করলে একটি অনুমতি প্রম্পট দেখাবে যা আমাকে জিজ্ঞাসা করবে যে সাইটটি খুলতে এবং আমার স্ক্রিনে উইন্ডো রাখতে পারে কিনা। ফাংশনটি একটি প্রতিশ্রুতি প্রদান করে যা একটি ScreenDetailed বস্তুর সাথে সমাধান করে। আমার ম্যাকবুক প্রো 13-এ একটি সংযুক্ত আইপ্যাড সহ, এর মধ্যে দুটি ScreenDetailed অবজেক্ট সহ একটি screens ক্ষেত্র রয়েছে:

await window.getScreenDetails();
/* Output from my MacBook Pro 13″ with the iPad attached:
{
  currentScreen: ScreenDetailed {left: 0, top: 0, isPrimary: true, isInternal: true, devicePixelRatio: 2, …}
  oncurrentscreenchange: null
  onscreenschange: null
  screens: [{
    // The MacBook Pro
    availHeight: 969
    availLeft: 0
    availTop: 25
    availWidth: 1680
    colorDepth: 30
    devicePixelRatio: 2
    height: 1050
    isExtended: true
    isInternal: true
    isPrimary: true
    label: "Built-in Retina Display"
    left: 0
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 30
    top: 0
    width: 1680
  },
  {
    // The iPad
    availHeight: 999
    availLeft: 1680
    availTop: 25
    availWidth: 1366
    colorDepth: 24
    devicePixelRatio: 2
    height: 1024
    isExtended: true
    isInternal: false
    isPrimary: false
    label: "Sidecar Display (AirPlay)"
    left: 1680
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 24
    top: 0
    width: 1366
  }]
}
*/

সংযুক্ত স্ক্রীন সম্পর্কে তথ্য screens অ্যারেতে পাওয়া যায়। লক্ষ্য করুন কিভাবে আইপ্যাডের জন্য left মান 1680 থেকে শুরু হয়, যা বিল্ট-ইন ডিসপ্লের width ঠিক। এটি আমাকে ঠিক কীভাবে স্ক্রিনগুলি যৌক্তিকভাবে সাজানো হয়েছে তা নির্ধারণ করতে দেয় (একে অপরের পাশে, একে অপরের উপরে, ইত্যাদি)। এটি একটি isInternal একটি কিনা এবং এটি একটি isPrimary কিনা তা দেখানোর জন্য প্রতিটি স্ক্রিনের জন্য এখন ডেটা রয়েছে৷ মনে রাখবেন যে অন্তর্নির্মিত স্ক্রিনটি অগত্যা প্রাথমিক পর্দা নয় ।

currentScreen ক্ষেত্রটি বর্তমান window.screen এর সাথে সম্পর্কিত একটি লাইভ অবজেক্ট। বস্তুটি ক্রস-স্ক্রিন উইন্ডো প্লেসমেন্ট বা ডিভাইস পরিবর্তনের উপর আপডেট করা হয়।

screenschange ইভেন্ট

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

মনে রাখবেন যে আপনাকে অ্যাসিঙ্ক্রোনাসভাবে নতুন স্ক্রীনের বিবরণ দেখতে হবে, screenschange ইভেন্ট নিজেই এই ডেটা প্রদান করে না। স্ক্রীনের বিশদ বিবরণ দেখতে, একটি ক্যাশে Screens ইন্টারফেস থেকে লাইভ অবজেক্ট ব্যবহার করুন।

const screenDetails = await window.getScreenDetails();
let cachedScreensLength = screenDetails.screens.length;
screenDetails.addEventListener('screenschange', (event) => {
  if (screenDetails.screens.length !== cachedScreensLength) {
    console.log(
      `The screen count changed from ${cachedScreensLength} to ${screenDetails.screens.length}`,
    );
    cachedScreensLength = screenDetails.screens.length;
  }
});

currentscreenchange ইভেন্ট

যদি আমি শুধুমাত্র বর্তমান স্ক্রিনে পরিবর্তন করতে আগ্রহী হই (অর্থাৎ, লাইভ অবজেক্ট currentScreen মান), আমি currentscreenchange ইভেন্টের জন্য শুনতে পারি। 

const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('currentscreenchange', async (event) => {
  const details = screenDetails.currentScreen;
  console.log('The current screen has changed.', event, details);
});

change ঘটনা

অবশেষে, যদি আমি শুধুমাত্র একটি কংক্রিট স্ক্রিনে পরিবর্তন করতে আগ্রহী, আমি সেই পর্দার change ইভেন্ট শুনতে পারি। 

const firstScreen = (await window.getScreenDetails())[0];
firstScreen.addEventListener('change', async (event) => {
  console.log('The first screen has changed.', event, firstScreen);
});

নতুন ফুলস্ক্রিন বিকল্প

এখন অবধি, আপনি অনুরোধ করতে পারেন যে উপাদানগুলি যথাযথভাবে নামযুক্ত requestFullScreen() পদ্ধতির মাধ্যমে ফুলস্ক্রিন মোডে প্রদর্শিত হবে। পদ্ধতিটি একটি options প্যারামিটার নেয় যেখানে আপনি FullscreenOptions পাস করতে পারেন। এখন পর্যন্ত, এর একমাত্র সম্পত্তি navigationUI । উইন্ডো ম্যানেজমেন্ট এপিআই একটি নতুন screen প্রপার্টি যোগ করে যা আপনাকে কোন স্ক্রীনটি ফুলস্ক্রিন ভিউ শুরু করতে হবে তা নির্ধারণ করতে দেয়। উদাহরণস্বরূপ, আপনি যদি প্রাথমিক স্ক্রিনটিকে পূর্ণস্ক্রীন করতে চান: 

try {
  const primaryScreen = (await getScreenDetails()).screens.filter((screen) => screen.isPrimary)[0];
  await document.body.requestFullscreen({ screen: primaryScreen });
} catch (err) {
  console.error(err.name, err.message);
}

পলিফিল

উইন্ডো ম্যানেজমেন্ট এপিআই পলিফিল করা সম্ভব নয়, তবে আপনি এটির আকৃতিকে শিম করতে পারেন যাতে আপনি নতুন API এর বিরুদ্ধে একচেটিয়াভাবে কোড করতে পারেন: 

if (!('getScreenDetails' in window)) {
  // Returning a one-element array with the current screen,
  // noting that there might be more.
  window.getScreenDetails = async () => [window.screen];
  // Set to `false`, noting that this might be a lie.
  window.screen.isExtended = false;
}

API-এর অন্যান্য দিক, অর্থাৎ, বিভিন্ন স্ক্রীন পরিবর্তন ইভেন্ট এবং FullscreenOptions এর screen প্রপার্টি, অ-সমর্থক ব্রাউজার দ্বারা যথাক্রমে কখনই ফায়ার বা নীরবভাবে উপেক্ষা করা হবে না।

ডেমো

আপনি যদি আমার মতো কিছু হন, আপনি বিভিন্ন ক্রিপ্টোকারেন্সির বিকাশের উপর ঘনিষ্ঠ নজর রাখেন। (বাস্তবে আমি এই গ্রহটিকে ভালবাসি বলে আমি খুব বেশি করি না, কিন্তু, এই নিবন্ধটির জন্য, অনুমান করুন যে আমি করেছি।) আমার মালিকানাধীন ক্রিপ্টোকারেন্সিগুলির ট্র্যাক রাখতে, আমি একটি ওয়েব অ্যাপ তৈরি করেছি যা আমাকে জীবনের সমস্ত পরিস্থিতিতে বাজার দেখতে দেয়, যেমন আমার বিছানার আরাম থেকে, যেখানে আমার একটি শালীন একক-স্ক্রিন সেটআপ রয়েছে।

একটি বিছানার শেষে লেখকের পা আংশিকভাবে দৃশ্যমান সহ বিশাল টিভি পর্দা। স্ক্রিনে, একটি জাল ক্রিপ্টো কারেন্সি ট্রেডিং ডেস্ক।
আরাম করে বাজার দেখছি।

এটি ক্রিপ্টো সম্পর্কে, বাজারগুলি যে কোনও সময় ব্যস্ত হতে পারে। এটি ঘটলে, আমি দ্রুত আমার ডেস্কে চলে যেতে পারি যেখানে আমার একটি মাল্টি-স্ক্রিন সেটআপ আছে। আমি যেকোনো মুদ্রার উইন্ডোতে ক্লিক করতে পারি এবং বিপরীত স্ক্রিনে একটি পূর্ণস্ক্রীন ভিউতে দ্রুত সম্পূর্ণ বিবরণ দেখতে পারি। নিচে আমার সাম্প্রতিক YCY রক্তস্নানের সময় তোলা একটি সাম্প্রতিক ছবি দেওয়া হল। এটা আমাকে সম্পূর্ণভাবে আঁকড়ে ধরল এবং আমার মুখে হাত রেখে আমাকে ছেড়ে দিল।

লেখক তার আতঙ্কিত মুখে হাত রেখে নকল ক্রিপ্টো কারেন্সি ট্রেডিং ডেস্কের দিকে তাকিয়ে আছেন।
আতঙ্কিত, YCY রক্তস্নানের সাক্ষী।

আপনি নীচে এমবেড করা ডেমোর সাথে খেলতে পারেন, বা ত্রুটিতে এর উত্স কোডটি দেখতে পারেন৷

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

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

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

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

এন্টারপ্রাইজ নিয়ন্ত্রণ

Chrome এন্টারপ্রাইজ ব্যবহারকারীরা পারমাণবিক নীতি গ্রুপ সেটিংসের প্রাসঙ্গিক বিভাগে বর্ণিত উইন্ডো ম্যানেজমেন্ট API-এর বিভিন্ন দিক নিয়ন্ত্রণ করতে পারেন।

স্বচ্ছতা

উইন্ডো ম্যানেজমেন্ট এপিআই ব্যবহার করার অনুমতি দেওয়া হয়েছে কিনা তা ব্রাউজারের সাইটের তথ্যে প্রকাশ করা হয়েছে এবং অনুমতি API-এর মাধ্যমেও জিজ্ঞাসাযোগ্য।

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

ব্রাউজার অনুমতি অনুদান অব্যাহত. ব্রাউজারের সাইটের তথ্যের মাধ্যমে অনুমতি প্রত্যাহার করা যেতে পারে।

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

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

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

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

  • সংশ্লিষ্ট গিটহাব রেপোতে একটি বিশেষ সমস্যা ফাইল করুন, বা বিদ্যমান সমস্যাটিতে আপনার চিন্তা যোগ করুন।

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

আপনি কি Chrome এর বাস্তবায়নের সাথে একটি বাগ খুঁজে পেয়েছেন? অথবা বাস্তবায়ন বৈশিষ্ট থেকে ভিন্ন?

  • new.crbug.com এ একটি বাগ ফাইল করুন। আপনি যতটা পারেন বিশদ অন্তর্ভুক্ত করতে ভুলবেন না, পুনরুত্পাদনের জন্য সহজ নির্দেশাবলী, এবং উপাদান বাক্সে Blink>Screen>MultiScreen লিখুন। দ্রুত এবং সহজ রিপ্রো শেয়ার করার জন্য গ্লিচ দুর্দান্ত কাজ করে।

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

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

  • WICG ডিসকোর্স থ্রেডে আপনি কীভাবে এটি ব্যবহার করার পরিকল্পনা করছেন তা শেয়ার করুন।
  • হ্যাশট্যাগ #WindowManagement ব্যবহার করে @ChromiumDev- এ একটি টুইট পাঠান এবং আপনি কোথায় এবং কীভাবে এটি ব্যবহার করছেন তা আমাদের জানান।
  • অন্যান্য ব্রাউজার বিক্রেতাদের API বাস্তবায়ন করতে বলুন।

সহায়ক লিঙ্ক

স্বীকৃতি

উইন্ডো ম্যানেজমেন্ট API স্পেকটি ভিক্টর কস্টান , জোশুয়া বেল এবং মাইক ওয়াসারম্যান দ্বারা সম্পাদনা করা হয়েছিল। এপিআইটি মাইক ওয়াসারম্যান এবং অ্যাড্রিয়েন ওয়াকার দ্বারা প্রয়োগ করা হয়েছিল। এই নিবন্ধটি Joe Medley , François Beaufort , এবং Kayce Basques দ্বারা পর্যালোচনা করা হয়েছে। ফটোগুলির জন্য লরা টরেন্ট পুইগকে ধন্যবাদ।

,

সেই ডিসপ্লেগুলির সাপেক্ষে সংযুক্ত ডিসপ্লে এবং অবস্থান উইন্ডো সম্পর্কে তথ্য পান।

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

উইন্ডো ম্যানেজমেন্ট API

উইন্ডো ম্যানেজমেন্ট API আপনাকে আপনার মেশিনের সাথে সংযুক্ত ডিসপ্লেগুলি গণনা করতে এবং নির্দিষ্ট স্ক্রিনে উইন্ডো স্থাপন করতে দেয়।

প্রস্তাবিত ব্যবহারের ক্ষেত্রে

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

  • মাল্টি-উইন্ডো গ্রাফিক্স এডিটর à la Gimp সঠিকভাবে অবস্থান করা উইন্ডোতে বিভিন্ন সম্পাদনা সরঞ্জাম রাখতে পারে।
  • ভার্চুয়াল ট্রেডিং ডেস্ক একাধিক উইন্ডোতে বাজারের প্রবণতা দেখাতে পারে যার যেকোনো একটি ফুলস্ক্রিন মোডে দেখা যেতে পারে।
  • স্লাইডশো অ্যাপগুলি অভ্যন্তরীণ প্রাথমিক স্ক্রিনে স্পিকার নোট এবং একটি বহিরাগত প্রজেক্টরে উপস্থাপনা দেখাতে পারে।

কিভাবে উইন্ডো ম্যানেজমেন্ট API ব্যবহার করবেন

সমস্যা

উইন্ডোজ নিয়ন্ত্রণ করার সময়-পরীক্ষিত পদ্ধতি, Window.open() , দুর্ভাগ্যবশত অতিরিক্ত স্ক্রীন সম্পর্কে অজানা। যদিও এই API-এর কিছু দিক একটু প্রাচীন বলে মনে হচ্ছে, যেমন এর windowFeatures DOMString প্যারামিটার, তবুও এটি বছরের পর বছর ধরে আমাদের ভালোভাবে পরিবেশন করেছে। একটি উইন্ডোর অবস্থান নির্দিষ্ট করতে, আপনি স্থানাঙ্কগুলিকে left এবং top (বা যথাক্রমে screenX এবং screenY ) হিসাবে পাস করতে পারেন এবং width এবং height (বা যথাক্রমে innerWidth এবং innerHeight ) হিসাবে পছন্দসই আকার পাস করতে পারেন। উদাহরণস্বরূপ, বাম দিক থেকে 50 পিক্সেল এবং উপরে থেকে 50 পিক্সেলে একটি 400×300 উইন্ডো খুলতে, এই কোডটি আপনি ব্যবহার করতে পারেন:

const popup = window.open(
  'https://example.com/',
  'My Popup',
  'left=50,top=50,width=400,height=300',
);

আপনি window.screen প্রপার্টি দেখে বর্তমান স্ক্রীন সম্পর্কে তথ্য পেতে পারেন, যা একটি Screen অবজেক্ট রিটার্ন করে। এটি আমার MacBook Pro 13″ এর আউটপুট:

window.screen;
/* Output from my MacBook Pro 13″:
  availHeight: 969
  availLeft: 0
  availTop: 25
  availWidth: 1680
  colorDepth: 30
  height: 1050
  isExtended: true
  onchange: null
  orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
  pixelDepth: 30
  width: 1680
*/

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

দুটি চেয়ারে স্কুলের বেঞ্চ। স্কুলের বেঞ্চের উপরে একটি ল্যাপটপ সমর্থনকারী জুতার বাক্স এবং এর চারপাশে দুটি আইপ্যাড রয়েছে।
একটি মাল্টি-স্ক্রিন সেটআপ।

আমি যদি বড় পর্দার সুবিধা নিতে চাই, আমি উপরের কোড নমুনা থেকে পপআপটি দ্বিতীয় স্ক্রিনে রাখতে পারি। আমি এটি এই মত করি:

popup.moveTo(2500, 50);

এটি একটি মোটামুটি অনুমান, যেহেতু দ্বিতীয় পর্দার মাত্রা জানার কোন উপায় নেই। window.screen থেকে পাওয়া তথ্য শুধুমাত্র অন্তর্নির্মিত স্ক্রীনকে কভার করে, কিন্তু iPad স্ক্রীন নয়। বিল্ট-ইন স্ক্রিনের রিপোর্ট করা width ছিল 1680 পিক্সেল, তাই 2500 পিক্সেলে চলে যাওয়া উইন্ডোটিকে আইপ্যাডে স্থানান্তর করতে কাজ করতে পারে , যেহেতু আমি জানি যে এটি আমার ম্যাকবুকের ডানদিকে অবস্থিত। সাধারণ ক্ষেত্রে আমি কীভাবে এটি করতে পারি? দেখা যাচ্ছে, অনুমান করার চেয়ে ভালো উপায় আছে। এই উপায় হল উইন্ডো ম্যানেজমেন্ট API।

বৈশিষ্ট্য সনাক্তকরণ

উইন্ডো ম্যানেজমেন্ট API সমর্থিত কিনা তা পরীক্ষা করতে, ব্যবহার করুন:

if ('getScreenDetails' in window) {
  // The Window Management API is supported.
}

window-management অনুমতি

আমি উইন্ডো ম্যানেজমেন্ট এপিআই ব্যবহার করার আগে, আমাকে অবশ্যই ব্যবহারকারীর কাছে এটি করার অনুমতি চাইতে হবে। window-management অনুমতিটি অনুমতি API এর সাথে জিজ্ঞাসা করা যেতে পারে:

let granted = false;
try {
  const { state } = await navigator.permissions.query({ name: 'window-management' });
  granted = state === 'granted';
} catch {
  // Nothing.
}

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

async function getWindowManagementPermissionState() {
  let state;
  // The new permission name.
  try {
    ({ state } = await navigator.permissions.query({
      name: "window-management",
    }));
  } catch (err) {
    return `${err.name}: ${err.message}`;
  }
  return state;
}

document.querySelector("button").addEventListener("click", async () => {
  const state = await getWindowManagementPermissionState();
  document.querySelector("pre").textContent = state;
});

ব্রাউজারটি নতুন API-এর যেকোনো পদ্ধতি ব্যবহার করার প্রথম প্রচেষ্টায় গতিশীলভাবে অনুমতি প্রম্পট দেখানোর জন্য বেছে নিতে পারে । আরও জানতে পড়ুন।

window.screen.isExtended এক্সটেন্ডেড প্রপার্টি

আমার ডিভাইসের সাথে একাধিক স্ক্রীন সংযুক্ত আছে কিনা তা জানতে, আমি window.screen.isExtended প্রপার্টি অ্যাক্সেস করি। এটি true বা false ফেরত দেয়। আমার সেটআপের জন্য, এটি true ফিরে আসে।

window.screen.isExtended;
// Returns `true` or `false`.

getScreenDetails() পদ্ধতি

এখন যেহেতু আমি জানি যে বর্তমান সেটআপটি মাল্টি-স্ক্রিন, আমি Window.getScreenDetails() ব্যবহার করে দ্বিতীয় স্ক্রীন সম্পর্কে আরও তথ্য পেতে পারি। এই ফাংশনটি কল করলে একটি অনুমতি প্রম্পট দেখাবে যা আমাকে জিজ্ঞাসা করবে যে সাইটটি খুলতে এবং আমার স্ক্রিনে উইন্ডো রাখতে পারে কিনা। ফাংশনটি একটি প্রতিশ্রুতি প্রদান করে যা একটি ScreenDetailed বস্তুর সাথে সমাধান করে। আমার ম্যাকবুক প্রো 13-এ একটি সংযুক্ত আইপ্যাড সহ, এর মধ্যে দুটি ScreenDetailed অবজেক্ট সহ একটি screens ক্ষেত্র রয়েছে:

await window.getScreenDetails();
/* Output from my MacBook Pro 13″ with the iPad attached:
{
  currentScreen: ScreenDetailed {left: 0, top: 0, isPrimary: true, isInternal: true, devicePixelRatio: 2, …}
  oncurrentscreenchange: null
  onscreenschange: null
  screens: [{
    // The MacBook Pro
    availHeight: 969
    availLeft: 0
    availTop: 25
    availWidth: 1680
    colorDepth: 30
    devicePixelRatio: 2
    height: 1050
    isExtended: true
    isInternal: true
    isPrimary: true
    label: "Built-in Retina Display"
    left: 0
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 30
    top: 0
    width: 1680
  },
  {
    // The iPad
    availHeight: 999
    availLeft: 1680
    availTop: 25
    availWidth: 1366
    colorDepth: 24
    devicePixelRatio: 2
    height: 1024
    isExtended: true
    isInternal: false
    isPrimary: false
    label: "Sidecar Display (AirPlay)"
    left: 1680
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 24
    top: 0
    width: 1366
  }]
}
*/

সংযুক্ত স্ক্রীন সম্পর্কে তথ্য screens অ্যারেতে পাওয়া যায়। লক্ষ্য করুন কিভাবে আইপ্যাডের জন্য left মান 1680 থেকে শুরু হয়, যা বিল্ট-ইন ডিসপ্লের width ঠিক। এটি আমাকে ঠিক কীভাবে স্ক্রিনগুলি যৌক্তিকভাবে সাজানো হয়েছে তা নির্ধারণ করতে দেয় (একে অপরের পাশে, একে অপরের উপরে, ইত্যাদি)। এটি একটি isInternal একটি কিনা এবং এটি একটি isPrimary কিনা তা দেখানোর জন্য প্রতিটি স্ক্রিনের জন্য এখন ডেটা রয়েছে৷ মনে রাখবেন যে অন্তর্নির্মিত স্ক্রিনটি অগত্যা প্রাথমিক পর্দা নয় ।

currentScreen ক্ষেত্রটি বর্তমান window.screen এর সাথে সম্পর্কিত একটি লাইভ অবজেক্ট। বস্তুটি ক্রস-স্ক্রিন উইন্ডো প্লেসমেন্ট বা ডিভাইস পরিবর্তনের উপর আপডেট করা হয়।

screenschange ইভেন্ট

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

মনে রাখবেন যে আপনাকে অ্যাসিঙ্ক্রোনাসভাবে নতুন স্ক্রীনের বিবরণ দেখতে হবে, screenschange ইভেন্ট নিজেই এই ডেটা প্রদান করে না। স্ক্রীনের বিশদ বিবরণ দেখতে, একটি ক্যাশে Screens ইন্টারফেস থেকে লাইভ অবজেক্ট ব্যবহার করুন।

const screenDetails = await window.getScreenDetails();
let cachedScreensLength = screenDetails.screens.length;
screenDetails.addEventListener('screenschange', (event) => {
  if (screenDetails.screens.length !== cachedScreensLength) {
    console.log(
      `The screen count changed from ${cachedScreensLength} to ${screenDetails.screens.length}`,
    );
    cachedScreensLength = screenDetails.screens.length;
  }
});

currentscreenchange ইভেন্ট

যদি আমি শুধুমাত্র বর্তমান স্ক্রিনে পরিবর্তন করতে আগ্রহী হই (অর্থাৎ, লাইভ অবজেক্ট currentScreen মান), আমি currentscreenchange ইভেন্টের জন্য শুনতে পারি। 

const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('currentscreenchange', async (event) => {
  const details = screenDetails.currentScreen;
  console.log('The current screen has changed.', event, details);
});

change ঘটনা

অবশেষে, যদি আমি শুধুমাত্র একটি কংক্রিট স্ক্রিনে পরিবর্তন করতে আগ্রহী, আমি সেই পর্দার change ইভেন্ট শুনতে পারি। 

const firstScreen = (await window.getScreenDetails())[0];
firstScreen.addEventListener('change', async (event) => {
  console.log('The first screen has changed.', event, firstScreen);
});

নতুন ফুলস্ক্রিন বিকল্প

এখন অবধি, আপনি অনুরোধ করতে পারেন যে উপাদানগুলি যথাযথভাবে নামযুক্ত requestFullScreen() পদ্ধতির মাধ্যমে ফুলস্ক্রিন মোডে প্রদর্শিত হবে। পদ্ধতিটি একটি options প্যারামিটার নেয় যেখানে আপনি FullscreenOptions পাস করতে পারেন। এখন পর্যন্ত, এর একমাত্র সম্পত্তি navigationUI । উইন্ডো ম্যানেজমেন্ট এপিআই একটি নতুন screen প্রপার্টি যোগ করে যা আপনাকে কোন স্ক্রীনটি ফুলস্ক্রিন ভিউ শুরু করতে হবে তা নির্ধারণ করতে দেয়। উদাহরণস্বরূপ, আপনি যদি প্রাথমিক স্ক্রিনটিকে পূর্ণস্ক্রীন করতে চান: 

try {
  const primaryScreen = (await getScreenDetails()).screens.filter((screen) => screen.isPrimary)[0];
  await document.body.requestFullscreen({ screen: primaryScreen });
} catch (err) {
  console.error(err.name, err.message);
}

পলিফিল

উইন্ডো ম্যানেজমেন্ট এপিআই পলিফিল করা সম্ভব নয়, তবে আপনি এটির আকৃতিকে শিম করতে পারেন যাতে আপনি নতুন API এর বিরুদ্ধে একচেটিয়াভাবে কোড করতে পারেন: 

if (!('getScreenDetails' in window)) {
  // Returning a one-element array with the current screen,
  // noting that there might be more.
  window.getScreenDetails = async () => [window.screen];
  // Set to `false`, noting that this might be a lie.
  window.screen.isExtended = false;
}

API-এর অন্যান্য দিক, অর্থাৎ, বিভিন্ন স্ক্রীন পরিবর্তন ইভেন্ট এবং FullscreenOptions এর screen প্রপার্টি, অ-সমর্থক ব্রাউজার দ্বারা যথাক্রমে কখনই ফায়ার বা নীরবভাবে উপেক্ষা করা হবে না।

ডেমো

আপনি যদি আমার মতো কিছু হন, আপনি বিভিন্ন ক্রিপ্টোকারেন্সির বিকাশের উপর ঘনিষ্ঠ নজর রাখেন। (বাস্তবে আমি এই গ্রহটিকে ভালবাসি বলে আমি খুব বেশি করি না, কিন্তু, এই নিবন্ধটির জন্য, অনুমান করুন যে আমি করেছি।) আমার মালিকানাধীন ক্রিপ্টোকারেন্সিগুলির ট্র্যাক রাখতে, আমি একটি ওয়েব অ্যাপ তৈরি করেছি যা আমাকে জীবনের সমস্ত পরিস্থিতিতে বাজার দেখতে দেয়, যেমন আমার বিছানার আরাম থেকে, যেখানে আমার একটি শালীন একক-স্ক্রিন সেটআপ রয়েছে।

একটি বিছানার শেষে লেখকের পা আংশিকভাবে দৃশ্যমান সহ বিশাল টিভি পর্দা। স্ক্রিনে, একটি জাল ক্রিপ্টো কারেন্সি ট্রেডিং ডেস্ক।
আরাম করে বাজার দেখছি।

এটি ক্রিপ্টো সম্পর্কে, বাজারগুলি যে কোনও সময় ব্যস্ত হতে পারে। এটি ঘটলে, আমি দ্রুত আমার ডেস্কে চলে যেতে পারি যেখানে আমার একটি মাল্টি-স্ক্রিন সেটআপ আছে। আমি যেকোনো মুদ্রার উইন্ডোতে ক্লিক করতে পারি এবং বিপরীত স্ক্রিনে একটি পূর্ণস্ক্রীন ভিউতে দ্রুত সম্পূর্ণ বিবরণ দেখতে পারি। নিচে আমার সাম্প্রতিক YCY রক্তস্নানের সময় তোলা একটি সাম্প্রতিক ছবি দেওয়া হল। এটা আমাকে সম্পূর্ণভাবে আঁকড়ে ধরল এবং আমার মুখে হাত রেখে আমাকে ছেড়ে দিল।

লেখক তার আতঙ্কিত মুখে হাত রেখে নকল ক্রিপ্টো কারেন্সি ট্রেডিং ডেস্কের দিকে তাকিয়ে আছেন।
আতঙ্কিত, YCY রক্তস্নানের সাক্ষী।

আপনি নীচে এমবেড করা ডেমোর সাথে খেলতে পারেন, বা ত্রুটিতে এর উত্স কোডটি দেখতে পারেন৷

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

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

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

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

এন্টারপ্রাইজ নিয়ন্ত্রণ

Chrome এন্টারপ্রাইজ ব্যবহারকারীরা পারমাণবিক নীতি গ্রুপ সেটিংসের প্রাসঙ্গিক বিভাগে বর্ণিত উইন্ডো ম্যানেজমেন্ট API-এর বিভিন্ন দিক নিয়ন্ত্রণ করতে পারেন।

স্বচ্ছতা

উইন্ডো ম্যানেজমেন্ট এপিআই ব্যবহার করার অনুমতি দেওয়া হয়েছে কিনা তা ব্রাউজারের সাইটের তথ্যে প্রকাশ করা হয়েছে এবং অনুমতি API-এর মাধ্যমেও জিজ্ঞাসাযোগ্য।

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

ব্রাউজার অনুমতি অনুদান অব্যাহত রাখে। ব্রাউজারের সাইটের তথ্যের মাধ্যমে অনুমতি প্রত্যাহার করা যেতে পারে।

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

ক্রোম টিম উইন্ডো ম্যানেজমেন্ট এপিআইয়ের সাথে আপনার অভিজ্ঞতাগুলি শুনতে চায়।

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

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

  • সংশ্লিষ্ট গিটহাব রেপোতে একটি নির্দিষ্ট সমস্যা ফাইল করুন, বা কোনও বিদ্যমান ইস্যুতে আপনার চিন্তাভাবনা যুক্ত করুন।

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

আপনি কি ক্রোমের বাস্তবায়নের সাথে একটি বাগ পেয়েছেন? অথবা বাস্তবায়ন বৈশিষ্ট থেকে ভিন্ন?

  • new.crbug.com এ একটি বাগ ফাইল করুন। আপনি যতটা বিশদ বিবরণ অন্তর্ভুক্ত করতে ভুলবেন না, পুনরুত্পাদন করার জন্য সাধারণ নির্দেশাবলী এবং Blink>Screen>MultiScreen প্রবেশ করুন উপাদান বাক্সে প্রবেশ করুন। দ্রুত এবং সহজ রিপ্রো শেয়ার করার জন্য গ্লিচ দুর্দান্ত কাজ করে।

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

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

  • আপনি কীভাবে এটি ডাব্লুআইসিজি ডিসকোর্স থ্রেডে ব্যবহার করার পরিকল্পনা করছেন তা ভাগ করুন।
  • #WindowManagement হ্যাশট্যাগ ব্যবহার করে @ ক্রোমিয়ামদেবকে একটি টুইট প্রেরণ করুন এবং আপনি কোথায় এবং কীভাবে এটি ব্যবহার করছেন তা আমাদের জানান।
  • অন্যান্য ব্রাউজার বিক্রেতাদের এপিআই বাস্তবায়নের জন্য বলুন।

সহায়ক লিঙ্ক

স্বীকৃতি

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

,

সংযুক্ত ডিসপ্লে এবং সেই প্রদর্শনগুলির তুলনায় উইন্ডোজ অবস্থান সম্পর্কে তথ্য পান।

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

উইন্ডো ম্যানেজমেন্ট API

উইন্ডো ম্যানেজমেন্ট এপিআই আপনাকে আপনার মেশিনের সাথে সংযুক্ত ডিসপ্লেগুলি গণনা করতে এবং নির্দিষ্ট স্ক্রিনে উইন্ডোজ স্থাপন করতে দেয়।

প্রস্তাবিত ব্যবহারের ক্ষেত্রে

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

  • মাল্টি-উইন্ডো গ্রাফিক্স সম্পাদক à লা জিম্প বিভিন্ন সম্পাদনা সরঞ্জামগুলি সঠিকভাবে অবস্থিত উইন্ডোতে রাখতে পারে।
  • ভার্চুয়াল ট্রেডিং ডেস্কগুলি একাধিক উইন্ডোতে বাজারের প্রবণতাগুলি দেখাতে পারে যার মধ্যে যে কোনও একটি ফুলস্ক্রিন মোডে দেখা যায়।
  • স্লাইডশো অ্যাপ্লিকেশনগুলি অভ্যন্তরীণ প্রাথমিক স্ক্রিনে স্পিকার নোট এবং একটি বাহ্যিক প্রজেক্টরের উপস্থাপনা প্রদর্শন করতে পারে।

উইন্ডো ম্যানেজমেন্ট এপিআই কীভাবে ব্যবহার করবেন

সমস্যা

উইন্ডোজ, Window.open() নিয়ন্ত্রণ করার সময়-পরীক্ষিত পদ্ধতির দুর্ভাগ্যক্রমে অতিরিক্ত পর্দা সম্পর্কে অজানা। যদিও এই এপিআইয়ের কিছু দিকগুলি কিছুটা প্রত্নতাত্ত্বিক বলে মনে হচ্ছে, যেমন এটির windowFeatures DOMString প্যারামিটার, তবুও এটি বছরের পর বছর ধরে আমাদের ভাল পরিবেশন করেছে। উইন্ডোর অবস্থান নির্দিষ্ট করতে, আপনি স্থানাঙ্কগুলি left এবং top হিসাবে (বা যথাক্রমে screenX এবং screenY ) পাস করতে পারেন এবং কাঙ্ক্ষিত আকারটি width এবং height (বা যথাক্রমে innerWidth এবং innerHeight ) হিসাবে পাস করতে পারেন। উদাহরণস্বরূপ, বাম দিক থেকে 50 পিক্সেল এবং শীর্ষ থেকে 50 পিক্সেল এ 400 × 300 উইন্ডোটি খুলতে, এটি আপনি ব্যবহার করতে পারেন এমন কোড:

const popup = window.open(
  'https://example.com/',
  'My Popup',
  'left=50,top=50,width=400,height=300',
);

আপনি window.screen সম্পত্তিটি দেখে বর্তমান স্ক্রিন সম্পর্কে তথ্য পেতে পারেন, যা কোনও Screen অবজেক্ট দেয়। এটি আমার ম্যাকবুক প্রো 13 on এর আউটপুট:

window.screen;
/* Output from my MacBook Pro 13″:
  availHeight: 969
  availLeft: 0
  availTop: 25
  availWidth: 1680
  colorDepth: 30
  height: 1050
  isExtended: true
  onchange: null
  orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
  pixelDepth: 30
  width: 1680
*/

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

দুটি চেয়ারে স্কুল বেঞ্চ। স্কুলের বেঞ্চের শীর্ষে জুতার বাক্সগুলি রয়েছে একটি ল্যাপটপ এবং এর চারপাশে দুটি আইপ্যাড সমর্থন করে।
একটি মাল্টি-স্ক্রিন সেটআপ।

আমি যদি বড় স্ক্রিনের সুবিধা নিতে চাই তবে আমি উপরের কোড নমুনা থেকে দ্বিতীয় স্ক্রিনে পপআপ রাখতে পারি। আমি এটি এই মত করি:

popup.moveTo(2500, 50);

এটি মোটামুটি অনুমান, যেহেতু দ্বিতীয় পর্দার মাত্রাগুলি জানার কোনও উপায় নেই। window.screen থেকে তথ্য.স্ক্রিন কেবল অন্তর্নির্মিত স্ক্রিনটি কভার করে তবে আইপ্যাড স্ক্রিনটি নয়। অন্তর্নির্মিত স্ক্রিনের রিপোর্ট করা width ছিল 1680 পিক্সেল, সুতরাং 2500 পিক্সেলগুলিতে সরানো উইন্ডোটি আইপ্যাডে স্থানান্তরিত করতে কাজ করতে পারে , যেহেতু আমি জানি যে এটি আমার ম্যাকবুকের ডানদিকে অবস্থিত। আমি কীভাবে সাধারণ ক্ষেত্রে এটি করতে পারি? দেখা যাচ্ছে, অনুমান করার চেয়ে আরও ভাল উপায় আছে। এইভাবে উইন্ডো ম্যানেজমেন্ট এপিআই।

বৈশিষ্ট্য সনাক্তকরণ

উইন্ডো ম্যানেজমেন্ট এপিআই সমর্থিত কিনা তা যাচাই করতে, ব্যবহার:

if ('getScreenDetails' in window) {
  // The Window Management API is supported.
}

window-management অনুমতি

আমি উইন্ডো ম্যানেজমেন্ট এপিআই ব্যবহার করার আগে, আমাকে অবশ্যই ব্যবহারকারীকে এটি করার অনুমতি চাইতে হবে। window-management অনুমতিটি এপিআই এর মতো অনুমতিগুলির সাথে জিজ্ঞাসা করা যেতে পারে:

let granted = false;
try {
  const { state } = await navigator.permissions.query({ name: 'window-management' });
  granted = state === 'granted';
} catch {
  // Nothing.
}

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

async function getWindowManagementPermissionState() {
  let state;
  // The new permission name.
  try {
    ({ state } = await navigator.permissions.query({
      name: "window-management",
    }));
  } catch (err) {
    return `${err.name}: ${err.message}`;
  }
  return state;
}

document.querySelector("button").addEventListener("click", async () => {
  const state = await getWindowManagementPermissionState();
  document.querySelector("pre").textContent = state;
});

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

window.screen.isExtended সম্পত্তি

একাধিক স্ক্রিন আমার ডিভাইসের সাথে সংযুক্ত রয়েছে কিনা তা জানতে, আমি window.screen.isExtended সম্পত্তিটি অ্যাক্সেস করি। এটি true বা false ফেরত দেয়। আমার সেটআপের জন্য, এটি true ফিরে আসে।

window.screen.isExtended;
// Returns `true` or `false`.

getScreenDetails() পদ্ধতি

এখন যেহেতু আমি জানি যে বর্তমান সেটআপটি মাল্টি-স্ক্রিন, আমি Window.getScreenDetails() ব্যবহার করে দ্বিতীয় স্ক্রিন সম্পর্কে আরও তথ্য পেতে পারি। এই ফাংশনটি কল করা একটি অনুমতি প্রম্পট প্রদর্শন করবে যা আমাকে জিজ্ঞাসা করে যে সাইটটি আমার স্ক্রিনে উইন্ডো খুলতে পারে এবং উইন্ডোজ রাখতে পারে কিনা। ফাংশনটি এমন একটি প্রতিশ্রুতি দেয় যা ScreenDetailed অবজেক্টের সাথে সমাধান করে। সংযুক্ত আইপ্যাড সহ আমার ম্যাকবুক প্রো 13 এ, এটিতে দুটি ScreenDetailed অবজেক্ট সহ একটি screens ফিল্ড অন্তর্ভুক্ত রয়েছে:

await window.getScreenDetails();
/* Output from my MacBook Pro 13″ with the iPad attached:
{
  currentScreen: ScreenDetailed {left: 0, top: 0, isPrimary: true, isInternal: true, devicePixelRatio: 2, …}
  oncurrentscreenchange: null
  onscreenschange: null
  screens: [{
    // The MacBook Pro
    availHeight: 969
    availLeft: 0
    availTop: 25
    availWidth: 1680
    colorDepth: 30
    devicePixelRatio: 2
    height: 1050
    isExtended: true
    isInternal: true
    isPrimary: true
    label: "Built-in Retina Display"
    left: 0
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 30
    top: 0
    width: 1680
  },
  {
    // The iPad
    availHeight: 999
    availLeft: 1680
    availTop: 25
    availWidth: 1366
    colorDepth: 24
    devicePixelRatio: 2
    height: 1024
    isExtended: true
    isInternal: false
    isPrimary: false
    label: "Sidecar Display (AirPlay)"
    left: 1680
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 24
    top: 0
    width: 1366
  }]
}
*/

সংযুক্ত স্ক্রিন সম্পর্কে তথ্য screens অ্যারেতে উপলব্ধ। আইপ্যাডের জন্য left মান কীভাবে 1680 থেকে শুরু হয় তা নোট করুন, যা অন্তর্নির্মিত ডিসপ্লেটির ঠিক width । এটি আমাকে কীভাবে স্ক্রিনগুলি যৌক্তিকভাবে সাজানো হয়েছে তা নির্ধারণ করতে দেয় (একে অপরের পাশে, একে অপরের শীর্ষে ইত্যাদি)। প্রতিটি স্ক্রিনের জন্য এখন ডেটা রয়েছে এটি দেখানোর জন্য এটি একটি isInternal কিনা এবং এটি কোনও isPrimary কিনা। নোট করুন যে অন্তর্নির্মিত স্ক্রিনটি প্রাথমিক স্ক্রিনটি অগত্যা নয় ।

currentScreen ক্ষেত্রটি বর্তমান window.screen সাথে সম্পর্কিত একটি লাইভ অবজেক্ট। অবজেক্টটি ক্রস-স্ক্রিন উইন্ডো প্লেসমেন্ট বা ডিভাইস পরিবর্তনে আপডেট করা হয়।

screenschange ইভেন্ট

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

নোট করুন যে আপনাকে নতুন স্ক্রিনের বিশদটি asynchronisly সন্ধান করতে হবে, screenschange ইভেন্টটি নিজেই এই ডেটা সরবরাহ করে না। স্ক্রিনের বিশদটি সন্ধান করতে, ক্যাশেড Screens ইন্টারফেস থেকে লাইভ অবজেক্টটি ব্যবহার করুন।

const screenDetails = await window.getScreenDetails();
let cachedScreensLength = screenDetails.screens.length;
screenDetails.addEventListener('screenschange', (event) => {
  if (screenDetails.screens.length !== cachedScreensLength) {
    console.log(
      `The screen count changed from ${cachedScreensLength} to ${screenDetails.screens.length}`,
    );
    cachedScreensLength = screenDetails.screens.length;
  }
});

currentscreenchange ইভেন্ট

যদি আমি কেবল বর্তমান স্ক্রিনে পরিবর্তনগুলিতে আগ্রহী (এটি হ'ল লাইভ অবজেক্ট currentScreen মান), আমি currentscreenchange ইভেন্টটি শুনতে পারি। 

const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('currentscreenchange', async (event) => {
  const details = screenDetails.currentScreen;
  console.log('The current screen has changed.', event, details);
});

change ইভেন্ট

শেষ অবধি, আমি যদি কেবল কোনও কংক্রিটের পর্দায় পরিবর্তনে আগ্রহী হই তবে আমি সেই স্ক্রিনের change ইভেন্টটি শুনতে পারি। 

const firstScreen = (await window.getScreenDetails())[0];
firstScreen.addEventListener('change', async (event) => {
  console.log('The first screen has changed.', event, firstScreen);
});

নতুন ফুলস্ক্রিন বিকল্প

এখন অবধি, আপনি অনুরোধ করতে পারেন যে উপাদানগুলি যথাযথভাবে নামযুক্ত requestFullScreen() পদ্ধতির মাধ্যমে ফুলস্ক্রিন মোডে প্রদর্শিত হবে। পদ্ধতিটি এমন একটি options প্যারামিটার নেয় যেখানে আপনি FullscreenOptions পাস করতে পারেন। এখনও অবধি, এর একমাত্র সম্পত্তি navigationUI হয়েছে। উইন্ডো ম্যানেজমেন্ট এপিআই একটি নতুন screen সম্পত্তি যুক্ত করেছে যা আপনাকে কোন স্ক্রিনটি ফুলস্ক্রিন ভিউ শুরু করতে হবে তা নির্ধারণ করতে দেয়। উদাহরণস্বরূপ, আপনি যদি প্রাথমিক স্ক্রিনটি ফুলস্ক্রিন তৈরি করতে চান: 

try {
  const primaryScreen = (await getScreenDetails()).screens.filter((screen) => screen.isPrimary)[0];
  await document.body.requestFullscreen({ screen: primaryScreen });
} catch (err) {
  console.error(err.name, err.message);
}

পলিফিল

উইন্ডো ম্যানেজমেন্ট এপিআই পলিফিল করা সম্ভব নয়, তবে আপনি এর আকারটি শিম করতে পারেন যাতে আপনি নতুন এপিআইয়ের বিপরীতে একচেটিয়াভাবে কোড করতে পারেন: 

if (!('getScreenDetails' in window)) {
  // Returning a one-element array with the current screen,
  // noting that there might be more.
  window.getScreenDetails = async () => [window.screen];
  // Set to `false`, noting that this might be a lie.
  window.screen.isExtended = false;
}

এপিআইয়ের অন্যান্য দিকগুলি, অর্থাৎ বিভিন্ন স্ক্রিন পরিবর্তন ইভেন্ট এবং FullscreenOptions screen সম্পত্তি, অ-সমর্থক ব্রাউজারগুলির দ্বারা যথাক্রমে কখনও আগুন বা নিঃশব্দে উপেক্ষা করা যায় না।

ডেমো

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

আংশিক দৃশ্যমান লেখকের পা সহ একটি বিছানার শেষে বিশাল টিভি স্ক্রিন। স্ক্রিনে, একটি জাল ক্রিপ্টো মুদ্রা ট্রেডিং ডেস্ক।
স্বাচ্ছন্দ্যময় এবং বাজারগুলি দেখছে।

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

নকল ক্রিপ্টো মুদ্রা ট্রেডিং ডেস্কের দিকে তাকিয়ে তার আতঙ্কিত মুখের হাত দিয়ে লেখক।
আতঙ্কিত, ইয়েসি ব্লাডথের সাক্ষী।

আপনি নীচে এম্বেড থাকা ডেমো দিয়ে খেলতে পারেন, বা গ্লিচ এ এর ​​উত্স কোডটি দেখতে পারেন।

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

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

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

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

এন্টারপ্রাইজ নিয়ন্ত্রণ

ক্রোম এন্টারপ্রাইজ ব্যবহারকারীরা পারমাণবিক নীতি গোষ্ঠী সেটিংসের প্রাসঙ্গিক বিভাগে বর্ণিত উইন্ডো ম্যানেজমেন্ট এপিআইয়ের বেশ কয়েকটি দিক নিয়ন্ত্রণ করতে পারে।

স্বচ্ছতা

উইন্ডো ম্যানেজমেন্ট এপিআই ব্যবহারের অনুমতিটি মঞ্জুর করা হয়েছে কিনা তা ব্রাউজারের সাইটের তথ্যে প্রকাশিত হয়েছে এবং অনুমতি এপিআইয়ের মাধ্যমেও প্রশ্নযোগ্য।

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

ব্রাউজার অনুমতি অনুদান অব্যাহত রাখে। ব্রাউজারের সাইটের তথ্যের মাধ্যমে অনুমতি প্রত্যাহার করা যেতে পারে।

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

ক্রোম টিম উইন্ডো ম্যানেজমেন্ট এপিআইয়ের সাথে আপনার অভিজ্ঞতাগুলি শুনতে চায়।

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

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

  • সংশ্লিষ্ট গিটহাব রেপোতে একটি নির্দিষ্ট সমস্যা ফাইল করুন, বা কোনও বিদ্যমান ইস্যুতে আপনার চিন্তাভাবনা যুক্ত করুন।

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

আপনি কি ক্রোমের বাস্তবায়নের সাথে একটি বাগ পেয়েছেন? অথবা বাস্তবায়ন বৈশিষ্ট থেকে ভিন্ন?

  • new.crbug.com এ একটি বাগ ফাইল করুন। আপনি যতটা বিশদ বিবরণ অন্তর্ভুক্ত করতে ভুলবেন না, পুনরুত্পাদন করার জন্য সাধারণ নির্দেশাবলী এবং Blink>Screen>MultiScreen প্রবেশ করুন উপাদান বাক্সে প্রবেশ করুন। দ্রুত এবং সহজ রিপ্রো শেয়ার করার জন্য গ্লিচ দুর্দান্ত কাজ করে।

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

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

  • আপনি কীভাবে এটি ডাব্লুআইসিজি ডিসকোর্স থ্রেডে ব্যবহার করার পরিকল্পনা করছেন তা ভাগ করুন।
  • #WindowManagement হ্যাশট্যাগ ব্যবহার করে @ ক্রোমিয়ামদেবকে একটি টুইট প্রেরণ করুন এবং আপনি কোথায় এবং কীভাবে এটি ব্যবহার করছেন তা আমাদের জানান।
  • অন্যান্য ব্রাউজার বিক্রেতাদের এপিআই বাস্তবায়নের জন্য বলুন।

সহায়ক লিঙ্ক

স্বীকৃতি

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