می توانید تشخیص دهید که کاربر از 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 شما در مرورگر و در فرم مستقل نصب شده استفاده کنند. در مرورگرهای دسکتاپ، همانطور که در تصویر زیر مشاهده می شود، می توانید با استفاده از نشان ها یا آیتم های منو، پیمایش فعلی را بین این زمینه ها انتقال دهید.
در اندروید، یک آیتم منو شبیه به منوی دسکتاپ از مرورگر وجود دارد که ناوبری را به برنامه منتقل می کند. در این حالت، URL فعلی باز می شود اما یک پیمایش صفحه جدید در برنامه خواهد بود.
در تصویر زیر می توانید آیتم منو در اندروید را زمانی که برنامه از قبل نصب شده است مشاهده کنید.
انتقال پس از نصب
از مرورگرهای دسکتاپ، ناوبری فعلی بلافاصله پس از نصب به برنامه منتقل می شود. برگه مرورگر بسته میشود و برنامه تازه نصبشده باز میشود و به کاری که کاربر انجام میداد ادامه میدهد.
در مرورگرهای تلفن همراه، هنگام نصب برنامه، پیمایش فعلی شما در مرورگر باقی می ماند. اگر کاربران بخواهند به برنامه منتقل شوند، باید برنامه را به صورت دستی باز کنند و این یک ناوبری جدید خواهد بود.
تشخیص انتقال
برای تشخیص انتقال بین مرورگر و پنجره، میتوانید از یک درخواست رسانه استفاده کنید:
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/
تنظیم کند و به حوزه دیگر اجازه دهد، همانطور که در این مقاله توضیح داده شده است.