কীভাবে আপনার নিজের ইন-অ্যাপ ইনস্টল অভিজ্ঞতা প্রদান করবেন

Pete LePage

অনেক ব্রাউজার আপনাকে সরাসরি তার ইউজার ইন্টারফেসের মধ্যে আপনার প্রগ্রেসিভ ওয়েব অ্যাপ (PWA) এর ইনস্টলেশন সক্ষম এবং প্রচার করতে দেয়। ইনস্টলেশন (কখনও কখনও পূর্বে হোম স্ক্রীনে যোগ হিসাবে উল্লেখ করা হয়) ব্যবহারকারীদের তাদের মোবাইল বা ডেস্কটপ ডিভাইসে আপনার PWA ইনস্টল করতে দেয়। একটি PWA ইনস্টল করা এটিকে ব্যবহারকারীর লঞ্চারে যোগ করে যাতে এটি অন্য যেকোন ইনস্টল করা অ্যাপের মতো চলতে পারে।

ব্রাউজার-প্রদত্ত ইনস্টল অভিজ্ঞতা ছাড়াও, আপনি সরাসরি আপনার অ্যাপের মধ্যে আপনার নিজস্ব কাস্টম ইনস্টল প্রবাহ প্রদান করতে পারেন।

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

পূর্বশর্ত

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

ইনস্টলেশন প্রচার

আপনার প্রগ্রেসিভ ওয়েব অ্যাপ ইনস্টলযোগ্য তা দেখানোর জন্য এবং একটি কাস্টম ইন-অ্যাপ ইনস্টল ফ্লো প্রদান করতে:

1. beforeinstallprompt ইভেন্টের জন্য শুনুন।
2. beforeinstallprompt ইভেন্টটি সংরক্ষণ করুন যাতে এটি পরে ইনস্টল প্রবাহকে ট্রিগার করতে পারে।
3. ব্যবহারকারীকে সতর্ক করুন যে আপনার PWA ইনস্টলযোগ্য, এবং অ্যাপ-মধ্যস্থ ইনস্টলেশন প্রবাহ শুরু করতে একটি বোতাম বা অন্যান্য উপাদান প্রদান করুন।

beforeinstallprompt ইভেন্টের জন্য শুনুন

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

// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
  // Optionally, send analytics event that PWA install promo was shown.
  console.log(`'beforeinstallprompt' event was fired.`);
});

ইন-অ্যাপ ইনস্টলেশন প্রবাহ

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

buttonInstall.addEventListener('click', async () => {
  // Hide the app provided install promotion
  hideInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice;
  // Optionally, send analytics event with outcome of user choice
  console.log(`User response to the install prompt: ${outcome}`);
  // We've used the prompt and can't use it again, throw it away
  deferredPrompt = null;
});

userChoice সম্পত্তি হল একটি প্রতিশ্রুতি যা ব্যবহারকারীর পছন্দের সাথে সমাধান করে। আপনি বিলম্বিত ইভেন্টে শুধুমাত্র একবার prompt() কল করতে পারেন। ব্যবহারকারী যদি এটি খারিজ করে দেয়, তাহলে আপনাকে অপেক্ষা করতে হবে যতক্ষণ না beforeinstallprompt ইভেন্টটি আবার চালু হয়, সাধারণত userChoice সম্পত্তির সমাধান হওয়ার পরপরই।

PWA সফলভাবে ইনস্টল করা হয়েছে তা সনাক্ত করুন

ব্যবহারকারী আপনার ইউজার ইন্টারফেসের মধ্যে থেকে আপনার অ্যাপ ইনস্টল করেছেন কিনা তা নির্ধারণ করতে আপনি userChoice সম্পত্তি ব্যবহার করতে পারেন। কিন্তু, ব্যবহারকারী যদি ঠিকানা বার বা অন্য ব্রাউজার উপাদান থেকে আপনার PWA ইনস্টল করে, userChoice সাহায্য করবে না। পরিবর্তে, আপনার appinstalled ইভেন্টের কথা শোনা উচিত, যেটি যখনই আপনার PWA ইনস্টল করা হয় তখনই ফায়ার হয়, এটি ইনস্টল করার জন্য যে পদ্ধতি ব্যবহার করা হোক না কেন।

window.addEventListener('appinstalled', () => {
  // Hide the app-provided install promotion
  hideInstallPromotion();
  // Clear the deferredPrompt so it can be garbage collected
  deferredPrompt = null;
  // Optionally, send analytics event to indicate successful install
  console.log('PWA was installed');
});

PWA কিভাবে চালু করা হয়েছিল তা শনাক্ত করুন

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

কিভাবে PWA চালু করা হয়েছিল তা দেখুন

ব্যবহারকারীরা কীভাবে আপনার PWA চালু করেন তা ট্র্যাক করতে, display-mode মিডিয়া ক্যোয়ারী পরীক্ষা করতে matchMedia() ব্যবহার করুন। iOS-এ Safari এখনও এটিকে সমর্থন করে না, তাই আপনাকে অবশ্যই navigator.standalone চেক করতে হবে, যা ব্রাউজারটি স্বতন্ত্র মোডে চলছে কিনা তা নির্দেশ করে একটি বুলিয়ান প্রদান করে।

function getPWADisplayMode() {
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
  if (document.referrer.startsWith('android-app://')) {
    return 'twa';
  } else if (navigator.standalone || isStandalone) {
    return 'standalone';
  }
  return 'browser';
}

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

ব্যবহারকারী standalone , এবং browser tab মধ্যে পরিবর্তন করে কিনা তা ট্র্যাক করতে, display-mode মিডিয়া ক্যোয়ারীতে পরিবর্তনের জন্য শুনুন।

window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
  let displayMode = 'browser';
  if (evt.matches) {
    displayMode = 'standalone';
  }
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', displayMode);
});

বর্তমান ডিসপ্লে মোডের উপর ভিত্তি করে UI আপডেট করুন

একটি ইনস্টল করা PWA হিসাবে চালু করার সময় একটি PWA এর জন্য একটি ভিন্ন পটভূমির রঙ প্রয়োগ করতে, শর্তসাপেক্ষ CSS ব্যবহার করুন:

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

আপনার অ্যাপের আইকন এবং নাম আপডেট করুন

আপনি যদি আপনার অ্যাপের নাম আপডেট করতে চান বা নতুন আইকন দিতে চান তাহলে কী করবেন? সেই পরিবর্তনগুলি কখন এবং কীভাবে Chrome-এ প্রতিফলিত হয় তা দেখতে Chrome কীভাবে ওয়েব অ্যাপ ম্যানিফেস্টের আপডেটগুলি পরিচালনা করে তা দেখুন৷

Pete LePage

অনেক ব্রাউজার আপনাকে সরাসরি তার ইউজার ইন্টারফেসের মধ্যে আপনার প্রগ্রেসিভ ওয়েব অ্যাপ (PWA) এর ইনস্টলেশন সক্ষম এবং প্রচার করতে দেয়। ইনস্টলেশন (কখনও কখনও পূর্বে হোম স্ক্রীনে যোগ হিসাবে উল্লেখ করা হয়) ব্যবহারকারীদের তাদের মোবাইল বা ডেস্কটপ ডিভাইসে আপনার PWA ইনস্টল করতে দেয়। একটি PWA ইনস্টল করা এটিকে ব্যবহারকারীর লঞ্চারে যোগ করে যাতে এটি অন্য যেকোন ইনস্টল করা অ্যাপের মতো চলতে পারে।

ব্রাউজার-প্রদত্ত ইনস্টল অভিজ্ঞতা ছাড়াও, আপনি সরাসরি আপনার অ্যাপের মধ্যে আপনার নিজস্ব কাস্টম ইনস্টল প্রবাহ প্রদান করতে পারেন।

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

পূর্বশর্ত

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

ইনস্টলেশন প্রচার

আপনার প্রগ্রেসিভ ওয়েব অ্যাপ ইনস্টলযোগ্য তা দেখানোর জন্য এবং একটি কাস্টম ইন-অ্যাপ ইনস্টল ফ্লো প্রদান করতে:

1. beforeinstallprompt ইভেন্টের জন্য শুনুন।
2. beforeinstallprompt ইভেন্টটি সংরক্ষণ করুন যাতে এটি পরে ইনস্টল প্রবাহকে ট্রিগার করতে পারে।
3. ব্যবহারকারীকে সতর্ক করুন যে আপনার PWA ইনস্টলযোগ্য, এবং অ্যাপ-মধ্যস্থ ইনস্টলেশন প্রবাহ শুরু করতে একটি বোতাম বা অন্যান্য উপাদান প্রদান করুন।

beforeinstallprompt ইভেন্টের জন্য শুনুন

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

// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
  // Optionally, send analytics event that PWA install promo was shown.
  console.log(`'beforeinstallprompt' event was fired.`);
});

ইন-অ্যাপ ইনস্টলেশন প্রবাহ

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

buttonInstall.addEventListener('click', async () => {
  // Hide the app provided install promotion
  hideInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice;
  // Optionally, send analytics event with outcome of user choice
  console.log(`User response to the install prompt: ${outcome}`);
  // We've used the prompt and can't use it again, throw it away
  deferredPrompt = null;
});

userChoice সম্পত্তি হল একটি প্রতিশ্রুতি যা ব্যবহারকারীর পছন্দের সাথে সমাধান করে। আপনি বিলম্বিত ইভেন্টে শুধুমাত্র একবার prompt() কল করতে পারেন। ব্যবহারকারী যদি এটি খারিজ করে দেয়, তাহলে আপনাকে অপেক্ষা করতে হবে যতক্ষণ না beforeinstallprompt ইভেন্টটি আবার চালু হয়, সাধারণত userChoice সম্পত্তির সমাধান হওয়ার পরপরই।

PWA সফলভাবে ইনস্টল করা হয়েছে তা সনাক্ত করুন

ব্যবহারকারী আপনার ইউজার ইন্টারফেসের মধ্যে থেকে আপনার অ্যাপ ইনস্টল করেছেন কিনা তা নির্ধারণ করতে আপনি userChoice সম্পত্তি ব্যবহার করতে পারেন। কিন্তু, ব্যবহারকারী যদি ঠিকানা বার বা অন্য ব্রাউজার উপাদান থেকে আপনার PWA ইনস্টল করে, userChoice সাহায্য করবে না। পরিবর্তে, আপনার appinstalled ইভেন্টের কথা শোনা উচিত, যেটি যখনই আপনার PWA ইনস্টল করা হয় তখনই ফায়ার হয়, এটি ইনস্টল করার জন্য যে পদ্ধতি ব্যবহার করা হোক না কেন।

window.addEventListener('appinstalled', () => {
  // Hide the app-provided install promotion
  hideInstallPromotion();
  // Clear the deferredPrompt so it can be garbage collected
  deferredPrompt = null;
  // Optionally, send analytics event to indicate successful install
  console.log('PWA was installed');
});

PWA কিভাবে চালু করা হয়েছিল তা শনাক্ত করুন

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

কিভাবে PWA চালু করা হয়েছিল তা দেখুন

ব্যবহারকারীরা কীভাবে আপনার PWA চালু করেন তা ট্র্যাক করতে, display-mode মিডিয়া ক্যোয়ারী পরীক্ষা করতে matchMedia() ব্যবহার করুন। iOS-এ Safari এখনও এটিকে সমর্থন করে না, তাই আপনাকে অবশ্যই navigator.standalone চেক করতে হবে, যা ব্রাউজারটি স্বতন্ত্র মোডে চলছে কিনা তা নির্দেশ করে একটি বুলিয়ান প্রদান করে।

function getPWADisplayMode() {
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
  if (document.referrer.startsWith('android-app://')) {
    return 'twa';
  } else if (navigator.standalone || isStandalone) {
    return 'standalone';
  }
  return 'browser';
}

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

ব্যবহারকারী standalone , এবং browser tab মধ্যে পরিবর্তন করে কিনা তা ট্র্যাক করতে, display-mode মিডিয়া ক্যোয়ারীতে পরিবর্তনের জন্য শুনুন।

window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
  let displayMode = 'browser';
  if (evt.matches) {
    displayMode = 'standalone';
  }
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', displayMode);
});

বর্তমান ডিসপ্লে মোডের উপর ভিত্তি করে UI আপডেট করুন

একটি ইনস্টল করা PWA হিসাবে চালু করার সময় একটি PWA এর জন্য একটি ভিন্ন পটভূমির রঙ প্রয়োগ করতে, শর্তসাপেক্ষ CSS ব্যবহার করুন:

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

আপনার অ্যাপের আইকন এবং নাম আপডেট করুন

আপনি যদি আপনার অ্যাপের নাম আপডেট করতে চান বা নতুন আইকন দিতে চান তাহলে কী করবেন? সেই পরিবর্তনগুলি কখন এবং কীভাবে Chrome-এ প্রতিফলিত হয় তা দেখতে Chrome কীভাবে ওয়েব অ্যাপ ম্যানিফেস্টের আপডেটগুলি পরিচালনা করে তা দেখুন৷