আপনার অ্যাপ ইনস্টল করা আছে? ইন্সটল করুন রিলেটেড অ্যাপস এপিআই আপনাকে জানাবে!

Get Install Related Apps API তাদের সম্পর্কে বিশদ সহ ইনস্টল করা সম্পর্কিত অ্যাপগুলির তালিকা পেতে দেয়৷

এটি আপনাকে আপনার প্রগ্রেসিভ ওয়েব অ্যাপ (PWA), অ্যান্ড্রয়েড অ্যাপ বা ইউনিভার্সাল উইন্ডোজ প্ল্যাটফর্ম (UWP) অ্যাপ বর্তমান ডিভাইসে ইনস্টল করা আছে কিনা তা পরীক্ষা করতে দেয়, উভয়ই PWA নিজেই এবং একটি সম্পর্কিত ওয়েব পৃষ্ঠা থেকে (যেমন, একটি পণ্য বিপণন ওয়েবসাইট)।

Bubblewrap হল লাইব্রেরির একটি ওপেন সোর্স সেট এবং Node.js-এর জন্য একটি কমান্ড লাইন টুল (CLI)। Google Chrome টিম দ্বারা Bubblewrap তৈরি করা হয়েছে, যাতে ডেভেলপারদের একটি Android প্রকল্প তৈরি করতে, তৈরি করতে এবং স্বাক্ষর করতে সাহায্য করে যা আপনার PWA একটি বিশ্বস্ত ওয়েব অ্যাক্টিভিটি (TWA) হিসাবে চালু করে৷

PWABuilder হল Microsoft দ্বারা তৈরি একটি ওপেন সোর্স প্রজেক্ট, যা ডেভেলপারদের PWA-এর URL লিখে, অ্যাপের মেটাডেটা প্রবেশ/সম্পাদনা করে, এবং জেনারেট বোতামে ক্লিক করে Microsoft Store, Google Play Store, App Store, এবং Meta Quest Store সহ বিভিন্ন স্টোরে প্রকাশের জন্য তাদের PWAs প্যাকেজ করতে এবং স্বাক্ষর করতে দেয়।

PWABuilder Android এবং ChromeOS-এর জন্য PWAs প্যাকেজ করতে হুডের নীচে বাবল র‌্যাপ ব্যবহার করে।

অ্যাপটি ইতিমধ্যে ইনস্টল করা থাকলে, আপনি ব্যবহারকারীর অভিজ্ঞতা কাস্টমাইজ করতে পারেন।

যেমন:

  • আপনার অন্য অ্যাপ ইতিমধ্যে ইনস্টল করা থাকলে আপনার PWA এর ইনস্টলেশনের প্রচার না করা।
  • একটি পণ্য বিপণন ওয়েবসাইট থেকে ব্যবহারকারীকে সরাসরি আপনার অ্যাপে পুনঃনির্দেশ করা হচ্ছে।
  • ডুপ্লিকেট বিজ্ঞপ্তি প্রতিরোধ করতে অন্যান্য অ্যাপে বিজ্ঞপ্তির মতো কিছু কার্যকারিতা কেন্দ্রীভূত করা।

Get Installed Related Apps API ব্যবহার করতে, আপনাকে আপনার অ্যাপকে আপনার পৃষ্ঠা সম্পর্কে বলতে হবে, তারপর আপনার অ্যাপ সম্পর্কে আপনার পৃষ্ঠাকে বলুন। একবার আপনি উভয়ের মধ্যে সম্পর্ক সংজ্ঞায়িত করার পরে, আপনি সংশ্লিষ্ট অ্যাপটি ইনস্টল করা আছে কিনা তা পরীক্ষা করতে পারেন।

সাইটগুলিকে তাদের নিজস্ব অ্যাপের অত্যধিক বিস্তৃত সেট পরীক্ষা করা থেকে আটকাতে, শুধুমাত্র ওয়েব অ্যাপ ম্যানিফেস্টে ঘোষিত প্রথম তিনটি অ্যাপই বিবেচনায় নেওয়া হবে।

অন্যান্য শক্তিশালী ওয়েব API-এর মতো, Get Installed Related Apps API শুধুমাত্র তখনই উপলব্ধ হয় যখন HTTPS-এর মাধ্যমে পরিবেশন করা হয়।

Get Install Related Apps API কি?

অ্যাসিঙ্ক্রোনাস navigator.getInstalledRelatedApps() পদ্ধতিতে কল করা একটি প্রতিশ্রুতি প্রদান করে যা অ্যাপ্লিকেশানগুলির বিশদ বিবরণ ধারণকারী বস্তুর অ্যারের সাথে সমাধান করে:

  • বর্তমান ডিভাইসে ইনস্টল করা,
  • ওয়েব অ্যাপ ম্যানিফেস্টের related_applications ক্ষেত্রে সংজ্ঞায়িত করা হয়েছে,
  • একটি পৃষ্ঠার সাথে একটি যাচাইকৃত সম্পর্ক আছে যেখানে navigator.getInstalledRelatedApps() পদ্ধতি বলা হয় (বিশদ বিবরণের জন্য পরবর্তী বিভাগগুলি দেখুন)।
const installedRelatedApps = await navigator.getInstalledRelatedApps?.();

console.log(installedRelatedApps) কল করলে এমন কিছু পাওয়া যায়:

[
  {
    platform: "webapp",
    id: "https://example.com/?utm_source=home_screen",
    url: "https://example.com/manifest.json"
  },
  {
    platform: "play",
    id: "com.example.twa",
    url: "https://play.google.com/store/apps/details?id=com.example.twa",
    version: "0.1.0"
  }
]

উদাহরণস্বরূপ, ব্যবহারকারীর ডিভাইসে কোনো সম্পর্কিত অ্যাপ ইনস্টল করা আছে কিনা তা পরীক্ষা করতে, আপনি নিম্নলিখিত ওয়ান-লাইনার ব্যবহার করতে পারেন:

const hasInstalledRelatedApps = !!(await navigator.getInstalledRelatedApps?.())?.length;

আপনি যদি প্যাকেজ আইডি জানেন তবে ইনস্টল করা সম্পর্কিত Android অ্যাপের সংস্করণ নম্বর পেতে, আপনি নিম্নলিখিত ওয়ান-লাইনার ব্যবহার করতে পারেন:

const installedRelatedAndroidAppVersion = (await navigator.getInstalledRelatedApps?.())?.find(app => app.id === 'com.example.twa')?.version;

এর অর্থ হল navigator.getInstalledRelatedApps() পদ্ধতিটি এখনও ইনস্টল করা সম্পর্কিত অ্যাপগুলিকে ফিরিয়ে দেবে যদিও তাদের সংস্করণ min_version এর চেয়ে কম হয় বা তাদের স্বাক্ষর শংসাপত্র ওয়েব অ্যাপ ম্যানিফেস্টের related_applications ক্ষেত্রে ঘোষিত কোনও fingerprints সাথে মেলে না।

সমর্থিত অ্যাপের ধরন আপনি পরীক্ষা করতে পারেন

অ্যাপের ধরন থেকে যাচাইযোগ্য
অ্যান্ড্রয়েড অ্যাপ শুধুমাত্র Android:
Chrome 80 বা তার পরে
ইউনিভার্সাল উইন্ডোজ প্ল্যাটফর্ম (UWP) অ্যাপ শুধুমাত্র উইন্ডোজ:
Chrome 85 বা তার পরে
এজ 85 বা তার পরে
প্রোগ্রেসিভ ওয়েব অ্যাপ (পিডব্লিউএ) একই মূলে একই সুযোগে ইনস্টল করা হয়েছে অ্যান্ড্রয়েড:
Chrome 84 বা তার পরে
ডেস্কটপ (Windows, macOS, Linux, ChromeOS):
Chrome 140 বা তার পরে
প্রান্ত 140 বা তার পরে
প্রগতিশীল ওয়েব অ্যাপ (PWA)
একই বা ভিন্ন মূলে বিভিন্ন সুযোগে ইনস্টল করা হয়েছে
শুধুমাত্র Android:
Chrome 84 বা তার পরে

আপনার অ্যান্ড্রয়েড অ্যাপ ইনস্টল করা আছে কিনা তা পরীক্ষা করুন

আপনার ওয়েবসাইট আপনার Android অ্যাপ ইনস্টল করা আছে কিনা তা পরীক্ষা করতে পারে।

শুধুমাত্র Android: Chrome 80 বা তার পরে

আপনার ওয়েবসাইট সম্পর্কে আপনার Android অ্যাপকে বলুন

প্রথমে, ডিজিটাল অ্যাসেট লিঙ্ক সিস্টেম ব্যবহার করে আপনার ওয়েবসাইট এবং অ্যান্ড্রয়েড অ্যাপ্লিকেশনের মধ্যে সম্পর্ক নির্ধারণ করতে আপনাকে আপনার অ্যান্ড্রয়েড অ্যাপ আপডেট করতে হবে। এটি যাচাই করে যে শুধুমাত্র আপনার ওয়েবসাইট আপনার Android অ্যাপ ইনস্টল করা আছে কিনা তা পরীক্ষা করতে পারে।

আপনার Android অ্যাপের AndroidManifest.xml এ, একটি asset_statements এন্ট্রি যোগ করুন:

<manifest>
  <application>
       <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
     </application>
</manifest>

তারপর, strings.xml এ, আপনার ডোমেনের সাথে site আপডেট করার জন্য নিম্নলিখিত সম্পদ বিবৃতি যোগ করুন। পালানো অক্ষর অন্তর্ভুক্ত করতে ভুলবেন না.

<string name="asset_statements">
  [{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
      \"namespace\": \"web\",
      \"site\": \"https://example.com\"
    }
  }]
</string>

একবার সম্পূর্ণ হয়ে গেলে, ডিভাইসে আপডেট করা অ্যাপটি ইনস্টল করুন বা Google Play Store বা অন্য যেকোনো Android অ্যাপ বিতরণ প্ল্যাটফর্মে প্রকাশ করুন।

আপনার অ্যান্ড্রয়েড অ্যাপ সম্পর্কে আপনার ওয়েবসাইট বলুন

এরপরে, আপনার পৃষ্ঠায় একটি ওয়েব অ্যাপ ম্যানিফেস্ট যোগ করে আপনার অ্যান্ড্রয়েড অ্যাপ সম্পর্কে আপনার ওয়েবসাইটকে বলুন। ম্যানিফেস্টে অবশ্যই related_applications বৈশিষ্ট্য অন্তর্ভুক্ত থাকতে হবে, একটি অ্যারে যা আপনার অ্যাপের বিশদ বিবরণ প্রদান করে, platform এবং id সহ।

  • platform play হবে
  • id হল অ্যান্ড্রয়েড প্যাকেজ আইডি
{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome"
  }]
}

আপনার অ্যাপ ইনস্টল করা আছে কিনা তা পরীক্ষা করুন

অবশেষে, আপনার অ্যান্ড্রয়েড অ্যাপ ইনস্টল করা আছে কিনা তা পরীক্ষা করতে অ্যাসিঙ্ক্রোনাস ফাংশন navigator.getInstalledRelatedApps() এ কল করুন।

আপনার Windows (UWP) অ্যাপ ইনস্টল করা আছে কিনা তা পরীক্ষা করুন

আপনার ওয়েবসাইট আপনার Windows অ্যাপ (UWP ব্যবহার করে নির্মিত) ইনস্টল করা আছে কিনা তা পরীক্ষা করতে পারে।

শুধুমাত্র উইন্ডোজ: Chrome 85 বা তার পরের, Edge 85 বা তার পরে

আপনার ওয়েবসাইট সম্পর্কে আপনার উইন্ডোজ অ্যাপকে বলুন

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

আপনার অ্যাপের ম্যানিফেস্ট ফাইল Package.appxmanifestWindows.appUriHandler এক্সটেনশন নিবন্ধন যোগ করুন। উদাহরণস্বরূপ, যদি আপনার ওয়েবসাইটের ঠিকানা example.com হয় তাহলে আপনি আপনার অ্যাপের ম্যানিফেস্টে নিম্নলিখিত এন্ট্রি যোগ করবেন:

<Applications>
  <Application Id="App" ... >
      ...
      <Extensions>
         <uap3:Extension Category="windows.appUriHandler">
          <uap3:AppUriHandler>
            <uap3:Host Name="example.com" />
          </uap3:AppUriHandler>
        </uap3:Extension>
      </Extensions>
  </Application>
</Applications>

মনে রাখবেন, আপনাকে আপনার <Package> অ্যাট্রিবিউটে uap3 নামস্থান যোগ করতে হতে পারে।

তারপর, windows-app-web-link নামে একটি JSON ফাইল ( .json ফাইল এক্সটেনশন ছাড়া) তৈরি করুন এবং আপনার অ্যাপের প্যাকেজ পরিবারের নাম দিন। ফাইলটি আপনার সার্ভার রুটে বা /.well-known/ ডিরেক্টরিতে রাখুন। আপনি অ্যাপ ম্যানিফেস্ট ডিজাইনারের প্যাকেজিং বিভাগে প্যাকেজ পরিবারের নাম খুঁজে পেতে পারেন।

[{
  "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
  "paths": [ "*" ]
}]

ইউআরআই হ্যান্ডলার সেট আপ করার সম্পূর্ণ বিবরণের জন্য অ্যাপ URI হ্যান্ডলার ব্যবহার করে ওয়েবসাইটগুলির জন্য অ্যাপগুলি সক্ষম করুন দেখুন।

আপনার উইন্ডোজ অ্যাপ সম্পর্কে আপনার ওয়েবসাইট বলুন

এরপরে, আপনার পৃষ্ঠায় একটি ওয়েব অ্যাপ ম্যানিফেস্ট যোগ করে আপনার Windows অ্যাপ সম্পর্কে আপনার ওয়েবসাইটকে বলুন। ম্যানিফেস্টে অবশ্যই related_applications প্রপার্টি অন্তর্ভুক্ত থাকতে হবে, এমন একটি অ্যারে যা platform এবং id সহ আপনার অ্যাপ সম্পর্কে বিশদ বিবরণ প্রদান করে।

  • platform windows হতে হবে
  • id হল আপনার অ্যাপের প্যাকেজ ফ্যামিলি নাম, আপনার Package.appxmanifest ফাইলে <Application> Id মান দ্বারা সংযোজিত।
{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App"
  }]
}

আপনার অ্যাপ ইনস্টল করা আছে কিনা তা পরীক্ষা করুন

অবশেষে, আপনার উইন্ডোজ অ্যাপ ইনস্টল করা আছে কিনা তা পরীক্ষা করতে অ্যাসিঙ্ক্রোনাস ফাংশন navigator.getInstalledRelatedApps() এ কল করুন।

এই ডেমো দেখুন.

আপনার প্রগ্রেসিভ ওয়েব অ্যাপ ইতিমধ্যেই ইনস্টল করা আছে কিনা তা পরীক্ষা করুন (ক্ষেত্রে)

এটি ইতিমধ্যে ইনস্টল করা আছে কিনা তা দেখতে আপনার PWA চেক করতে পারেন। এই ক্ষেত্রে, অনুরোধ করা পৃষ্ঠাটি অবশ্যই একই ডোমেনে এবং আপনার PWA-এর সীমার মধ্যে হতে হবে, যেমন ওয়েব অ্যাপ ম্যানিফেস্টে স্কোপ দ্বারা সংজ্ঞায়িত করা হয়েছে।

এতে সমর্থিত:

Android: Chrome 84 বা তার পরে

ডেস্কটপ (Windows, macOS, Linux, ChromeOS): Chrome 140 বা তার পরে, Edge 140 বা তার পরে

নিজের সম্পর্কে আপনার PWA বলুন

আপনার PWA এর ওয়েব অ্যাপ ম্যানিফেস্টে একটি related_applications এন্ট্রি যোগ করে আপনার PWA-কে নিজের সম্পর্কে বলুন।

  • platform webapp হতে হবে
  • url হল আপনার PWA এর ওয়েব অ্যাপ ম্যানিফেস্টের পথ (আপেক্ষিক হতে পারে)
  • id হল ওয়েব অ্যাপ ম্যানিফেস্টের id ফিল্ডে ঘোষিত ওয়েব অ্যাপ আইডি বা ব্রাউজার দ্বারা গণনা করা হয় (ডেস্কটপের জন্য প্রয়োজনীয়, অ্যান্ড্রয়েডের জন্য প্রয়োজন নেই)
{
  
  "scope": "/",
  "start_url": "/?utm_source=home_screen",
  "related_applications": [{
    "platform": "webapp",
    "url": "/manifest.json",
    "id": "https://example.com/?utm_source=home_screen"
  }],
  
}

আপনার PWA ইনস্টল করা আছে কিনা তা পরীক্ষা করুন

অবশেষে, এটি ইনস্টল করা আছে কিনা তা পরীক্ষা করতে আপনার PWA এর সুযোগের মধ্যে থেকে অ্যাসিঙ্ক্রোনাস ফাংশন navigator.getInstalledRelatedApps() কল করুন। যদি navigator.getInstalledRelatedApps() আপনার PWA এর সুযোগের বাইরে কল করা হয় তবে এটি [] ফিরে আসবে। বিস্তারিত জানার জন্য পরবর্তী বিভাগ দেখুন.

আপনার প্রগ্রেসিভ ওয়েব অ্যাপ ইন্সটল করা আছে কিনা চেক করুন (স্কোপের বাইরে)

আপনার ওয়েবসাইট আপনার PWA ইনস্টল করা আছে কিনা তা পরীক্ষা করতে পারে, এমনকি যদি পৃষ্ঠাটি আপনার PWA এর সুযোগের বাইরে থাকে। উদাহরণস্বরূপ, /landing/ থেকে পরিবেশিত একটি ল্যান্ডিং পৃষ্ঠা /pwa/ থেকে পরিবেশিত PWA ইনস্টল করা আছে কিনা বা আপনার ল্যান্ডিং পৃষ্ঠা www.example.com থেকে এবং আপনার PWA app.example.com থেকে পরিবেশিত হয়েছে কিনা তা পরীক্ষা করতে পারে।

এতে সমর্থিত:

শুধুমাত্র Android: Chrome 84 বা তার পরে

আপনার ওয়েবসাইট সম্পর্কে আপনার PWA বলুন

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

PWA যেখানে থাকে সেই ডোমেনের /.well-known/ ডিরেক্টরিতে একটি assetlinks.json ফাইল যোগ করুন, উদাহরণস্বরূপ app.example.comsite প্রপার্টিতে, ওয়েব অ্যাপ ম্যানিফেস্টের সম্পূর্ণ পাথ প্রদান করুন যা চেক করবে (আপনার PWA-এর ওয়েব অ্যাপ ম্যানিফেস্ট নয়)।

// Served from https://app.example.com/.well-known/assetlinks.json
[
  {
    "relation": ["delegate_permission/common.query_webapk"],
    "target": {
      "namespace": "web",
      "site": "https://www.example.com/manifest.json"
    }
  }
]

এরপর, আপনার পৃষ্ঠায় একটি ওয়েব অ্যাপ ম্যানিফেস্ট যোগ করে আপনার PWA অ্যাপ সম্পর্কে আপনার ওয়েবসাইটকে বলুন। ম্যানিফেস্টে অবশ্যই related_applications বৈশিষ্ট্য অন্তর্ভুক্ত করতে হবে, একটি অ্যারে যা আপনার PWA সম্পর্কে বিশদ প্রদান করে, platform এবং url সহ।

  • platform webapp হতে হবে
  • url হল আপনার PWA এর ওয়েব অ্যাপ ম্যানিফেস্টের সম্পূর্ণ পথ
{
  "related_applications": [{
    "platform": "webapp",
    "url": "https://app.example.com/manifest.json"
  }]
}

আপনার PWA ইনস্টল করা আছে কিনা তা পরীক্ষা করুন

অবশেষে, আপনার PWA ইনস্টল করা আছে কিনা তা পরীক্ষা করতে অ্যাসিঙ্ক্রোনাস ফাংশন navigator.getInstalledRelatedApps() এ কল করুন।

এখনও প্রশ্ন আছে?

এখনও প্রশ্ন আছে? অন্য কারও অনুরূপ প্রশ্ন আছে কিনা তা দেখতে StackOverflow-এ getInstalledRelatedApps ট্যাগটি দেখুন। যদি না হয়, সেখানে আপনার প্রশ্ন জিজ্ঞাসা করুন, এবং progressive-web-apps ট্যাগের সাথে ট্যাগ করতে ভুলবেন না। আমাদের দল প্রায়ই সেই ট্যাগটি নিরীক্ষণ করে এবং আপনার প্রশ্নের উত্তর দেওয়ার চেষ্টা করে।

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

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

  • https://new.crbug.com এ একটি বাগ ফাইল করুন। আপনি যতটা পারেন বিশদ বিবরণ অন্তর্ভুক্ত করুন, বাগ পুনরুত্পাদনের জন্য নির্দেশাবলী প্রদান করুন এবং কম্পোনেন্ট বাক্সে Mobile>WebAPKs লিখুন।

সহায়ক লিঙ্ক

ধন্যবাদ

উইন্ডোজ অ্যাপ্লিকেশানগুলি পরীক্ষা করার জন্য বিশদ বিবরণে সহায়তা করার জন্য মাইক্রোসফ্টের সুংগুক চুয়েকে এবং ক্রোমের বিশদ বিবরণে সহায়তার জন্য রায়ান কানসোকে বিশেষ ধন্যবাদ৷