Using Notification API for Electron App - javascript

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

Related

Forget already paired device - web-bluetooth

I am working on web-bluetooth to connect a Web-App with BLE device. I have the connections now, I am looking how can I unpair a device.
I have looked into the official web-bluetooth documents
https://webbluetoothcg.github.io/web-bluetooth/#dom-bluetooth-getdevices haven't find much about it.
Can anybody suggest something on this?
Thanks
What a coincidence! I am currently working on adding a new forget() method on BluetoothDevice so that web developers can revoke permission access to a paired BluetoothDevice.
// Request a Bluetooth device.
const device = await navigator.bluetooth.requestDevice({ acceptAllDevices: true });
// Then later... revoke permission to the Bluetooth device.
await device.forget();
Spec PR: https://github.com/WebBluetoothCG/web-bluetooth/pull/574
Chromium CL: https://bugs.chromium.org/p/chromium/issues/detail?id=1302328
Note that this experimental functionality is currently available in Chrome 101 and requires users to enable the chrome://flags/#enable-web-bluetooth-new-permissions-backend flag.
You can try my sample at https://bluetoothdevice-forget.glitch.me/

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 branch.io to redirect to app in javascript

So, we have a mobile download site that we want to bypass if the user already has our app installed, and open our app. We are using the branch javascript code to try to accomplish this task. We have our branch key where I have 'my_branch_key', and we copied the rest of the code below directly out of the branch instructions. And, of course, it is failing to redirect our mobile users. I imagine the problem is the lack of some sort of app identifier in the code, but we could not find any instructions on where to add that. Anyone know what we're missing and where we need to add it. Any advice would be greatly appreciated.
// load the Branch SDK file
(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener applyCode banner closeBanner creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setIdentity track validateCode".split(" "), 0);
branch.init('my_branch_key');
// define the deepview structure
branch.deepview(
{
'channel': 'mobile_web',
'feature': 'deepview',
data : {
'source': 'website'
}
},
{
'open_app': true
}
);
Additional info: We noticed an oddity when trying to test this, for a couple of our iPhone users, it seems to work perfectly, but for the rest of the iPhone users and all the android users it still fails to redirect.
Alex with Branch.io here: the automatic open_app: true setting actually doesn't work in iOS 9 with Safari, due to some changes Apple made to Universal Links in iOS 9.3. This is a fairly recent change, so our docs haven't been updated quite yet. It's annoying, I agree...
The best workaround is to put a button on the page with deepviewCta(). Visitors will have to click it to open the app. We realise this is not ideal, but it's the best option for Apple's current system.
The other option you can try is enabling your own domain for Universal Link. That way whenever a URL at your domain is clicked, your app will launch immediately and the site will never even be loaded.

Lawnchair storage with 2 collections on Phonegap Android

I ran into a nasty problem with Lawnchair (0.6.1). I want to have 2 globally accessible collections/Lawnchairs, both with the webkit-sqlite adapter. This is how I declare them, right after loading Lawnchair and the adapter:
var clientStore = Lawnchair({name: 'clients'}, function () {});
var companyStore = Lawnchair({name: 'companies'}, function () {});
// other global variables
...
In Safari and Chrome on my desktop everything is smooth sailing, same for my iPad and other iOS devices in the emulator using Phonegap (3.0.0). No problems at all, both databases show up in the web inspector and in Weinre. I can use them in any of JQuery Mobile events (version 1.3.2 and 1.4.0 beta). Manually checking the database objects in Weinre confirms that they are indeed using the webkit-sqlite adapter.
But if run the Phonegap app on Android, only the clientStore is accessible and usable. Trying to access the companyStore gives me the following error:
companyStore.all(function (allEntries) {
console.log(allEntries);
...
> TypeError: Cannot call method 'all' of undefined
The only database that shows up in Weinre on the Android device is the clients database. Manually initializing the companies database from the Weinre inspector console after everything loaded up doesn't show any effect on the list of databases on the 'Resources' tab or change anything else (except for the above error visually disappearing).
Trying to access the 'undefined' companyStore programmatically, say when someone switches to a page where all the companies shall be listed, 'crashes' the UI on the Android device. Nothing even gets printed on the console anymore after that. As said, all other platforms work just fine.
Am I just doing something stupidly wrong or did I encounter a bug/feature?
Thanks a ton for the help, this one is driving me up the wall :(.
Edit: using the standard DOM adapter works for me on every platform so far. I guess I'll stick to that one for now. In case someone ran into the same problem, here's how to explicitly use the DOM adapter:
var clientStore = Lawnchair({name: 'clients', adapter: 'dom'}, function () {});
var companyStore = Lawnchair({name: 'companies', adapter: 'dom'}, function () {});

PhoneGap application not .live('tap') events on iOS

I have an application that is using jquery, jquerymobile and spine.js running on phonegap (0.9.5.1) and have been having some issues getting it to work properly on iOS.
The application should be launching the camera when a div is tapped. In my controller I have it so that it does something similar to the following:
myController = Spine.Controller.create({
events: {"tap .take-picture": "takePic"},
takePic: function(){
var self = this;
navigator.camera.getPicture(function(data){
self.doStuffWith(data);
},
null,
{quality: 50, destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA})
},
doStuffWith: function(data){
// Doing stuff with said data
}
});
What is really confusing me, is that this code works properly on Android. Are there some kind of iOS quirks that make it so that tap events aren't sent off properly?
I think that you are trying to use the Android phonegap js within the iPhone app. You need to make sure that you are including the right phonegap.js for the platform you are developing. Although they share the same name, each version of phonegap is tailored to its host OS.
This could be several things:
You are testing this in the iOS Simulator. There is no Camera in the Simulator, you don't have a fail callback specified, but there is a bug (I believe) in the API where it doesn't call the fail callback if the source type is not available anyway. You should see this ("Source Type Not Available") in the Run Log (Cmd-Shift-R).
On a device, I tested your code separately, and ran it in deviceReady(), it runs - so the API call seems to be correct. I added a touch handler to a button to call the code also, so it appears tap events are working. So based on these tests (on a device):
(a) the API call works
(b) tap events work
Which leads me to the conclusion that the bug is outside of those two possibilities.

Categories