Styling HTML5 desktop notifications - css

I've included this plugin for desktop notifications in my Laravel 3 project.
http://aquaron.com/jquery/desktopify
It works fine, only problem is i can't find a way to "style" the notifications!
Is styling the desktop notifications even possible? If it is can someone please point out for me how it is done!

Unfortunately this library uses only .createNotification() and not .createHTMLNotification(), but Google just dropped .createHTMLNotification() support on version 28. There's a warning about this:
Warning: webKitNotifications.createHTMLNotification() in the web notifications API has been deprecated. The new web notifications API only allows text. Chrome notifications API will be promoted to stable soon and web notifications will be updated to use the new rich notifications format.
But it is doing it differently, using this rich notifications.
But this is just for chrome, so if you need it for all browsers, you will have to write your own implementation or find another library to help you.

Related

Mesibo API on Microsoft Edge

My query is related to Mesibo Javascript SDK. I have integrated Mesibo into my website and was testing it on all browsers but the chat popup does't seem to be working specifically on Microsoft edge. Here is the video of the same: https://drive.google.com/file/d/1yyzJn-LDRYAjLQb4DZLOg4i5ApCR9i4W/view?usp=sharing
Can somone please tell me if Mesibo SDK is usually not compatible with Microsoft Edge browser and if not, how can the problem on the video be fixed.
Apart from that, can you also please tell me if the Javascript SDK for Mesibo provides an API to tell the user if he has a new message in a chat (like whatsapp displays "1" on a chat if there is a new message from that person)
Thanks.
mesibo API does not provide any UI, what you are using is the sample code which you can modify to suit your needs.
Read tutorials here, you need to set listener to get new message notification. https://mesibo.com/documentation/tutorials/first-app/js/

How do I listen for Firebase Cloud Messaging messages in the background in a Google Chrome Extension?

I have a Google Chrome Extension that listens for GCM messages in a background script via chrome.gcm.onMessage.addListener. Our provider is planning to upgrade their infrastructure to use the latest Firebase Cloud Messaging which is no longer compatible with GCM. We've confirmed the gcm addListener API no longer receives messages after upgrading to FCM in the dev environment.
I've found migration guides for Android, iOS, and progressive web apps but none specifically for background scripts in Chrome extensions.
Some resources I've found:
Official Chrome Extension example but is specifically for authentication
Documentation for JavaScript, specifically PWAs
Upgrade notification from the Google Developers Blog
The extension that I mentioned in my question three years ago still exists today and continues to rely on the chrome.gcm extension API.
Recently we noticed the gcm.notification.badge value is no longer being passed along with the data object, instead we're seeing a gcm.notification.e property that I believe contains the badge value. I was unable to find any documentation on why that property changed but I did find an answer to my original question:
We are deprecating the chrome.gcm API and encourage you to move to Web
Push Notifications using VAPID authentication. This works on the Web,
in Chrome Extensions and in Chrome Apps. You can find more information
here:
https://developers.google.com/web/fundamentals/push-notifications/
Web Push Notifications offer a slightly different set of features from
the chrome.gcm API. Please file an issue or contact us directly if you
believe that it cannot satisfy your requirements.
Source: https://bugs.chromium.org/p/chromium/issues/detail?id=831532

Meteor audio calling

I am building chat app and want to add voice chat feature. I came across webRTC protocol and there is package available for it in Meteor. But I found that it is developed for browsers. So if I used it in my application, I believe it will only work on the browser version.
Is there a way to implement audio calling feature that will work on IOS and Android as well?
For iOS and Android (Cordova), you need to use Cordova or PhoneGap package which implements WebRTC protocol and API.
You can easily google it, for reference take a look on phonertc package. I've used it in a few projects and can confirm what it works inside of Meteor app.

Detect phonegap app from wordpress

I am building my app in phonegap. In that app I am calling my wordpress website like window.location="http://www.example.com/";.
Because of window.location my app UI and mobile browser UI are looks same. So I want to detect phonegap app to defer from browser UI. Is there any way to do this.
#JayTh
Okay. Thanks. VERY GOOD TO KNOW. I spend hours getting beginners to understand issues. You got them.
Okay, once you load a webpage from a website you are NOT allowed to access any of the Cordova Plugin APIs. However, you can access HTML5 API, like camera and geolocation. Again, you cannot access any of the Cordova Plugin APIs, and any of the 800+ 3rd-party APIs.
The best way to access the web, is via inAppBrowser. However, the third paragraph states:
The InAppBrowser window behaves like a standard web browser, and can't access Cordova APIs. For this reason, the InAppBrowser is recommended if you need to load third-party (untrusted) content, instead of loading that into the main Cordova webview.
Apple is serious about their security, so if they detect you are going around this, they may reject your App. Just to be clear on this, there is a new security protocol, which Phonegap Build now requires, and so does Apple. With Phonegap Build, it will create the required Apple ATS entries into the Info.plist.
So, the best I can do at this point is give you three (3) links.
Top Mistakes by Developers new to Cordova/Phonegap
Core Plugins Setup
HOW TO apply the Cordova/Phonegap the whitelist system
On 1., you have hit #5 When designing the app, thinks phonegap works like a website or webbrowser.. For the remainder, I recommend just reading the bold sentences.
On 2., if you want to use the Cordova Plugins, it is best to use the version numbers, if not you will get the latest, and your code may break. This is because now, Phonegap Build now uses NPM for the plugins. And many times bugs fixes get into the plugin, that require the latest compiler - and Phonegap Build is always at least one version behind.
On 3., You'll need to use the whitelist to apply the fixes that maybe required for any new plugins you are using.
If you have more questions, I can answer them in comments. If it get too complicate, we can move to Google Group of Cordova/Phonegap - Best of Luck.

Mobile Web Browser Sound Notification

Which API should I use to play sound notification from a Mobile browser for my web application.
Any Idea?
I don't want to use Flash or Silverlight Plugin.I used phonegap notification API, but it doesn't work on my iPhone.
You valuable thoughts would be highly appreciated.
Abdullah
Unfortunately the iOS browser has some limitations purposely built into it. One of them being that you can't play audio in javascript unless it comes as a direct response to user interaction (click/tap).
The reasoning for this limitation is unclear to me, my guess is that this is a deliberate attempt to cripple web apps and favour native apps.
This limitation is mentioned in Safari official docs here:
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html#//apple_ref/doc/uid/TP40009523-CH6-SW1
"On iOS, the Web Audio API requires sounds to be triggered from an explicit user action, such as a tap."
You could try playing the sound with javascript
Playing sound notifications using Javascript?

Resources