OneSignal网页推送通知移动Chrome端失效，PC端正常技术求助

Hey there, let's figure out why your OneSignal web push notifications are working on desktop but failing on mobile Chrome. I’ve tackled similar issues before, so here’s a breakdown of the most likely fixes and checks:

1. Fix Permission Prompt Triggering #

Mobile Chrome has way stricter rules around notification permissions than desktop. Even with autoRegister: false, you can’t just request permissions out of the blue—you need to tie the permission prompt to a user interaction (like tapping a "Enable Notifications" button).

Your current code doesn’t include a trigger for the permission request. Add a button to your page and hook it up like this:

<button id="enablePush">Enable Notifications</button>

<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(function() {
  OneSignal.init({
    appId: "xxxxxxxxxx",
    autoRegister: false,
    notifyButton: {
      enable: false,
    },
  });

  // Trigger prompt on button click
  document.getElementById('enablePush').addEventListener('click', function() {
    OneSignal.showNativePrompt();
  });

  // Keep your subscription change listener here
  OneSignal.on('subscriptionChange', function(isSubscribed) {
    // Your subscription logic goes here
    console.log("User subscription status:", isSubscribed);
  });
});
</script>

2. Verify HTTPS (Critical for Mobile) #

Mobile Chrome requires your site to be served over HTTPS (localhost is the only exception for testing). If your production site uses HTTP, push notifications will fail outright on mobile. Double-check your site’s URL protocol.

3. Clean Up Duplicate Initialization Code #

Your original code has two separate var OneSignal = window.OneSignal || []; declarations. While desktop might ignore this, mobile browsers can be more strict about variable scoping. Combine everything into a single initialization block like the example above to avoid conflicts.

4. Check Service Worker Placement #

OneSignal relies on a service worker to handle push notifications. Make sure:

• The OneSignalSDKWorker.js file is in your site’s root directory (not a subfolder). Mobile Chrome enforces strict rules about service worker scope, so placing it anywhere else will break functionality.
• You haven’t modified the default service worker file provided by OneSignal—custom changes can break push handling.

5. Debug with Mobile Chrome DevTools #

To see exactly what’s failing, use remote debugging:

1. Connect your mobile device to your computer via USB
2. Open Chrome DevTools on desktop, go to the Devices tab, and select your mobile device
3. Check the Console for errors related to OneSignal or push notifications, and the Application > Service Workers tab to confirm the worker is registered correctly

6. Validate OneSignal Dashboard Settings #

• Make sure your site’s full URL is correctly added under Settings > Platforms > Web > Site URL in the OneSignal dashboard
• Confirm the "Mobile Web" platform is enabled for your app

If you try these steps and still hit issues, share the error messages from the mobile Chrome console and any extra details about your site’s setup—I can help narrow it down further!

内容的提问来源于stack exchange，提问作者Mikail G.