如何用JavaScript检测Android设备级通知开关（PWA应用）

Alright, let's cut to the chase—detecting device-level notification status on Android for PWAs is way trickier than just checking browser permissions, but it's absolutely necessary if you want to avoid silent failures when users have system notifications turned off. Here's a practical, PWA-compliant approach to handle this:

Step 1: Ensure Your PWA is Installed First #

Device-level notification controls only apply to installed PWAs (Android treats them as first-class native apps). You can verify installation with this quick check:

function isPWAInstalled() {
  return window.matchMedia('(display-mode: standalone)').matches || 
         window.navigator.standalone || 
         document.referrer.includes('android-app://');
}

If it's not installed, prompt users to add it to their home screen first—this is a non-negotiable prerequisite for accessing system-level notification settings.

Step 2: Start with Browser-Level Permission Check #

Begin with the standard notification permission flow, since this is the first barrier:

async function checkBrowserNotificationPermission() {
  const permissionStatus = await navigator.permissions.query({ name: 'notifications' });
  return permissionStatus.state; // Returns 'granted', 'denied', or 'prompt'
}

If the status is denied, prompt users to enable notifications via their browser settings. But if it's granted, we need to dig deeper to check system-level blocks.

Step 3: Detect Device-Level Notification Block (Android-Specific) #

On Android, if notifications are disabled at the system level for your installed PWA, even with browser permissions granted, attempts to create a notification will fail. We can leverage this behavior to detect the block:

async function checkDeviceLevelNotifications() {
  // First confirm browser permission is granted
  const browserPermission = await checkBrowserNotificationPermission();
  if (browserPermission !== 'granted') {
    return { status: 'browser-denied' };
  }

  // Try creating a silent, non-intrusive test notification
  try {
    const testNotification = new Notification('', {
      silent: true,
      body: '',
      icon: '/your-pwa-icon.png' // Use a valid icon from your PWA's assets
    });
    // Clean up immediately so users don't see it
    testNotification.close();
    return { status: 'enabled' };
  } catch (error) {
    // If creation fails, system-level notifications are almost certainly blocked
    return { status: 'device-denied' };
  }
}

Key Details: #

• The silent: true flag ensures the test notification doesn't disturb users.
• Android requires a valid icon for all notifications—even silent ones—so don't skip this.
• This method relies on Android's core notification behavior, which is consistent across most modern Android versions and Chromium-based browsers (Chrome, Edge, etc.).

Step 4: Prompt Users to Enable System Notifications #

When you detect a device-denied status, show a clear, user-friendly prompt guiding them to enable notifications in Android settings. You can't open settings directly, but you can provide precise instructions:

async function handleNotificationCheck() {
  const result = await checkDeviceLevelNotifications();
  if (result.status === 'device-denied') {
    confirm('Notifications are disabled at the system level. To receive updates, go to Android Settings > Apps > [Your PWA Name] > Notifications and turn them on.');
  } else if (result.status === 'browser-denied') {
    Notification.requestPermission().then(permission => {
      if (permission === 'granted') {
        // Retry the device-level check after browser permission is enabled
        handleNotificationCheck();
      }
    });
  }
}

Important Caveats #

• Test this on actual Android devices—emulators don't always replicate system-level notification blocks accurately.
• Make sure your PWA's manifest includes name, short_name, valid icons, and display: standalone to ensure it's recognized as a proper installed app.
• This approach is indirect, but it's the most reliable method currently available for PWAs (there's no official Web API to directly query system-level notification status).

内容的提问来源于stack exchange，提问作者Prabhat