Push Notification from WebApps (Vaadin) like Native Android Notification an

Hi dears,

we need to add notification from inside WebApps Java Server classes to external Native Android Push like:

  • on icon webapps
  • on Android central notification
  • on browser desktop (like outlook)

we saw your video how to Web Push work,
Someone has some details information more on how we can do and how we do this?

Thank you
17164928.jpg

Hi Giuseppe,
If I understand correctly, you would like to have a native Android app (so not a webapp) that you would like to notify from a Vaadin-based Java Server? Or would you like to have a webapp masquerading as a native Android app (the PWA)?

With a PWA I’d try the HTML5 Notifications as described here: https://developer.mozilla.org/en-US/docs/Web/API/notification . However you need to have a Service Worker for that.

With a native Android app I’d still try to use websockets - there are Android websocket clients that you can use. You will need to implement a Service and poll the websocket. Do not forget to monitor the device: when the phone is in low power mode you need to decrease the poll frequency. An alternative would be to use Firebase messaging which has this probably figured out; yet I wonder if we can push messages to Firebase from a Vaadin server…

thanks for your answer,
I’ll explain,

I have developed a web application with base framework vaadin 7.6 … and is kept by Tomcat,

on mobile devices fits responsive but is used via the browser (so it’s a webapp) I need to send notifications outside the webapp, ie outside the browser session,

  1. at the center of Android (then device)
  2. as in the icons of the native app, which appear the numbers of notifications arrived from / to that app

I have also attached a collage of screenshots from my mobile device, in my previous post

Hi Martin Vyšný,
how are you?

i have a PWA (webapp server side, with endpoint to mobile masquerading as a native Android app (the PWA)

I looked at FireBase and I do not understand your doubts about sending push messages from a Vaadin server?

what do you mean about it???

Hi Giuseppe, nice to hear from you! I was worried that FireBase would not have a client for the pure JVM (it would have Android client only). But according to https://stackoverflow.com/questions/39060938/firebase-plain-java-client there is the gcloud-java library; if that library works, then I have no further doubts :slight_smile:

Too strong Martin !!! It’s a great pleasure for me to receive your feedback and hear you too.

ok, however, in your opinion which technology / tool you recommend to use for better performance and operations considering your framework and the android world of google (without neglecting iOS iPhones of course, even if they are in minmor amount on the market … but customers can have it else)

FireBase,
Html+Service worker (Vaadin Web Push)

i need to send push messages
just like any web application or youtube channel at the moment that appear on the desktop of the pc (or as the client outlook of microsoft when it notifies you of the arrival of a new email)

i use Vaadin 7.7 (not 8 yet)
thanks

Hi Giuseppe, great to see you :wink:

I was wrong - you can use HTML5 Notifications even without a Service Worker, awesome! That will make things simpler.

So, what I did: I created a very simple Vaadin 7 app with two buttons. The first button would run this kind of code in its click listener: Page.getCurrent().javaScript.execute("Notification.requestPermission()"). That will request for the permission to show notifications in the browser. Another button will then display the notification: Page.getCurrent().javaScript.execute("new Notification(\"yahoo\")"). Please try this yourself whether this works for you. You can even try this extension: https://vaadin.com/directory/component/notify . The demo of that project will not work unfortunately, since the demo runs over http but notifications require https (or localhost).

You can of course call Page.getCurrent().javaScript.execute("new Notification(\"yahoo\")") asynchronously from your background thread. Just have Vaadin Push enabled, and then in your background thread just call UI.access() (this one: https://vaadin.com/api/framework/7.7.16/com/vaadin/ui/UI.html#access-java.lang.Runnable- ), and from the Runnable just call the Page.getCurrent().etc etc.

Please let me know if this works!

Hi Martin Vyšný,

we finally opted to use FBase/GCM servicies but we don’t figure out completely how integrate their code into Java classes example this (being very javascript :)) )

var firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appID: "app-id",
};

because you know, the webpage made by vaadin framework… so where can we include js fbase codes

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=11;chrome=1">
<script type="text/javascript" src="http://.../main.js" charset="UTF-8"></script><style type="text/css">html, body

{height:100%;margin:0;}
</style>
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="./VAADIN/themes/my_theme/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="./VAADIN/themes/my_theme/favicon.ico">
</head>
<body scroll="auto" class="v-generated-body">
<div id="idwebapp-1-----" class="v-app my_theme ---ui">
<div class="v-app-loading"></div>
**<noscript>
You have to enable javascript in your browser to use an application built with Vaadin.
</noscript>**
</div>
<script type="text/javascript" src="./VAADIN/vaadinPush.js?v=7.7.6"></script>
<script type="text/javascript" src="./VAADIN/vaadinBootstrap.js?v=7.7.6"></script>
<script type="text/javascript">//<![CDATA[
if (!window.vaadin) alert("Failed to load the bootstrap javascript: ./VAADIN/vaadinBootstrap.js?v=7.7.6");
vaadin.initApplication("idwebapp-1---------",{"theme":"my_theme","versionInfo":

{"vaadinVersion":"7.7.6","atmosphereVersion":"2.2.9.vaadin2"},"widgetset":"my.Widgetset","widgetsetReady":true,"comErrMsg":

{"caption":"Communication problem","message":"Take note of any unsaved data, and <u>click here</u> or press ESC to continue.","url":null}
,"authErrMsg":

{"caption":"Authentication problem","message":"Take note of any unsaved data, and <u>click here</u> or press ESC to continue.","url":null}
,"sessExpMsg":

{"caption":"Session Expired","message":"Take note of any unsaved data, and <u>click here</u> or press ESC key to continue.","url":null}
,"vaadinDir":"./VAADIN/","standalone":true,"heartbeatInterval":300,"serviceUrl":"."});
//]]></script>
</body>
</html>

***because we see that ***

**<noscript>
You have to enable javascript in your browser to use an application built with Vaadin.
</noscript>**

How can I use this notify Component in vaadin14? This is giving me exception because of ‘jsoup’ version. Please help!

Thanks!