Problem with service worker JavaScript on mobile browsers

Question

This is driving me crazy. I have been trying to implement push notifications for a website and I found a solution (Javacript API notification). The thing is: notifications are not working on mobile devices.

I read about service workers and I have been using this code to ask user for permission and everything, but it is still not working. I am not sure if I am doing something wrong or what. I read about it has to be an https site, but that's does not seem to be the problem. I have also tried the push.js plugin plugin.js, but no succeed so far (even when the demo of that plugin that it's in their website is working on my mobile browser) This is the website >>> https://park-inside.nl/test/

The "Set notification" button is meant to show a notification when the waiting time is below the selected time. So, to test this, just click "Set notification", then select minutes greater than the "Wachttijd" column and refresh page. The notification should appear. It works on desktop browser, but not on mobile. Any idea or suggestion? I would love and appreciate any help.

Note: I am using Chrome 94 on Android 9 (go)

Code that ask for user permission:

Notification.requestPermission(function(result) {
    if (result === 'granted') {
        navigator.serviceWorker.ready.then(function(registration) {
            registration.showNotification('Notification with ServiceWorker');
        });
    }
});

swift-lynx · Answer 1 · 2021-11-13T16:52:33.483

0

See the browser support table for Web Notifications: https://caniuse.com/notifications.

They only work in Chrome on Android, not in the stock Android Browser.

Also, be sure to register a service worker, even if it's an empty one, as seen here: https://stackoverflow.com/a/31787926/10551293.

A demo of the notifications is available here: https://serviceworke.rs/push-payload_demo.html.

Google also has a step-by-step codelab available here: https://developers.google.com/codelabs/pwa-training/pwa03--going-offline#0

edited Nov 13 '21 at 16:52

answered Nov 13 '21 at 15:12

swift-lynx

3,219
3
26
45

I am using Chrome on Android. Not stock browser. – humanityfirst Nov 13 '21 at 15:15
What version of Chrome are you using? – swift-lynx Nov 13 '21 at 15:17
I am using version 94 on Android. – humanityfirst Nov 13 '21 at 15:22
Have you saved the app as a PWA? In Android Chrome, there should be an option to save the page to the home screen. I think this is needed for the notifications to work. – swift-lynx Nov 13 '21 at 15:25
Is it working for you? I have just tried and nothing it's happening. Do you mean PWA as to add the page with the "Add to home screen" setting? – humanityfirst Nov 13 '21 at 15:35
I have no project ready to try it out at the moment. Maybe one of these articles can help you: , – swift-lynx Nov 13 '21 at 15:41
Ok, let me take a look at this. Thank you. – humanityfirst Nov 13 '21 at 15:49
I just found a demo, maybe you can try that out on Android Chrome and see if it works: https://serviceworke.rs/push-payload_demo.html – swift-lynx Nov 13 '21 at 15:51
I found a solution with the links you provided me. Thank you very much, friend. – humanityfirst Nov 13 '21 at 16:43
Glad I could help. What exactly was the problem? Could be helpful for others facing the same issue. Consider [answering your own question](https://stackoverflow.com/help/self-answer) with the details. – swift-lynx Nov 13 '21 at 16:47
Done, I hope it's a little bit clearer now. Thank you again. – humanityfirst Nov 13 '21 at 17:03

score 0 · Answer 2 · edited Nov 16 '21 at 08:14

Apparently, I had to first do this to register a service worker:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js');
}

I am not really sure, but I was trying to use a route for the sw.js file, like this: js/sw.js. Once I placed that file in the root of the project, it worked.

Also, I added this code to that file to log some events to the console:

self.addEventListener('install', (event) => {
    console.log('Installed');
});

self.addEventListener('activate', (event) => {
    console.log('Activated');
});

self.addEventListener('fetch', (event) => {
    console.log('Fetch request');
});

Thanks to swift-lynx for the links to some documentation, where I found a solution:

https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications

Problem with service worker JavaScript on mobile browsers

2 Answers2