search

pwa-builder / PWABuilder

The simplest way to create progressive web apps across platforms and devices. Start here. This repo is home to several projects in the PWABuilder family of tools.
https://docs.pwabuilder.com
Other
2.69k stars 282 forks source link

[BUG] Web push opens the samsung internet browser instead the twa app #4777

Closed galharth closed 1 month ago

galharth commented 1 month ago

What happened?

When I click on a web push notification on an android phone it opens the Samsung internet browser instead of the installed twa app.

Screenshot_20240722_152529_One UI Home

How do we reproduce the behavior?

  1. Install TWA app on android with samsung internet default browser
  2. Send a web push from the TWA app
  3. Click on the web push

This is my service-worker.js code:

self.addEventListener('push', (event) => {
    var message = event.data.json();
    event.waitUntil(
        self.registration.showNotification(
            message.title, {
                icon: message.icon,
                body: message.body,
            }
        )
    );
});

self.addEventListener('notificationclick', (event) => {
    event.notification.close();
    const isDevEnvironment = location.hostname === 'localhost';
    var dataUrl;
    if (isDevEnvironment) {
        dataUrl = 'http://localhost:3000';
    } else {
        dataUrl = 'https://flowmd.ngrok.dev/';
    }

    clients.openWindow(dataUrl);
});

I tried also this code for notificationclick event (but client.focus does nothing):

self.addEventListener('notificationclick', function(event) {
    event.notification.close();
    console.log("hello");
    event.waitUntil(
        clients.matchAll({ type: 'window', includeUncontrolled: true }).then(function(clientList) {
            for (var i = 0; i < clientList.length; i++) {
                var client = clientList[i];
                if (client.url === 'https://flowmd.ngrok.dev/' && 'focus' in client) {
                    return client.focus();
                }
            }

            if (clients.openWindow) {
                return clients.openWindow('https://flowmd.ngrok.dev/');
            }
        })
    );
});

What do you expect to happen?

I expect the web push to open the TWA and not the Samsung internet browser.

What environment were you using?

I use Galaxy S10, android 12

Additional context

No response

jgw96 commented 1 month ago

Hey!

So couple of questions:

galharth commented 1 month ago

Hi @jgw96

  1. I subscribed to web push notifications from the PWA in-browser (before using PWABuilder, the web push notifications worked on the browser; if I clicked "Add to home page" from Chrome, it also opened the Chrome created PWA when clicking on the web push)
  2. Samsung Internet is the default browser for my Android phone. It seems like the TWA uses it as its web view infrastructure. If possible, I would prefer to use Chrome for the TWA web view infrastructure.
  3. I did not change this; it was set to enable.

Thanks :)

jgw96 commented 1 month ago

Thanks! So TWAs work a little different compared to PWAs installed from the browser. The reason the app is opening in-browser when you click on those notifications is because you subscribed to them in-browser. For the TWA, you would need to subscribe to the notifications in the installed app. On number 2, I found this discussion which might be valuable https://stackoverflow.com/questions/55531080/pwa-with-twa-how-to-force-chrome-instead-of-default-browser#:~:text=Look%20for%20browsers%20that%20support%20TWAs%2C%20if%20you,there%20are%20tradeoffs%20on%20the%20supported%20feature%20set. . No problem at all!

galharth commented 1 month ago

@jgw96 Just to be clear, I subscribed to the notifications inside the TWA (the installed app; I thought you meant TWA when you said PWA). The push notifications code is in Javascript (I have used Notification.requestPermission() like in your guide), not Kotlin/Java. Do I have to implement native push notifications with Java/Kotlin code, or is it supposed to work with Notification.requestPermission() inside the TWA?

jgw96 commented 1 month ago

Oh this is my bad, I misunderstood your reply. No you do not need to write any native code, this should just work. I am pretty busy this morning but I will try to reproduce this afternoon and get back to you. Thanks!

maiconcarraro commented 1 month ago

I can share some additional information related to Samsung internet browser, most of users from my app are from Brazil which is very common to have samsung device (cheap/good cost benefit), and yes, since Samsung internet is the default browser for their devices it leads to a lot of different issues from their "TWA capabilities", few examples:

I'm still not testing notifications in production (currently wip), so unfortunately I can't share information related to this... but it should be no surprise this kind of behavior.

At same point I did change android-browser-helper dependency to force Chrome as TWA browser for the app instead of the default (that is the recommendation from Andre), you can see my commit here: https://github.com/GoogleChrome/android-browser-helper/commit/4dc656f8c27127252963d67df1f7d21b5a4d377d . Changing the TWA browser picker does work, but if you have 3rd party login/oauth as I have, it breaks the user experience, because once they click to log in, it's going to open default browser which is Samsung and break the redirect w/ Chrome because of missing cookies and other checks, so I had to revert this change.

@galharth I'd recommend to open an issue on https://forum.developer.samsung.com/ since the notification is showing the browser and not the app at the name spot, Chrome also had this bug and they fixed: https://github.com/GoogleChromeLabs/bubblewrap/issues/647#issuecomment-1486846525

galharth commented 1 month ago

@maiconcarraro @jgw96 The web push notifications open the native app when I force the TWA to use Chrome, but still, if there is no Chrome installed, the TWA opens the Samsung browser, and the web push does not open the native TWA.

maiconcarraro commented 1 month ago

@galharth in this case it's definitely a bug on Samsung internet, you can report here https://forum.developer.samsung.com/c/samsung-internet/25

you mentioned something about the address bar at the top, if you have a signed apk (or directly from google store) + asset-link uploaded you shouldn't see anymore. (Reference for asset-link https://github.com/pwa-builder/CloudAPK/blob/master/Asset-links.md)

jgw96 commented 1 month ago

@maiconcarraro huge thanks, I have nothing more to add here beyond I also tested this morning on my Pixel 8 with Chrome as the default, and it works as expected here, so I agree with @maiconcarraro that this seems like a bug in Samsung Internet. I am going to close this issue for now, thanks again!