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

Pete LePage

Alexey Rodionov

Get Installed Related Apps API-এর মাধ্যমে ইনস্টল করা সম্পর্কিত অ্যাপগুলোর তালিকা এবং সেগুলোর বিস্তারিত তথ্য পাওয়া যায়।

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

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

উদাহরণস্বরূপ:

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

Get Installed 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;

আপনার প্যাকেজ আইডি জানা থাকলে, ইনস্টল করা সংশ্লিষ্ট অ্যান্ড্রয়েড অ্যাপের ভার্সন নম্বর পেতে আপনি নিম্নলিখিত এক-লাইনের কমান্ডটি ব্যবহার করতে পারেন:

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

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

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

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

এর উপর সমর্থিত:

• শুধুমাত্র অ্যান্ড্রয়েডের জন্য: ক্রোম ৮০ বা তার পরবর্তী সংস্করণ

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

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

আপনার অ্যান্ড্রয়েড অ্যাপের 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>

বিশেষ টিপস: এটি একটি অ্যারে। এর মানে হলো, আপনি আপনার অ্যান্ড্রয়েড অ্যাপ এবং আপনার একাধিক ওয়েবসাইটের মধ্যে একটি যাচাইকৃত সম্পর্ক স্থাপন করতে পারেন।

সম্পন্ন হলে, ডিভাইসে আপডেট করা অ্যাপটি ইনস্টল করুন অথবা গুগল প্লে স্টোর বা অন্য কোনো অ্যান্ড্রয়েড অ্যাপ ডিস্ট্রিবিউশন প্ল্যাটফর্মে প্রকাশ করুন।

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

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

• platform অবশ্যই play হবে
• id হল অ্যান্ড্রয়েড প্যাকেজ আইডি

{
  ...
  "related_applications": [
    {
      "platform": "play",
      "id": "com.example.twa"
    }
  ]
  ...
}

বিশেষ টিপস: এটি একটি অ্যারে। এর মানে হলো, আপনি আপনার ওয়েবসাইট এবং আপনার একাধিক অ্যান্ড্রয়েড অ্যাপের মধ্যে একটি যাচাইকৃত সম্পর্ক স্থাপন করতে পারেন।

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

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

আপনার উইন্ডোজ (UWP) অ্যাপটি ইনস্টল করা আছে কিনা তা পরীক্ষা করুন।

আপনার ওয়েবসাইট যাচাই করতে পারে যে আপনার UWP ব্যবহার করে তৈরি উইন্ডোজ অ্যাপটি ইনস্টল করা আছে কি না।

এর উপর সমর্থিত:

• শুধুমাত্র উইন্ডোজের জন্য: ক্রোম ৮৫ বা তার পরবর্তী সংস্করণ, এজ ৮৫ বা তার পরবর্তী সংস্করণ

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

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

আপনার অ্যাপের ম্যানিফেস্ট ফাইল AppxManifest.xml অথবা Package.appxmanifest এ Windows.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 নেমস্পেসটি যোগ করতে হতে পারে।

আপনার ওয়েবসাইটের একাধিক ঠিকানা থাকলে, প্রতিটি ঠিকানার জন্য <uap3:AppUriHandler> এর ভিতরে একটি আলাদা <uap3:Host Name=... /> এন্ট্রি যোগ করুন।

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

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

বিশেষ টিপস: এটি একটি অ্যারে। এর মানে হলো, আপনি আপনার ওয়েবসাইট এবং আপনার একাধিক উইন্ডোজ অ্যাপের মধ্যে একটি যাচাইকৃত সম্পর্ক স্থাপন করতে পারেন।

প্যাকেজ ফ্যামিলি নেম (Package Family Name) বের করার জন্য আপনি অ্যাপটি ইনস্টল করে পাওয়ারশেলে (PowerShell) নিম্নলিখিত কমান্ডটি চালাতে পারেন এবং তালিকা থেকে আপনার অ্যাপটি খুঁজে নিতে পারেন:

Get-AppxPackage | Select-Object PackageFamilyName

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

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

এরপরে, আপনার পেজে একটি ওয়েব অ্যাপ ম্যানিফেস্ট যোগ করে আপনার ওয়েবসাইটকে আপনার উইন্ডোজ অ্যাপ সম্পর্কে জানান। ম্যানিফেস্টটিতে অবশ্যই related_applications প্রপার্টি থাকতে হবে, যা একটি অ্যারে এবং এতে আপনার অ্যাপের platform ও id সহ বিস্তারিত তথ্য থাকে।

• platform অবশ্যই windows হতে হবে।
• id হলো আপনার অ্যাপের প্যাকেজ ফ্যামিলি নেম, যার শেষে সাফিক্স হিসেবে !App যুক্ত থাকে।

{
  ...
  "related_applications": [
    {
      "platform": "windows",
      "id": "MyApp_9jmtgj1pbbz6e!App"
    }
  ]
  ...
}

বিশেষ টিপস: এটি একটি অ্যারে। এর মানে হলো, আপনি আপনার ওয়েবসাইট এবং আপনার একাধিক উইন্ডোজ অ্যাপের মধ্যে একটি যাচাইকৃত সম্পর্ক স্থাপন করতে পারেন।

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

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

এই ডেমোটি দেখুন।

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

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

এর উপর সমর্থিত:

• অ্যান্ড্রয়েড: ক্রোম ৮৪ বা তার পরবর্তী সংস্করণ
• ডেস্কটপ (উইন্ডোজ, ম্যাকওএস, লিনাক্স, ক্রোমওএস): ক্রোম ১৪০ বা তার পরবর্তী সংস্করণ, এজ ১৪০ বা তার পরবর্তী সংস্করণ

আপনার 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 থেকে পরিবেশিত হয়।

এর উপর সমর্থিত:

• শুধুমাত্র অ্যান্ড্রয়েডের জন্য: ক্রোম ৮৪ বা তার পরবর্তী সংস্করণ

আপনার PWA-কে আপনার ওয়েবসাইট সম্পর্কে জানান।

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

PWA-টি যে ডোমেইনে রয়েছে, যেমন app.example.com , তার /.well-known/ ডিরেক্টরিতে একটি assetlinks.json ফাইল যোগ করুন। site প্রপার্টিতে, যে ওয়েব অ্যাপ ম্যানিফেস্টটি চেকটি সম্পাদন করবে তার সম্পূর্ণ পাথ দিন (আপনার 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 এবং আপনার একাধিক ওয়েবসাইটের মধ্যে একটি যাচাইকৃত সম্পর্ক স্থাপন করতে পারেন।

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

এরপরে, আপনার পেজে একটি ওয়েব অ্যাপ ম্যানিফেস্ট যোগ করে আপনার ওয়েবসাইটকে আপনার PWA অ্যাপ সম্পর্কে জানান। ম্যানিফেস্টটিতে অবশ্যই related_applications প্রপার্টি অন্তর্ভুক্ত থাকতে হবে, যা একটি অ্যারে এবং এতে আপনার PWA-এর platform ও url সহ বিস্তারিত তথ্য থাকে।

• platform অবশ্যই webapp হতে হবে
• url হলো আপনার PWA-এর ওয়েব অ্যাপ ম্যানিফেস্টের সম্পূর্ণ পাথ।

{
  ...
  "related_applications": [
    {
      "platform": "webapp",
      "url": "https://app.example.com/manifest.json"
    }
  ]
  ...
}

বিশেষ টিপস: এটি একটি অ্যারে। এর মানে হলো, আপনি আপনার ওয়েবসাইট এবং আপনার একাধিক PWA-এর মধ্যে একটি যাচাইকৃত সম্পর্ক স্থাপন করতে পারেন।

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

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

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

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

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

আপনি কি ক্রোমের বাস্তবায়নে কোনো বাগ খুঁজে পেয়েছেন? নাকি এর বাস্তবায়ন স্পেসিফিকেশন থেকে ভিন্ন?

• https://new.crbug.com-এ একটি বাগ রিপোর্ট করুন। যতটা সম্ভব বিস্তারিত তথ্য অন্তর্ভুক্ত করুন, বাগটি পুনরায় ঘটানোর নির্দেশাবলী দিন এবং Components বক্সে Mobile>WebAPKs লিখুন।

সহায়ক লিঙ্ক

• Get Installed Related Apps API-এর জন্য সর্বজনীন ব্যাখ্যা
• স্পেক ড্রাফট
• ট্র্যাকিং বাগ
• ChromeStatus.com এন্ট্রি
• ব্লিঙ্ক কম্পোনেন্ট: Mobile>WebAPKs

ধন্যবাদ

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