Dosent Work with Chrome on Android

[mschweiger90]

On Android it doesnt work with chrome. Firefox works great on Anroid!
Anroid asked me in chrome if i want to allow notifications, but aber submit that, nothing happens.

If have the push.min.js and the serviceWorker.min.js in the same file via gulp.

The "Push.create()" method comes after that in a "$(document).ready(function()" function.
Is there any known solution for that?
Thanks for your help!

[mschweiger90]

Edit: The website runs on http. Does chrome need https on android?

[danieluyo]

You can still use the (old) Notification(title, options) constructor and it’ll work on some (desktop) platforms. But (as I guess you know), it doesn’t work in Chrome for Mobile (Android).

What does work on Chrome for Mobile is the ServiceWorker-based showNotification(title, options) approach. But per the Service Workers spec, you can only use Service Workers in secure contexts (in order to protect users from the risks associated with insecure contexts).

So if you want something that will work for Chrome for Mobile users, then the answer is, No, it’s not possible to use Web Notifications in Chrome for Mobile without Service Workers (and so also, without deploying an SSL certificate for your site).

[ak868308]

I have the same issue which @mschweiger90 explained above while I have https
please help

Thanks you

[mschweiger90]

Thanks @danieluyo
I registered a service worker and not it works!

[Eric55on]

Thanks @danieluyo
I registered a service worker and not it works!

Could you give us documentation or code about how your resolve it?

I have https site and I have my serviceWorker.min.js file on same folder with push.min.js but still not working.

[mschweiger90]

Hi Eric,

you need a sw.js file in your document root / with a fetch event, for example:

self.addEventListener('install', function(event) {

});

self.addEventListener('fetch', function(event) {


});

self.addEventListener('activate', function(event) {

});

Then you have to register the service worker inside your html head, for example:

<script>
        if ('serviceWorker' in navigator) {
            console.log('SERVICE WORKER -> REGISTER -> Try to register the service worker');
            navigator.serviceWorker.register('/sw.js')
                .then(function(reg){
                    console.log('SERVICE WORKER -> REGISTER -> Successfully registered!');
                }).catch(function(err) {
                console.log("'SERVICE WORKER -> REGISTER -> Registration failed! This happened: ", err)
            });
        }

(function() {
            let deferredInstall;
            let promptTriggered = false;
            // The resolve function that will be called when we know we can prompt.
            let canPromptPromiseResolved;
            const canPromptPromise = new Promise(function(resolve, reject) {
                // The resolve will be called later when we know the prompt has been shown.
                // We might want to reject after a timeout of a couple of seconds.
                canPromptPromiseResolved = resolve;
            });

            window.addEventListener('beforeinstallprompt', function(e) {
                promptTriggered = true;

                // Stop it doing what it needs to do;
                e.preventDefault();
                deferredInstall = e;

                // Resolve the promise, to say that we know we can prompt.
                canPromptPromiseResolved();

                return false;
            });

            const install = {};

            Object.defineProperty(install, 'isAvailable', {get: function() {
                    return promptTriggered;
                }});

            install.canPrompt = function() {
                return canPromptPromise;
            };

            install.prompt = function() {
                return new Promise(function(resolve, reject) {
                    if (promptTriggered === false) {
                        // There can be a whole host or reasons, we should determine them
                        reject('User Agent decided not to prompt');
                    }

                    deferredInstall.prompt().then(function() {
                        return deferredInstall.userChoice;
                    }).then(function(choice) {
                        resolve(choice.outcome);
                    }).catch(function(reason) {
                        reject(reason);
                    });
                });
            };

            window.install = install;
        })();
    </script>

Thats it, push.js should now work. Here you can find a full documentation: https://developers.google.com/web/fundamentals/primers/service-workers/

Its also possible to trigger a push without push.js. Its now native supported by chrome with action buttons. You can find code examples in the docu.

Best regards

[Arqamshakeel]

hi @mschweiger90 ,
I am using create-react-app,
I saved the sw.js file (with exact code that you wrote) in my public folder and pasted the <script> tag in index.html's header.
Still no luck, I am not able to get notifications on android.
Please help!

[theLufenk]

@Arqamshakeel Please provide a link that we can see this on. Thanks.