Electron app notifications only showing on development version (non-build) - javascript

I'm trying to trigger a notification in the Electron main process (node). It works fine in development, but in the built .app version, the notification doesn't show? The notification sound is triggered on mac but nothing appears. I've checked the notification center, notification settings in preferences and DND is not on.
Code:
const { Notification } = require('electron');
const notification = new Notification({
title: 'Oh Dear',
body: `Text`,
icon: path.join(__dirname, 'icons/error.png')
});
notification.on('click', () => {});
notification.show();
Any ideas?

Is your notification icon included when you bundle your app? If yes, check if the path to the icon is correct.
You may also test your notification on other OSes (if your macOS does not want multi-boot setup, try in an VM) if the issue presist across platforms.

Related

Redirect to custom web page when Android App not installed instead of Play Store

I want to click a link that launches an app on Android. However, if the app is not installed, by default Android redirects to the Play store. I don't want this.
What I want is to be able to redirect to a custom webpage if the app is not installed. iOS seems to support this by using setTimeouts but according to this page https://vhudyma-blog.eu/open-mobile-application-from-the-browser/ there is no similar flow offered for Android. Thank you for your help.
if (isAndroid) {
const url =
"intent://instagram.com/#Intent;scheme=https;package=com.instagram.android;end";
// open the app
// if the app isn't installed, it seems we just go to the play store
window.location.replace(url);
} else if (isIOS) {
// go to the app
window.location.replace("instagram://");
// open the app store on a timeout. this will happen but not be seen if instagram has opened
setTimeout(() => {
window.location.replace(
"https://apps.apple.com/us/app/instagram/id389801252"
);
}, 10000);
} else {
// we're not in ios or android so just go to the website
window.location.replace("https://instagram.com");
}
You might have a little luck with getInstalledRelatedApps()
const list = await navigator.getInstalledRelatedApps();
Here is an article about it: https://web.dev/get-installed-related-apps/
Even though it might not be too wildly supported.

Ionic 5: best practice to get the built platform

I'm writing an app using Ionic 5, Angular and Cordova. I would like to get the "platform" variable used to build my application (i.e. the argument used in a command like "ionic cordova build android).
Unfortunately, all I found on the web was the Platform service (https://ionicframework.com/docs/angular/platform), useful but not quite what I needed (e.g. platform.is('android') can return true if the application runs on a web app on an android phone, on a browser on an android phone or if I click F12 on chrome...).
What I need is to find the platform the application was built for.
The best way I found to achieve the result, was to add "build:before" hook in my ionic.config.json file
"hooks": {
"build:before": "scripts/build-before.js",
"build:after": "scripts/build-after.js"
}
and change the constant in a service before building
#!/usr/bin/env node
var process = require('process');
var fs = require('fs');
let input=process.argv;
let android="android";
let browser="browser";
let ios="ios";
let platformFile="MYFILE"
module.exports = function() {
let nbArgs=input.length;
let platform;
for(let i=0;i<nbArgs;i++){
if(input[i]==android){
platform=android;
}
if(input[i]==browser){
platform=browser;
}
if(input[i]==ios){
platform=ios;
}
}
let file = fs.readFileSync(platformFile, 'utf8');
let replacement="MYSTART '"+platform+"';";
let result = file.replace(/MYREGEX/g, replacement);
fs.writeFileSync(platformFile, result);
console.log("Service updated with platform: "+platform);
}
Then in the build:after I restore the file as it was (to avoid to commit the file on GIT after each build...).
I added the code in case someone has the same issue and looks for a quick workaround.
My question is: does anyone know of an official/smarter way to achieve the result?
Thanks,
I'm not entirely sure of what your goal is, but detecting the platform where the app is running is way easier than that. For example, if you want to know if the app is being executed on an Android mobile device, you could use the following condition:
if(this.platform.is('mobile') && this.platform.is('android')) {
// ...
}
In a similar way, you can check if the device is a desktop, a pwa, ... or any other combination based on the following list:
https://ionicframework.com/docs/angular/platform#platforms
android: a device running Android
capacitor: a device running Capacitor
cordova: a device running Cordova
desktop: a desktop device
electron: a desktop device running Electron
hybrid: a device running Capacitor or Cordova
ios: a device running iOS
ipad: an iPad device
iphone: an iPhone device
mobile: a mobile device
mobileweb: a web browser running in a mobile device
phablet: a phablet device
pwa: a PWA app
tablet: a tablet device

Cordova Firebase plugin: Apple Push notifications do not work sometimes when installing a new app

I'm building a new version of a Cordova project that uses the push notifications for the first time. I use the 'cordova-plugin-firebase' version 1.0.5 for handling them. Everything works fine on Android, but on iOS I seem to have a problem. If I download the official app from AppStore and then upgrade it with the new version via XCode, the push notifications doesn't seem to work (no "message" appears at the top in iOS). If I have the app opened, the XCode debugger prints the push notification and it looks like this:
{
"collapse_key" = "bundle_ID";
from = FIREBASE_ID;
notification = {
body = "This is a message";
title = "Message";
};
tap = 0;
}
If I then close the XCode project and create a new one (or open this newly created one again) with all source copied to it and the cordova plugins installed into and then build and install it via XCode, the push notifications start working again and the push notification in the XCode debugger looks like this:
{
aps = {
alert = {
body = "This is a message";
title = "Message";
};
};
tap = 0;
}
Should push notification formats differ? Has anyone experienced some similar behavior and how did you solve it?
It seems there was a bug or something in the iOS project. When I removed the ios platform and newly installed it everything started working and it still works until this day.
Also Apple's APS has different push notification object structure than Android's FCM.

Hide application window NW.js and Electron

I am using NW.js and Electron to build desktop application from our current Web Application.
I need to launch the application in hidden mode, it should only show some error alert message or confirmation alert message when required.
How to I hide the application window i.e. my desktop application window using NW.js and/or Electron.
I have no clue as of now as I am just starting with NW.js and Electron.
Please suggest.
NW.js only solution:
First, add into package.json:
"window": {
"show": false
}
Second, use some code for notifications, like:
<script>
const options = {
body: 'Hello there, user3873552'
};
new Notification('Stackoverflow', options);
</script>
Alternatively, feel free to find a cross-platform npm-library for notifications and confirmations.

Using Notification API for Electron App

How to implement Notification API on Electron App?
I tried checking Notification.permission and it returns granted
But when I try to run:
new Notification("FOO", {body:"FOOOOOOOOOOOOOOOOOOOOOOOOO"});
nothing happens. Is it even supported?
A good approach is use node-notifier for notifications, because the package have cross-platform notification support
Note: Since this is an HTML5 API it is only available in the renderer process.
Example :
let myNotification = new Notification('Title', {
body: 'Lorem Ipsum Dolor Sit Amet'
})
myNotification.onclick = () => {
console.log('Notification clicked')
}
Windows
On Windows 10, notifications "just work".
On Windows 8.1 and Windows 8, a shortcut to your app, with a Application User Model ID, must be installed to the Start screen. Note, however, that it does not need to be pinned to the Start screen.
On Windows 7, notifications are not supported. You can however send "balloon notifications" using the Tray API.
Furthermore, the maximum length for the notification body is 250 characters, with the Windows team recommending that notifications should be kept to 200 characters.
More information : https://github.com/electron/electron/blob/master/docs/tutorial/desktop-environment-integration.md#notifications-windows-linux-os-x
The HTML5 Notification API is only available in the renderer process.
You must require the Electron Notification API if you want to use notifications from the main process. The API is different from the standard/HTML5 version.
const {Notification} = require('electron');
new Notification({
title: 'Headline',
body: 'Here write your message'
}).show();
The notification API doesn't work on Windows, because there is no notification API that works on all versions of Windows (really Win10 is the first version where desktops have a documented API for it, Win8.x had it but it was WinRT-only)
Posting an updated answer that Electron has a section in their tutorial for their Notifications and about how to handle Windows
Windows
On Windows 10, a shortcut to your app with an Application User Model ID must be installed to the Start Menu. This can be overkill during development, so adding node_modules\electron\dist\electron.exe to your Start Menu also does the trick. Navigate to the file in Explorer, right-click and 'Pin to Start Menu'. You will then need to add the line app.setAppUserModelId(process.execPath) to your main process to see notifications.
On Windows 8.1 and Windows 8, a shortcut to your app with an Application User Model ID must be installed to the Start screen. Note, however, that it does not need to be pinned to the Start screen.
On Windows 7, notifications work via a custom implementation which visually resembles the native one on newer systems.
Electron attempts to automate the work around the Application User Model ID. When Electron is used together with the installation and update framework Squirrel, shortcuts will automatically be set correctly. Furthermore, Electron will detect that Squirrel was used and will automatically call app.setAppUserModelId() with the correct value. During development, you may have to call app.setAppUserModelId() yourself.
Furthermore, in Windows 8, the maximum length for the notification body is 250 characters, with the Windows team recommending that notifications should be kept to 200 characters. That said, that limitation has been removed in Windows 10, with the Windows team asking developers to be reasonable. Attempting to send gigantic amounts of text to the API (thousands of characters) might result in instability.
for window 7, you might try this: https://github.com/blainesch/electron-notifications - it generates 'desktop' notifications as separate electron windows. It looks pretty slick; I'm about to implement it now. I believe you'll need to use something like https://github.com/electron/electron/blob/master/docs/api/ipc-main.md to communicate between your app and the main electron process which would be responsible for displaying and managing the notifications, unless your main electron process is already responsible for the notification logic.
use
const notification = new window.Notification(
'LO SIENTO OCURRIO EL ERROR:',
{
body: error,
}
);
notification.onclick = () => console.log('Clicked');
notification.onclose = () => console.log('Closed');

Categories