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"],
Related
My electron desktop app loads an angular app into a browser window. That angular app has a button that should open a new website (lets say google.com as an example). When I use the following code...
<button (click)="openNew()">Open a new window</button>
openNew() {
window.open('www.google.com')
}
the app opens a new electron browser window. I want the window to open in a native browser window (chrome, firefox, internet explorer, etc). Can this be possible within an electron app?
Based on documentation, you can open links on OS default browser with code below
const { shell } = require('electron')
shell.openExternal('https://github.com')
Read for further information:
https://www.electronjs.org/docs/api/shell#shellopenexternalurl-options
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.
I'm building an Android app that wraps my Progressive Web App as a Trusted Web Activity. (I'm following guidelines from Google's sample project.)
When the user plays audio in the app, a media notification appears on the device. I'm using the web Media Session API to customise the content of this notification.
If running the PWA in a normal web browser, once the notification appears, pressing it returns the user to the relevant browser tab. (If the phone is locked, the user is prompted to unlock.)
If the media notification is triggered from the TWA, pressing on it does nothing. (Other functionality such as play/pause works as expected.)
The Media Session API is fairly limited in scope. MediaSession action types do not include an action to focus the app.
navigator.mediaSession.setActionHandler('pause', () => {
audioElement.pause();
navigator.mediaSession.playbackState = 'paused';
});
navigator.mediaSession.setActionHandler('play', () => {
audioElement.play();
navigator.mediaSession.playbackState = 'playing';
});
navigator.mediaSession.metadata = new MediaMetadata({
title: 'App',
artist: 'Name',
artwork: [
{ src: '/android-chrome-192x192.png?v=47rE43RRzB', sizes: '192x192', type: 'image/png' },
{ src: '/android-chrome-512x512.png?v=47rE43RRzB', sizes: '512x512', type: 'image/png' },
],
});
When the media notification is trigged from the TWA, I expect the same functionality as when it is triggered from a web browser such as Chrome.
That includes the returning the user to the TWA (or prompting the user to unlock the device) when the notification is pressed anywhere except the play/pause control.
Everything else works except this aspect.
This was the default action in pwa and web, whenever someone clicks on notification media control, its takes to the website or pwa, but in twa its broken, its taking to the chrome browser but not focusing the app or website. I already raised ticket for the same on github
I have a standalone frame-less Chrome app. I'm sending messages from another Chrome extension to it (Chrome app) which works. But I would like to be able (if it's possible) to launch the app using the extension. Because now I have to launch the app manually.
I've seen Google music "mini player" that you can launch from music.google.com. So I'm wondering if the same can be done using chrome extension.
I wouldn't need the Chrome extension if the Chrome app could read opened tabs or just URLs but since this is not possible one must use extension and message to app to achieve this.
just send msg to your app from extension when you want to open it (In my case, I'm opening app when injected element on page is clicked)
extension script:
var appID = "qwertzuiopasdghghjkhgjghj";
element.onclick = function () {
chrome.runtime.sendMessage(appID, {message: 'fireup'}, function(response){});
});
app background script:
chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) {
if (request.message == 'fireup') {
chrome.app.window.create("page.html",
{
//whatever
});
}
});
You can use chrome.management.launchApp method: https://developer.chrome.com/extensions/management#method-launchApp
To use it you need to add "management" permission to your extension manifest file
I want to create chrome web app that will open in own window like Google Keep extension for chrome.
I made chrome web store package, but how to open it in self window instead of chrome browser ??
Create a packaged app by
Using a manifest with { 'app': { 'background': '...' } ....
Add a chrome.app.runtime.onLaunched listener that calls chrome.app.window.create
See the hello-world sample.