On Android chrome browser if I use to open PWA websites like pinterest, tinder, grubhub it use to show Install to home screen and later enable push notification dialogs.
We're in process of changing our website to PWA, is there something changed with chrome on android or android OS policy ?
Not sure if this is the case here, but from Chrome 76 on, they had a change in the beforeinstallprompt.
Starting in Chrome 76 (July 2019), you can prevent the mini-infobar from appearing by calling preventDefault() on the beforeinstallprompt event.
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 76 and later from showing the mini-infobar
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
showInstallPromotion();
});
https://developers.google.com/web/fundamentals/app-install-banners
In my case I had called the preventDefault, since it was a copy from some example. Before the Chrome update it apparently did not have that effect.
Related
I have a PWA that is able to open secondary windows, when I open them using window.open the new windows have the same window style of the main PWA (no Chrome UI, no tabs, no address bar, status bar of the color defined by my app), the new window will also be grouped under the PWA icon in the operative system Dock/taskbar.
The look of the windows is just like the image below:
I also have a Chrome extension that must be able to open such windows, but the problem I'm having is that if I use chrome.windows.create with popup type the resulting windows have the normal Chrome status bar color, and they aren't listed under the PWA icon. Like this:
I'd like to understand if there's any way to open a window from a Chrome extension and have it follow the PWA-defined theme and get listed under the PWA dock/taskbar icon?
To launch an installed PWA use chrome.management API in an extension page or background script:
chrome.management.getAll(apps => {
const pwa = apps.find(a => a.appLaunchUrl === 'https://pwa.foo.bar/');
if (pwa) chrome.management.launchApp(pwa.id);
});
If you want to set the launch type:
chrome.management.getAll(apps => {
for (const a of apps) {
if (a.appLaunchUrl === 'https://pwa.foo.bar/') {
chrome.management.setLaunchType(a.id, 'OPEN_AS_WINDOW', () => {
chrome.management.launchApp(a.id);
});
break;
}
}
});
manifest.json:
{
"permissions": ["management"],
I'm building a chrome extension in ReactJS and I've integrated react-paypal-button-v2 button.
It works well on windows chrome browser but issues in MacOS Catalina, when we close the payment window popup, it also closes the extension popup. hence we can't detect payment callback functions like onSuccess() to determine success or failure.
I'm building a Chrome Extension that works perfectly after I upload it to Chrome using the 'Load unpacked' button.
However, when I quit and reopen Chrome, the extension does not interact with the webpages at all. If I reload the extension, (or sometimes just click the extension icon) it immediately works again.
My code uses content scripts and a background.js script. After I've restarted Chrome, anything inside
chrome.runtime.onInstalled.addListener(function () {
});
does not run.
Why does my extension stop working when I restart Chrome?
I'm trying to do some simple debugging on a Chrome extension. When I try to catch an event ID and show it in an alert, Chrome immediately closes the alert and the default popup window making it impossible to tell what was in the alert. For instance:
$("a[data-toggle='pill']").on('shown.bs.tab', function (e) {
alert(e.target.id);
});
To instead log this to the console, I could do:
$("a[data-toggle='pill']").on('shown.bs.tab', function (e) {
console.log(e.target.id);
});
However, if I inadvertently close the popup or have to reload the extension, then the console window I opened using "inspect popup" on the popup will also be closed. This makes for a very tedious debug process.
What is a better approach to debugging and test Chrome extensions for the default_popup?
You can debug your chrome extensions like this
go to this link
chrome://inspect/#extensions
you can see your installed extensions and you can inspect them
:)
grab the link to the extension and change url to popup window url
in my ex: I changed background.html --> popup.html
When attempting to use Chrome in application mode as a host for an HTML5 application, there seem to be some severe limitations.
For example, if the user hits CTRL+T it will open up a new Chrome browser window, and allow them to start typing in the address bar. Ditto for CTRL+W. This is disconcerting, as it directly contradicts the intention of application mode; to make a web page feel like a normal application (that's not in Chrome).
Is there some mechanism through which one may disable this functionality?
Alternatively, are there forks of the Chrome project which are better suited to wrapping-up HTML5 applications?
Chrome Kiosk mode seems a little more appropriate but still suffers the issue of allowing new tabs (although possibly handles them a little better than app mode).
Enable kiosk mode in a shortcut with shortcut format
"...\chrome.exe" --kiosk
Otherwise it may just be a case of manually disabling certain Ctrl + key events.
Eg disabling the save event Ctrl+S (in jQuery without hotkeys - I'm sure there are other methods for whatever your preferred JS lib is)
$(document).bind('keydown', function(e) {
if(e.ctrlKey && (e.which == 83)) {
e.preventDefault();
return false;
}
});