Content bug: PWA Notification guide only works on desktop browsers.

[Simperfy]

What page(s) did you find the problem on?

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push#create_a_notification

Specific page section or heading?

#create_a_notification

What is the problem?

I followed the guide in order to create a simple PWA notification, however it only works on desktop version.

What did you expect to see?

I expect it to work on android.

Did you test this? If so, how?

Tested on Ubuntu 20.04 and Windows 10, works on both as expected.

Tested it on my real device Android 9 with Chrome version (93.0.4577.82).
Tested it on my android emulator running Android 5 with latest chrome version.

Both test on mobile shows no notification.

How I solved it

I manage to solve by changing the code below.

function randomNotification() {
  const randomItem = Math.floor(Math.random() * games.length);
  const notifTitle = games[randomItem].name;
  const notifBody = `Created by ${games[randomItem].author}.`;
  const notifImg = `data/img/${games[randomItem].slug}.jpg`;
  const options = {
    body: notifBody,
    icon: notifImg,
  };
-  new Notification(notifTitle, options);
+ navigator.serviceWorker.getRegistration()
+  .then((reg) => {
+    reg.showNotification(notifTitle, options);
+  });
  setTimeout(randomNotification, 30000);
}

Now it works both on desktop(windows, linux) and mobile(android).

[captainbrosset]

@Simperfy we recently revamped the PWA docs on MDN, to make them more up to date, and more complete.
This specific article, however, did not change as part of this project. It's part of a tutorial which has been here for a few years, but which we didn't touch too much. So, very likely, the error you reported is still here today.

Would you be interested in contributing to MDN and address this issue?
I know it's been 2 years since you reported it. So this is probably a long shot :)

As part of our PWA revamp project, we talked about updating this tutorial at some point. We just didn't get to it. But we might, on the long run. So if you're interested, please do go ahead. But if you aren't, someone else might be able to work on this at some point.

[wbamberg]

@captainbrosset , perhaps we should after all update this tutorial! I'll put it on my list.