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
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"],
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 have a website which runs a service-worker. When I install the website as a PWA App using Add to Homescreen (standalone mode), the site works fine, except that any target="_blank" links cause a duplicate request on the server side - there are two simultanous requests, but only one window opens. This happens even when service worker has no caching logic (fetch handler is empty)
I'm seeing this on Chrome (Huawei, Android 9), as well as Chrome (Samsung, Android 6) and Samsung Internet Browser - but not on iOS Safari.
The duplicate request happens no matter if there is any fetch event implemented in PWA or not
Only one debugger event gets caught in service-worker fetch event, fiddler sees two requests
Only happens in "installed" PWA, not in regular browser or non-PWA homescreen website shortcut
The resource is not cached (or supposed to be cached)
I've made a minimal repro application that I can replicate the issue in:
/index.html
/page.html
/service-worker.js
/manifest.json
index.html:
<head><link rel="manifest" href="/manifest.json"></head>
<body>
CLICK ME
<script>navigator.serviceWorker.register('/service-worker.js', { scope: '/' });</script>
</body>
manifest.json:
{
"background_color": "#FFFFFF",
"description": "Repro application",
"display": "standalone",
"name": "Repro application",
"short_name": "Repro application",
"start_url": "/index.html",
"theme_color": "#FFFFFF"
}
service-worker.js:
(function () {
'use strict';
self.addEventListener('fetch', function (event) { });
self.addEventListener('activate', function (event) { });
}());
Also happens without fetch event at all, or with fetch event just returning a network fetch promise (so default browser behaviour)
page.html content doesn't matter (if it's not there, it just 404's twice)
Only the target="_blank" links hit the server twice, "_self" works fine. Any ideas how to track down what's causing the extra hit?
My code works Firefox, Safari and MS Edge but doesn't work in Chrome. (I try online my website. Doesn't work. is it possible my site ?)
HTML
<button onclick = "bildirim()" >Bildirim yolla</button>
JS
function bildirim () {
if (!("Notification" in window)) {
alert("Your browser does not support Web Notifications API");
}
else if (Notification.permission === "granted") {
var notification = new Notification('Bildirim', {
body: '',
icon: '',
});
setTimeout(function(){
notification.close();
}, 3000);
}
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
if (permission === "granted") {
var notification = new Notification('', {
body: '',
icon: '',
});
setTimeout(function(){
notification.close();
}, 3000);
}
});
}
}
When I try offline, the button wants to open the permission. When I open it, it does not accept it and wants me to turn it back on. It keeps on going. Not send me notification.
When I upload html the web site, the button does not respond. The website does not even ask for permission. So I do not even get an error.
Chrome is up to date.
SOLVED
Chrome not working this code without SSL. So not work HTTP:// works HTTPS://.
Here are some observations regarding Notification in Chrome:
Notification doesn't work from local file (file://). If you have local webserver try putting it there and see it works or not. It worked for me.
When you have uploaded it on server, if its getting loaded in an iframe and the iframes domain is different than the main windows domain then it doesn't work if the domain of iframe is not already allowed for showing notification. For example: if you first check the example on https://developer.mozilla.org/en-US/docs/Web/API/notification, it doesn't work. But if you access the URL https://mdn.mozillademos.org/en-US/docs/Web/API/notification$samples/Example?revision=1326091 it asks for permission and once you allow, it works there as well as the previous link. Another example is https://davidwalsh.name/demo/notifications-api.php. Here it works because probably the iframe domain and top window domain are same.
I've seen working notifications on HTTPS sites only. I've not seen it from any HTTP site (except http://localhost). So that (HTTPS) could also be one of the requirements for notifications to work.
Unfortunately I've not found any links that document / confirm these observations.
Is it possible to create a Google Chrome desktop application that runs only as a process in the background which the user cannot directly interact with?
My idea is to create a Chrome browser extension that the user interacts with and that will, via message passing, send data to a Chrome desktop app to operate on before sending it back to the browser extension. I want the operations of the desktop app to be completely invisible to the user.
Is this possible?
Yes, you can simply ignore the onLaunched event, or create a hidden window:
chrome.app.window.create("main.html", { hidden: true })
you can hide the window on app start with chrome.app.window.current().hide()