Skip to content
This repository has been archived by the owner on Jul 8, 2024. It is now read-only.

Dosent Work with Chrome on Android #118

Open
mschweiger90 opened this issue Aug 30, 2017 · 8 comments
Open

Dosent Work with Chrome on Android #118

mschweiger90 opened this issue Aug 30, 2017 · 8 comments

Comments

@mschweiger90
Copy link

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
Copy link
Author

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

@danieluyo
Copy link

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
Copy link

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

Thanks you

@mschweiger90
Copy link
Author

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

@Eric55on
Copy link

Eric55on commented Sep 18, 2018

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
Copy link
Author

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
Copy link

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
Copy link
Collaborator

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

@theLufenk theLufenk reopened this Sep 3, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants