আপনার অ্যাপ ইনস্টল করা আছে? getInstalledRelatedApps() আপনাকে বলবে!

getInstalledRelatedApps() পদ্ধতিটি আপনার ওয়েবসাইটকে আপনার Android/UWP অ্যাপ বা PWA ব্যবহারকারীর ডিভাইসে ইনস্টল করা আছে কিনা তা পরীক্ষা করার অনুমতি দেয়।

Pete LePage

Alexey Rodionov

getInstalledRelatedApps() API কি?

getInstalledRelatedApps() পদ্ধতি ইনস্টল করা সম্পর্কিত অ্যাপের তালিকা প্রদান করে।

navigator.getInstalledRelatedApps() কল করা একটি প্রতিশ্রুতি প্রদান করে যা ব্যবহারকারীর ডিভাইসে ইনস্টল করা সম্পর্কিত অ্যাপ্লিকেশনগুলির একটি অ্যারের সাথে সমাধান করে৷

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

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

উদাহরণস্বরূপ, যদি আপনার অ্যাপ ইতিমধ্যেই ইনস্টল করা থাকে:

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

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

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

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

আপনার ওয়েবসাইট সম্পর্কে আপনার 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 ব্যবহার করে নির্মিত) ইনস্টল করা আছে কিনা তা পরীক্ষা করতে পারে।

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

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

আপনার অ্যাপের ম্যানিফেস্ট ফাইল 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 নামস্থান যোগ করতে হতে পারে।

তারপর, 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-এর সীমার মধ্যে হতে হবে, যেমন ওয়েব অ্যাপ ম্যানিফেস্টে স্কোপ দ্বারা সংজ্ঞায়িত করা হয়েছে।

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

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

• platform webapp হতে হবে
• url হল আপনার PWA এর ওয়েব অ্যাপ ম্যানিফেস্টের পথ (আপেক্ষিক হতে পারে)
• id হল ওয়েব অ্যাপের সম্পূর্ণ পথ (ডেস্কটপের জন্য প্রয়োজনীয়, অ্যান্ড্রয়েডের জন্য প্রয়োজন নেই)

{
  …
  "scope": "/",
  "start_url": "/",
  "related_applications": [{
    "platform": "webapp",
    "url": "/manifest.json",
    "id": "https://example.com"
  }],
  …
}

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

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

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

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

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

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

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

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

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

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

সহায়ক লিঙ্ক

• getInstalledRelatedApps() API-এর জন্য সর্বজনীন ব্যাখ্যাকারী
• বিশেষ খসড়া
• ট্র্যাকিং বাগ
• ChromeStatus.com এন্ট্রি
• ব্লিঙ্ক কম্পোনেন্ট: Mobile>WebAPKs

ধন্যবাদ

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