تشخیص

می توانید تشخیص دهید که کاربر از PWA شما در مرورگر استفاده می کند یا در حالت مستقل. در مرورگرهای مبتنی بر Chromium (اندروید و دسکتاپ)، می‌توانید رویدادهای زیر را نیز شناسایی کنید:

  • وضعیت گفتگوی دعوت نامه نصب و نتیجه.
  • نصب به پایان رسید.
  • انتقال ناوبری از مرورگر به پنجره PWA و بالعکس.
  • وضعیت نصب PWA
  • برنامه مرتبط نصب شده از یک فروشگاه برنامه.

می‌توانید از این داده‌ها برای تجزیه و تحلیل، برای درک تنظیمات برگزیده کاربر و شخصی‌سازی تجربه آن‌ها استفاده کنید. برای ثبت این رویدادها، می‌توانید از ابزارهایی مانند پرسش‌های رسانه، رویدادها از window یا با استفاده از قابلیت‌های APIهایی که می‌توانید در اینجا فهرست شده‌اند استفاده کنید.

تشخیص حالت نمایش

برای ردیابی اینکه کاربران چگونه PWA خود را راه اندازی می کنند، می توانید از matchMedia() برای آزمایش درخواست رسانه display-mode استفاده کنید.

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)
    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';
}

window.addEventListener('DOMContentLoaded', () => {
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', getPWADisplayMode());
});

اگر از این مثال استفاده می کنید، به یاد داشته باشید که حالت نمایش را از مانیفست برنامه وب خود مطابقت دهید، به عنوان مثال، standalone ، minimal-ui یا fullscreen . همچنین می‌توانید با استفاده از شرایط جداشده با کاما، چندین پرس‌وجو را در رشته درخواست رسانه مطابقت دهید.

همچنین می‌توانید یک پارامتر پرس و جو به start_url مانیفست خود اضافه کنید که می‌توانید آن را با تجزیه و تحلیل برای ردیابی آمار مربوط به زمان، به چه طریق و میزان استفاده از PWA خود ثبت کنید.

نصب برنامه

وقتی کاربر درخواست نصب را در مرورگر می‌پذیرد، رویداد appinstalled در مرورگرهای مبتنی بر Chromium فعال می‌شود. یکی از کاربردهای عالی این کنترل کننده رویداد حذف هرگونه تبلیغ نصب درون برنامه ای است که اضافه کرده اید.

window.addEventListener('appinstalled', () => {
  // If visible, hide the install promotion
  hideInAppInstallPromotion();
  // Log install to analytics
  console.log('INSTALL: Success');
});

به یاد داشته باشید، در دستگاه‌های اندرویدی دارای WebAPK، رویداد زمانی فعال می‌شود که کاربر گفتگو را می‌پذیرد، نه پس از برش و نصب WebAPK. ممکن است چند ثانیه تاخیر قبل از نصب کامل برنامه وجود داشته باشد.

فصل درخواست نصب توضیح می‌دهد که چگونه می‌توان اعلان نصب را تشخیص داد و کاربر چه انتخابی انجام می‌دهد.

انتقال جلسه

کاربران می توانند از PWA شما در مرورگر و در فرم مستقل نصب شده استفاده کنند. در مرورگرهای دسکتاپ، همانطور که در تصویر زیر مشاهده می شود، می توانید با استفاده از نشان ها یا آیتم های منو، پیمایش فعلی را بین این زمینه ها انتقال دهید.

انتقال پیمایش بین برگه مرورگر و پنجره PWA.

در اندروید، یک آیتم منو شبیه به منوی دسکتاپ از مرورگر وجود دارد که ناوبری را به برنامه منتقل می کند. در این حالت، URL فعلی باز می شود اما یک پیمایش صفحه جدید در برنامه خواهد بود.

در تصویر زیر می توانید آیتم منو در اندروید را زمانی که برنامه از قبل نصب شده است مشاهده کنید.

Chrome در Android مورد منو را برای باز کردن پیمایش جدید در پنجره PWA نشان می‌دهد.

انتقال پس از نصب

از مرورگرهای دسکتاپ، ناوبری فعلی بلافاصله پس از نصب به برنامه منتقل می شود. برگه مرورگر بسته می‌شود و برنامه تازه نصب‌شده باز می‌شود و به کاری که کاربر انجام می‌داد ادامه می‌دهد.

در مرورگرهای تلفن همراه، هنگام نصب برنامه، پیمایش فعلی شما در مرورگر باقی می ماند. اگر کاربران بخواهند به برنامه منتقل شوند، باید برنامه را به صورت دستی باز کنند و این یک ناوبری جدید خواهد بود.

تشخیص انتقال

برای تشخیص انتقال بین مرورگر و پنجره، می‌توانید از یک درخواست رسانه استفاده کنید:

window.addEventListener('DOMContentLoaded', () => {
  // 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());
    });
});

جداسازی ذخیره سازی iOS و iPadOS

در iOS و iPadOS، هیچ ناوبری یا انتقال URL بین مرورگر و نماد نصب شده وجود ندارد. حتی اگر همان PWA باشد، هر نماد PWA که کاربر نصب می‌کند، فضای ذخیره‌سازی مخصوص به خود را دارد که از تب Safari و سایر نمادها جدا شده است. وقتی کاربر نماد نصب شده را باز می کند، هیچ فضای ذخیره سازی با سافاری به اشتراک گذاشته نمی شود. اگر PWA شما نیاز به ورود به سیستم داشته باشد، کاربر باید دوباره وارد سیستم شود. اگر برنامه چندین بار به صفحه اصلی اضافه شده باشد، برای هر نمونه PWA، کاربر جلسه متفاوتی دارد.

پشتیبانی مرورگر

  • کروم: پشتیبانی نمی شود.
  • لبه: پشتیبانی نمی شود.
  • فایرفاکس: پشتیبانی نمی شود.
  • سافاری: پشتیبانی نمی شود.

منبع

یک وب سایت ارتباط با یک برنامه را از طریق مانیفست نشان می دهد. برای انجام این کار، از عضو related_applications مشخصات Web App Manifest استفاده کنید. کلید related_applications آرایه ای از اشیاء است که هر برنامه مرتبط را نشان می دهد. هر ورودی شامل platform ، url و یک id اختیاری است.

اینها مقادیر احتمالی پلتفرم هستند:

  • chrome_web_store : فروشگاه وب Google Chrome.
  • play : برنامه های Google Play (Android و ChromeOS).
  • chromeos_play : ChromeOS Play.
  • webapp : برنامه های وب.
  • windows : فروشگاه مایکروسافت (ویندوز 10 و 11).
  • f-droid : F-droid.
  • amazon : آمازون اپ استور (FireOS).

وقتی کاربر برنامه‌ای را نصب می‌کند، اگر فیلد prefer_related_applications در مانیفست خود روی true تنظیم کنید، می‌توانید کاربر را به یک برنامه مرتبط هدایت کنید. با این تنظیمات، در مرورگرهای سازگار، جریان نصب PWA را نصب نمی‌کند. در عوض، نصب فروشگاه را از url یا id که در ورودی related_applications مشخص کرده‌اید، راه‌اندازی می‌کنند.

برنامه مرتبط می تواند PWA شما باشد و از طریق یک فروشگاه برنامه نصب شود. یکی از مزیت های این پیکربندی این است که در حال حاضر، فقط برنامه های نصب شده از طریق فروشگاه برنامه با یک نسخه پشتیبان یا زمانی که به دستگاه جدیدی جابجا می شوید، بازیابی می شوند.

{
  ...
  "related_applications:" [
     {
       "platform": "play",
       "url": "https://play.google.com/..."
     }
  ],
  "prefer_related_applications": true
}

بنرهای اپلیکیشن هوشمند اپل

سافاری عضو related_applications را پشتیبانی نمی کند، اما بنرهای برنامه هوشمند را برای برنامه های موجود در فروشگاه App ارائه می دهد. بنابراین اگر می‌خواهید یک PWA یا برنامه دیگری را که در اپ استور منتشر کرده‌اید تبلیغ کنید، می‌توانید متا تگ‌ها را در HTML PWA خود اضافه کنید تا کاربر را به نصب برنامه دعوت کنید (به لینک ارائه شده مراجعه کنید)، یا در صورت وجود، ناوبری را منتقل کنید. قبلا نصب شده است

متد getInstalledRelatedApps() به وب سایت شما اجازه می دهد بررسی کند که آیا برنامه iOS/Android/Desktop یا PWA شما روی دستگاه کاربر نصب شده است یا خیر.

بررسی اینکه آیا یک برنامه مرتبط قبلاً نصب شده است به شما کمک می کند تا به جای رفتن به یک وب سایت عمومی، ویژگی هایی مانند پنهان کردن درخواست های نصب شده سفارشی یا هدایت مستقیم کاربر به برنامه نصب شده را اجرا کنید. برای استفاده از متد getInstalledRelatedApps() ، هم برنامه نصب شده و هم وب سایت باید ارتباط خود را با یکدیگر پیکربندی کنند. هر برنامه، بسته به پلتفرم خود، شامل ابرداده برای تشخیص وب‌سایت است و وب‌سایت شامل برنامه نصب‌شده مورد انتظار در قسمت related_applications در مانیفست است.

ابزارهایی مانند BubbleWrap یا PWA Builder که به شما امکان می‌دهد PWA خود را در فروشگاه‌های برنامه منتشر کنید، قبلاً ابرداده‌های مورد نیاز را اضافه می‌کنند تا وب‌سایت شما بتواند فوراً از getInstalledRelatedApps() استفاده کند. برای تشخیص اینکه آیا یک PWA قبلاً با استفاده از getInstalledRelatedApps() نصب شده است یا خیر، webapp در قسمت manifest related_applications با URL مانیفست خود تعریف کنید:

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

getInstalledRelatedApps() آرایه ای از اشیاء برنامه را برمی گرداند. اگر آرایه خالی باشد، برنامه مربوطه نصب نمی شود.

const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;

تشخیص نصب از خارج از محدوده PWA

از Chrome در Android 89، می‌توانید تشخیص دهید که PWA نصب شده است، حتی از خارج از محدوده PWA. PWA شما باید یک فایل JSON را در پوشه /.well-known/ تنظیم کند و به حوزه دیگر اجازه دهد، همانطور که در این مقاله توضیح داده شده است.

منابع