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

প্রকাশিত: ১৪ ফেব্রুয়ারী, ২০২০

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

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

Spotify PWA-তে "ইনস্টল অ্যাপ" বোতামটি দেওয়া আছে।

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

পূর্বশর্ত

শুরু করার আগে, নিশ্চিত করুন যে আপনার 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 ইভেন্টে ( deferredPrompt ভেরিয়েবলে সংরক্ষিত) prompt() কল করুন। এটি ব্যবহারকারীকে একটি মডেল ইনস্টল ডায়ালগ দেখায়, যেখানে তাদের নিশ্চিত করতে বলা হয় যে তারা আপনার 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 প্রপার্টি হল এমন একটি প্রতিশ্রুতি যা ব্যবহারকারীর পছন্দের সাথে সমাধান করা হয়। আপনি শুধুমাত্র একবার deferred ইভেন্টে 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() ব্যবহার করুন।

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

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

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

// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});

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

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

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

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

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