[Question]: Push notification permission state resets after PWA application is closed. Is it normal ?

[Ratatinator97]

How can we help?

Hello,
I want to use push notifications for my iOS PWAs and iPadOS PWAs.
I use iOS 17.2.1 and iPadOS 17.2 on an iPhone 13 Pro Max and iPad Pro 11".
I don't know if it is a bug that $OneSignal.Notifications.permission and $OneSignal.User.PushSubscription.optedIn reset after the application is closed. The issue does not appear in macOS 14.2.1 in Safari or PWA with Chrome.
I have been using this code with a different service worker scope: /push/onesignal/.
I am able to receive push notifications even when the $OneSignal.Notifications.permission and $OneSignal.User.PushSubscription.optedIn appear as false on both iOS and iPadOS.
Is it normal ?

[jkasten2]

@Ratatinator97 How are you reopening the PWA after closing it?
If you are tapping on a OneSignal push notification this may cause this issue. This is due to Safari returning "default" from the JS API Notification.permission when its should not outlined here:
https://developer.apple.com/forums/thread/742877

If this lines up with what you are seeing then you can use the following workaround:
Use "Origin Navigate " and "Origin Focus" in the OneSignal setting as noted here:
https://documentation.onesignal.com/docs/web-push-options#click-behavior

[Ratatinator97]

@Ratatinator97 How are you reopening the PWA after closing it?

By just clicking on the application in the Home Screen. I have deactivated the "notification enabled popup". The issue still persists. Thank you a lot for your reply, I will check the apple dev forum closely.

[simkuns]

@Ratatinator97 Maybe this helps.

I noticed a bug in my example code.

If https://onesignal.com/api/v1/sync/**/web?callback=__jp0 responded after the OneSignalSubscribeButton.vue chunk has been loaded, then state did not update correctly. This happens only if OneSignalSubscribeButton.vue mounted before OneSignal finished initializing.

I slightly modified the code, so that bell state is updated after OneSignal has been initialized. (@onesignal/onesignal-vue3 does not export their interfaces, so I had to use as keyword).

// plugins/onesignal.client
// ...
  const OneSignal = useOneSignal() as ReturnType<typeof useOneSignal> & { initialized: Promise<boolean> };

  OneSignal.initialized = new Promise((resolve) => {
    OneSignal.init({
      appId,
      allowLocalhostAsSecureOrigin: process.env.APP_ENV !== 'production',
    }).then(() => resolve(true)).catch(() => resolve(false));
  });
// ...

<!-- components/OneSignalSubscribeButton.vue -->
<!-- ... -->
onBeforeMount(() => {
  $OneSignal.initialized.then(updateBellState);

  $OneSignal.Notifications.addEventListener('permissionChange', onPermissionChange);
  $OneSignal.User.PushSubscription.addEventListener('change', onSubscriptionChange);
});
<!-- ... -->

[Ratatinator97]

Thank you for your code snippets, but it didn't fix my issue with iOS... I'm waiting for iOS 17.4 to be released and test it.