PWA : Does beforeinstallprompt event trigger in incognito mode? - google-chrome

Working on Chrome Version 94.0.4606.71. beforeinstallprompt event does not trigger correctly when I'm using Incognito mode.
I couldn't find any official documentation about this topic.
I saw the criterias on the Google doc, which are :
The web app nor the native app are already installed.
Meets a user engagement heuristic (currently, the user has interacted with the domain for at least 30 seconds)
Includes a Web App Manifest that includes:
short_name,
name (used in the banner prompt),
icons including a 192px and a 512px version,
prefer_related_applications is true,
related_applications object with information about the app,
Served over HTTPS
Working well in normal tab, never triggering in Incognito. Did I miss something ?

Related

Blazor WASM PWA: Google Chrome does not show Push Notifications

I've just tested Blazor example Blazing Pizza that uses push notifications as a PWA feature on Blazor. I changed public/private keys with my own generated ones and ran the project with MS Edge browser and push notifications worked as desired. But when I open it with Google Chrome, it doesn't shows any notification! (I allowed to show notifications).
I traced service-worker.js and found that notification hits the breakpoint, it means notification receives by browser but not showing:
I checked my Chrome's settings but not found anything to change.
I've found my mistake: I had blocked Google Chrome notifications in my Windows 10 notification settings!

Facebook mbasic site, mobile safari, home screen shortcuts and local storage

I have a question about the mbasic.facebook.com page and how they manage to do what they do on iPhone with iOS 12.3.1. This is not about the facebook app. I don't have it installed at all.
I went to mbasic.facebook.com in mobile safari on iOS and created a shortcut for it on my homescreen. When I use the shortcut, the page behaves like what Apple calls a web application, i.e. it does not have the usual mobile safari UI.
Here's the weird part:
After using the shortcut and logging in, I switch to the settings app and under "Safari", I delete the browser history and website data.
I then use the shortcut again to launch the mbasic facebook site.
I am greeted with a screen where I still appear to be logged in. If i interact with the page it will make me login again, however.
This makes me wonder about two things:
How does the web application maintain its state (i.e. still know who am i) despite me trying to delete the Safari data?
How do I delete the data in a way that also affects a "web app" launched via a home screen shortcut?
I am not sure exactly. But I think it was done by PWA(Progressive Web App) technology. It helps you to use a website as an app that are installed from app store. And it also has the ability of state maintaining, giving push notification, maintain own storage in your device. When you installed it, all your login information was saved in your device as its own storage and this storage has no relation with your web browser. That;s why when you delete data from Safari, it made no effects on the installed one. And when you installed it, it installed its own manifest file in your device. That's why it runs on your device with it's own UI not with the safari UI. You can delete its data by deleting its storage folder that is created at the time of installation. I am not sure where you got the file in your device. Make a research on it. Here are some useful link about PWA. MDN web docs - PWA 4 important points to know about Progressive Web Apps (PWA) PWA Tutorial Hope it will help you. You are requested to share any new thing that should be known as I am new in this technology.

Progressive Web App (PWA) in standalone mode OAuth error

After I saved my PWA (Test App) built using Create React App to homescreen and launched the app in standalone mode on android using chrome and iOS using safari. Then in the app I initiate Firebase method signInWithPopup(GoogleProvider) the device asks me if I want to open the action with Test App or other browsers installed on device i.e chrome, firefox. If I select to open with my Test App the popup opens and I select the correct Google account.
Error: After the google account selection the popup closes without ever redirecting back to my Test App.
If I instead to open the Firebase method signInWithPopup(GoogleProvider) with chrome browser and not my Test App the popup opens for google account selection and after I select the google account the popup closes and redirects back to the Test App momentarily and then
Error: directs back to chrome tab where is asks for google account to select while showing a loading indicator, and just hangs there.
There are no console error or warnings that come up .
Note 1: The error of popup not closing and staying in loading also occurs if I add the App to homescreen on a Windows 10 x64 machine using Version 64.0.3259.0 (Official Build) canary (64-bit) and launch as a standalone window.
Note 2: The error also occurs for signInWithPopup(Facebookprovider) and signInWithPopup(Twitterprovider) Also If I uninstall app from Homescreen and launch purely in browser the signing in OAuth flow works fine.
Note 3: After further troubleshooting it seems the error more specifically occurs when user input is required in the OAuth popup.
i.e If for example if user has previously given the Test App permissions through Facebook, the flow works fine and the popup closes. Also if only a single google account is detected and it has previously given app OAuth permissions then the popup works as it should. But If multiple google accounts exists on device then the user has to input a selection of which account to sign in through --> this leads to the previously mentioned error again. And using Twitter OAuth the error occurs every-time because twitter popup requires user to select Authorize App every-time.
UPDATE: I believe this may have something to do with google chrome recent changes to OAuth from Webview.
GIf of the error on windows machine: notice the popup for twitter auth never closes, even after authorizing the app, same thing occurs for google and facebook OAuth.
Reading Google documentation:
https://firebase.google.com/docs/auth/web/google-signin
Authenticate with Firebase using the Google provider object. You can prompt your users to sign in with their Google Accounts either by opening a pop-up window or by redirecting to the sign-in page. The redirect method is preferred on mobile devices.
So you have 2 options:
firebase.auth().signInWithPopup(provider)
firebase.auth().signInWithRedirect(provider)
The second must be used when you are into a mobile device.
So the question is: How I detect when I running into a mobile device ?
Code must be something like:
if ( isInMobileDevice) {
firebase.auth().getRedirectResult().then(function(result) { .... }
}
else {
firebase.auth().signInWithPopup(provider).then(function(result) { .... }
}
Sorry, Im still searching the way to get the correct value (true/false) into "isInMobileDevice"
you can stablish in the manifest of the app "display:standalone" then detect the launch mode like this
function isRunningStandalone() {
return (window.matchMedia('(display-mode: standalone)').matches);
}
...
if (isRunningStandalone()) {
/* This code will be executed if app is running standalone */
}
Good news, fixed in Chrome Canary
https://bugs.chromium.org/p/chromium/issues/detail?id=771418#c84

Chrome custom tabs cookies, storage APIs and service worker

I tried to lookup many answers from stackoverflow but couldnt find anything specific to this, I am implementing payment app and I want to display custom-tab in my app to record user visit by storing user-id, either by setting a cookie or using localstorage or by installing a service worker for the domain that custom tabs opens.
Can a https page loaded in custom-tab write cookies that are also
available when visiting the same page from Chrome?
Is localstorage API available for my domain in custom-tab? if yes,
is stored value available from Chrome?
Is installing service worker allowed from Custom-tab? So I have
access to S/W from Chrome browser?
If none of this possible, how could I record the visit from custom-tab and have it available in Chrome when user opens the domain from chrome browser?
Thanks in advance
Chrome Custom Tabs uses the same Cookie jar as Chrome. So, if a Cookie is created when a user accesses the page from a Custom Tab and Chrome is the Custom Tabs provider, it is also available when the user goes to the same domain from Chrome (outside Custom Tabs).
Same as above.
Yes, it is possible to install a service-worker from a Chrome Custom Tab.
You can check all the above by opening the URL that adds the cookie, install the service-worker or writes to the local store inside a Custom Tab, setup the device for debugging, connecting it to your computer and navigating to chrome://inspect/#devices in Chrome. Then choose the device and inspect the cookies, local storage, service-workers, etc.

Is there a way to display desktop notifications even when Chrome or Firefox is closed?

We're developing a website which sends push notifications to end users using GCM. We've gone through Service Worker and all. We have developed a prototype using this codelab tutorial. It is working so far, but the only issue is the notifications are displayed only when Chrome is opened. When Chrome is closed, the notifications don't reach the users.
I want to know is there any way we can overcome this and display the notifications even when the browser is closed, similar to Safari Push Notification. Thanks in advance!
If you have a "background" permission in manifest.json, your background page will be able to show notifications even when Chrome window is closed.
"permissions": [
"background"
],
As stated in the documentation:
When any installed hosted app, packaged app, or extension has "background" permission, Chrome runs (invisibly) as soon as the user logs into their computer—before the user launches Chrome. The "background" permission also makes Chrome continue running (even after its last window is closed) until the user explicitly quits Chrome.
You need to use the "background" permission with a background page, event page or a background window for hosted apps.
For web, use Push API for Chrome and other browsers. The advantage of using push messages is that even if your page is closed, your service worker will be woken up and be able to show a notification. Web Sockets and EventSource have their connection closed when the page or browser is closed so it's not recommended. Here is the documentation and example.
In Chrome. Only those users that happen to have an extension installed that requires background mode, like hangouts, will be able to receive push notifications when chrome is not "running". It does not seem like a good idea to rely on it.
The chrome team seems to be considering it for web push too but so far there is no ETA.
https://code.google.com/p/chromium/issues/detail?id=402456
Showing notification when the browser or tab is closed requires the service worker and a third party service (like google firebase)to trigger the service worker.
https://github.com/web-push-libs/ - Check these list of libraries to implement this in different platforms.
https://github.com/rijoshrc/php-service-worker-push-notification - Clone this git repository to see the simple implementation in PHP.