Hide application window NW.js and Electron - javascript

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.

Related

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

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.

Electron testing - WebdriverIO switch between the devtools window and main app window

We need to test Electron App.
We are using Spectron which is using ChromeDriver and WebdriverIO (Selenium 2.0 bindings for NodeJS).
Problem: Our application starts with open dev tools window than main application window is shown. Webdriver connects to dev tools window instead of the main window. We are unable to switch to main window.
Example code:
var app = new Application({
path: cfg.pathToElectron,
args: [cfg.pathToSA]
});
app.start().then(function(){
app.client // <- this is dev tools window instead of main window
// this closes the dev tools which is ok but we need to switch to main window
app.client.close();
// things like this doesn't help
app.client.execute('xxx.getCurrentWindow().closeDevTools()');
});
Any ideas how to switch from dev tools to main window?
You know that feeling when you ask a question and than immediately find the answer?
The solution is to call windowByindex() from the Spectron API. You need to call the API functions from the Spectron for this, not the functions from the Webdriver.
So solution to our problem is:
app.start().then(function(){
app.client.windowByIndex(1);
});

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');

How to add "open link in app mode" to right-click menu in chrome?

app mode: chrome window without navigation panel(address+tab bars). Run this in terminal
google-chrome --app=http://stackoverflow.com/
I want to open a website in app mode directly from chrome. Is there an extension that adds such option? If not how do I write a small extension that does just that? I never wrote a chrome extension but I have some experience with html and javascript. Thanks
Edit: Main issue is chrome.windows.create has no "app" option for CreateType. I guess we can't do anything about it.
There is a way using chrome.management API.
chrome.management.generateAppForLink("http://stackoverflow.com/", "Stack Overflow", function(info) {
chrome.management.setLaunchType(info.id, "OPEN_AS_WINDOW", function() {
chrome.management.launchApp(info.id);
})
});
Note that the above code requires a user gesture (which is undocumented). For examples, see Invoking activeTab. Activating a context menu should be sufficient as a gesture.
However, this will create an app in the app launcher permanently. On the plus side, it will not create duplicates for the same URL/Title.
You can call chrome.management.uninstall(id), but it will require a confirmation from the user.

Launch app from link, if no app then go to download app from web

So I'm looking to launch a mobile app when a web page is landed on. I've seen this done and all is great there (see code below with Facebook and Pandora as an example). But I'm looking for a logic check to route the user one way or the other depending upon the successful or unsuccessful launch of the app. It was said in a previous solution that you cannot use a link to check the user's mobile device to see if an app is installed, but I keep thinking that there might be a way to see if the user's app was successfully launched after-the-fact and route them based on that.
Using the code below, if the app is launched, the web page falls away, if you will (disappears into the background while the app takes center stage). If, however, the app isn't installed on the mobile device, then the web page stays up and you get an error (can't recall off-hand which error). But it seems to me that receipt of this error should be able to trigger a re-routing to a specific URL of your choice. Not at the server-level, but at the code-level. In other words... if the app launches, then grats... enjoy! But if the page loads with an error, then it redirects instantly to say, the app download page on Apple or Google (depending upon the OS detected).
Does anyone have a suggestion as to how to make this happen? Essentially one piece of code that is looking for the trigger error and reacting to that as a way to A) launch the app from a page load (link) B) open the app store in a browser to download the app if the app wasn't successfully launched.
This is my first foray into Stack, but I have found the community very helpful over the years.
<script type="text/javascript"> // <![CDATA[
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
if ( isMobile.Android() ) {
document.location.href = "fb://profile";
}
else if(isMobile.iOS())
{
document.location.href="pandora://";
}
</script>
What you're talking about is called Deferred Deep Linking in terms of App Links. If you were coding an app that wanted to utilize this, there are iOS guides and Android ones. Overall, there doesn't seem to be a standard implementation for all scenarios, however, there is a pretty simple "roll-your-own" implementation that is similar to what you're attempting.
(from another SO answer)
<script type="text/javascript">
window.onload = function() {
// Deep link to your app goes here
document.getElementById("l").src = "my_app://";
setTimeout(function() {
// Link to the App Store should go here -- only fires if deep link fails
window.location = "https://itunes.apple.com/us/app/my.app/id123456789?ls=1&mt=8";
}, 500);
};
</script>
<iframe id="l" width="1" height="1" style="visibility:hidden"></iframe>
As a commentor said above, use an iframe so you can keep processing code even if your window.location fails. Then, set up a simple setTimeout with a reasonable fallback time. You don't need to catch any error messages or response headers. If the app didn't launch, then a website will.
Just thought to add, since you want A) Launch App from link and upon failure B) Go to store to download the app.
A Cross-Platform solution you can use rather than rolling your own as an alternative, I'd suggest trying Firebase Dynamic Links (works on both Android and iOS) and its free.
It also has the benefit of providing your app the link information, like if you put in the link an article ID (from your news website example), then the app can load up that article upon launch, and it persists even if the user has to install the app from the store, when launched it will open to that article you specified in the link.
In addition, Dynamic Links work across app installs: if a user opens a Dynamic Link on iOS or Android and doesn't have your app installed, the user can be prompted to install it; then, after installation, your app starts and can access the link.
https://firebase.google.com/docs/dynamic-links
With very little code you can add the ability for a user to click a link on your mobile web and be taken to the corresponding page in your app, even if they have to go to the App Store or Google Play Store to install it first!
https://firebase.google.com/docs/dynamic-links/use-cases/web-to-app

Categories