This is the standard smart banner use case. You have a native iOS and Android app, and your website is a traditional web experience. The smart banner promotes the native app:<\/p>\n\n\n\n No PWA complications. The banner always promotes the native app.<\/p>\n\n\n\n If you only have a PWA and no native app, the smart banner promotes the PWA install ("Add to Home Screen"):<\/p>\n\n\n\n Browsers provide a built-in install prompt for PWAs via the beforeinstallprompt<\/a> event. You can trigger this from your smart banner:<\/p>\n\n\n\n This is the complex case. You ship both a PWA and a native app. The banner needs to decide which to promote.<\/p>\n\n\n\n Promote the native app when:<\/p>\n\n\n\n Promote the PWA when:<\/p>\n\n\n\n In some cases, offer both:<\/p>\n\n\n\n This is less common because it creates decision paralysis. Usually, pick one and promote it.<\/p>\n\n\n\n There is no reliable cross-platform way to detect if a native app is installed from the web. Approaches include:<\/p>\n\n\n\n Custom scheme detection (limited):<\/strong><\/p>\n\n\n\n Cookie-based detection:<\/strong>\nIf the native app sets a cookie via a shared web view or SDK, the web page can check for it:<\/p>\n\n\n\n Tolinku detection:<\/strong>\nTolinku's SDK<\/a> provides app detection through the redirect chain. If the app is installed and handles the link, the user never reaches the web fallback.<\/p>\n\n\n\n If your native app is a Trusted Web Activity wrapping the PWA:<\/p>\n\n\n\n Do not show any install banner inside a TWA. The user is already in the app.<\/p>\n\n\n\n If your PWA has a service worker that caches pages, ensure the smart banner configuration is not cached aggressively:<\/p>\n\n\n\n If the banner config is cached, schedule changes and A\/B tests will not take effect until the cache expires.<\/p>\n\n\n\n Tolinku's smart banners<\/a> support both native app and PWA promotion. The SDK detects the user's context (platform, installed apps, display mode) and shows the appropriate banner. Configure native app and PWA targets in the Tolinku dashboard<\/a>.<\/p>\n\n\n\n For the interaction between PWAs and App Links on Android, see App Links for PWAs<\/a>. For the complete smart banners guide, see the smart banners overview<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Use smart banners with Progressive Web Apps. Handle the PWA vs. native app decision, promote the right install path, and manage the overlap between web app install prompts and native app banners.<\/p>\n","protected":false},"author":2,"featured_media":1379,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Smart Banners for Progressive Web Apps","rank_math_description":"Use smart banners with Progressive Web Apps. Handle PWA vs native app decisions and promote the right install path.","rank_math_focus_keyword":"smart banners PWA","rank_math_canonical_url":"","rank_math_facebook_title":"","rank_math_facebook_description":"","rank_math_facebook_image":"https:\/\/tolinku.com\/blog\/wp-content\/uploads\/2026\/03\/og-smart-banners-for-pwas.png","rank_math_facebook_image_id":"","rank_math_twitter_title":"","rank_math_twitter_description":"","rank_math_twitter_image":"https:\/\/tolinku.com\/blog\/wp-content\/uploads\/2026\/03\/og-smart-banners-for-pwas.png","footnotes":""},"categories":[16],"tags":[20,110,69,343,326,40,33,41],"class_list":["post-1380","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing","tag-deep-linking","tag-marketing","tag-mobile-development","tag-progressive-web-apps","tag-pwa","tag-smart-banners","tag-user-experience","tag-web-to-app"],"_links":{"self":[{"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/posts\/1380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/comments?post=1380"}],"version-history":[{"count":3,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/posts\/1380\/revisions"}],"predecessor-version":[{"id":2294,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/posts\/1380\/revisions\/2294"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/media\/1379"}],"wp:attachment":[{"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/media?parent=1380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/categories?post=1380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/tags?post=1380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Tolinku](\"https:\/\/tolinku.com\/blog\/wp-content\/uploads\/2026\/03\/screenshot-banner-form-preview-1772822964529.png\")
\nThe live banner preview showing how the banner appears on a mobile device.<\/em><\/p>\n\n\n\nScenario 1: Native App Only (No PWA)<\/h2>\n\n\n\n
const bannerConfig = {\n ios: { appId: "id123456789", storeUrl: "https:\/\/apps.apple.com\/app\/id123456789" },\n android: { packageName: "com.example.app", storeUrl: "https:\/\/play.google.com\/store\/apps\/details?id=com.example.app" },\n message: "Get the app for a better experience",\n cta: "Install",\n};\n<\/code><\/pre>\n\n\n\nScenario 2: PWA Only (No Native App)<\/h2>\n\n\n\n
Using the Web App Install Prompt<\/h3>\n\n\n\n
let deferredPrompt;\n\nwindow.addEventListener('beforeinstallprompt', (e) => {\n \/\/ Prevent the default browser install prompt\n e.preventDefault();\n deferredPrompt = e;\n\n \/\/ Show your custom smart banner\n showPWAInstallBanner();\n});\n\nfunction showPWAInstallBanner() {\n const banner = createBanner({\n message: "Install our app for offline access",\n cta: "Add to Home Screen",\n onCtaClick: async () => {\n if (deferredPrompt) {\n deferredPrompt.prompt();\n const result = await deferredPrompt.userChoice;\n if (result.outcome === 'accepted') {\n analytics.track('pwa_installed');\n }\n deferredPrompt = null;\n hideBanner();\n }\n },\n });\n document.body.appendChild(banner);\n}\n<\/code><\/pre>\n\n\n\nPWA Banner Considerations<\/h3>\n\n\n\n
\n
beforeinstallprompt<\/code> event fires only when the PWA meets the installability criteria<\/a>. Do not show a PWA install banner if the event has not fired.<\/li>\nfunction isPWAInstalled() {\n return window.matchMedia('(display-mode: standalone)').matches ||\n window.matchMedia('(display-mode: fullscreen)').matches ||\n window.navigator.standalone === true; \/\/ iOS Safari\n}\n<\/code><\/pre>\n\n\n\n\n
beforeinstallprompt<\/code>.<\/strong> On iOS, you cannot trigger the install prompt programmatically. Show instructions instead: "Tap the share button, then 'Add to Home Screen'."<\/li>\n<\/ul>\n\n\n\nScenario 3: Both Native App and PWA<\/h2>\n\n\n\n
Decision Logic<\/h3>\n\n\n\n
function chooseBannerType() {\n const platform = detectPlatform();\n\n \/\/ If the native app is installed, don't show any banner\n if (isNativeAppInstalled()) return null;\n\n \/\/ If the PWA is installed, don't show any banner\n if (isPWAInstalled()) return null;\n\n \/\/ Promote native app on platforms where it's available\n if (platform === 'ios' && hasNativeIOSApp) return 'native';\n if (platform === 'android' && hasNativeAndroidApp) return 'native';\n\n \/\/ On desktop or unsupported platforms, promote PWA\n if (platform === 'desktop' && hasPWA) return 'pwa';\n\n \/\/ Fallback: promote native if available, otherwise PWA\n return hasNativeApp ? 'native' : 'pwa';\n}\n<\/code><\/pre>\n\n\n\nWhen to Promote Native Over PWA<\/h3>\n\n\n\n
\n
When to Promote PWA Over Native<\/h3>\n\n\n\n
\n
Showing Both Options<\/h3>\n\n\n\n
<div class="smart-banner smart-banner--dual">\n <div class="smart-banner__content">\n <img src="\/app-icon.png" class="smart-banner__icon" alt="App" \/>\n <p class="smart-banner__message">Get our app<\/p>\n <\/div>\n <div class="smart-banner__actions">\n <a href="https:\/\/apps.apple.com\/..." class="smart-banner__cta smart-banner__cta--native">\n App Store\n <\/a>\n <button class="smart-banner__cta smart-banner__cta--pwa" onclick="installPWA()">\n Add to Home Screen\n <\/button>\n <\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\nDetecting the User's Context<\/h2>\n\n\n\n
Is the Native App Installed?<\/h3>\n\n\n\n
\/\/ This approach is unreliable and often blocked by browsers\nfunction checkNativeApp(customScheme) {\n const start = Date.now();\n window.location.href = `${customScheme}:\/\/check`;\n setTimeout(() => {\n if (Date.now() - start < 2000) {\n \/\/ App likely not installed (page didn't navigate)\n showBanner();\n }\n }, 1500);\n}\n<\/code><\/pre>\n\n\n\nfunction isNativeAppInstalled() {\n return document.cookie.includes('native_app_installed=true');\n}\n<\/code><\/pre>\n\n\n\nIs the PWA Installed?<\/h3>\n\n\n\n
function isPWAInstalled() {\n \/\/ Check display mode\n if (window.matchMedia('(display-mode: standalone)').matches) return true;\n\n \/\/ iOS Safari standalone mode\n if (window.navigator.standalone === true) return true;\n\n \/\/ Check if the install prompt is available (if not, PWA might already be installed)\n \/\/ Note: this is not conclusive; the prompt may not fire for other reasons\n\n return false;\n}\n<\/code><\/pre>\n\n\n\nIs This Running Inside a TWA?<\/h3>\n\n\n\n
function isRunningInTWA() {\n return document.referrer.includes('android-app:\/\/');\n}\n<\/code><\/pre>\n\n\n\nService Worker Considerations<\/h2>\n\n\n\n
\/\/ Service worker: do not cache banner configuration\nself.addEventListener('fetch', (event) => {\n const url = new URL(event.request.url);\n\n \/\/ Always fetch banner config from network\n if (url.pathname.includes('\/api\/banner') || url.pathname.includes('\/banner-config')) {\n event.respondWith(fetch(event.request));\n return;\n }\n\n \/\/ Cache other resources normally\n event.respondWith(\n caches.match(event.request).then(cached => cached || fetch(event.request))\n );\n});\n<\/code><\/pre>\n\n\n\nTolinku Smart Banners for PWAs<\/h2>\n\n\n\n