Most recently I’ve tried to Integrate Firebase Push Notifications into a Vaadin Web App and I ended up – getting it – working – on Mobile. Here’s an overview of the steps I’ve done.
Using Vaadin’s built-in support for @Push Notifications
Vaadin provides ability to “Push” content onto the browser from your server. If you are running your app inside Spring Boot
- annotate the Application class with @Push
- Cache UI intance on rendering – in the view that will need update from server
- On Some update from the Server – Push your changes with ui.access((){ /* ui Update */ })
This is the way I’ve accomplished incremental response from the GPT Chat in https://programtom.com/dev/product/own-your-chat-with-llm-gpt/
Using Vaadin’s official documentation for Push Notifications
I tried following the official example https://vaadin.com/blog/step-by-step-guide-to-sending-web-push-notifications-from-vaadin-flow. It seems to use deprecated Google Firebase Messaging API. It didn’t work on my machine – using Windows & Chrome.
The Registration token from the old way looks like an URL like: http://fcm.googleapis.com/fcm/send/{some long hash unique for the user/browser/installation/etc}. The way a push was working in the old way is – posting a request to that url with the VAPID – configured for your project.
I may get it working at some moment at the future, but for now – I’ll move on the the way it worked. More about it below.
On the Server
Step 1: Add dependencies
In your pom.xml file, add the following dependencies:
<dependency>
<groupId>com.google.firebase</groupId>
<artifactId>firebase-admin</artifactId>
<version>9.3.0</version>
</dependency>Step 2: Configure Firebase on the Server
Install GCloud: https://cloud.google.com/sdk/docs/install. Authenticate and bind – your local Java Project – with a Firebase Project from your console.
Step 3: Create a Firebase instance
Create a Java class that will handle the FCM integration:
import com.google.firebase.FirebaseApp;
import com.google.firebase.FirebaseOptions;
@Configuration
public class FirebaseConfig {
@Bean
public FirebaseApp firebaseApp() {
return FirebaseApp.initializeApp(FirebaseOptions.builder()
.setCredentials(GoogleCredentials
.getApplicationDefault())
.setProjectId("your project id")
.setStorageBucket("storage-bucket")
///....etc //better to be part of application.properties
.build());
}
}
Step 4: Send FCM notifications
Create a Java class that will send FCM notifications:
import com.google.firebase.messaging.FirebaseMessaging;
@Service
public class FcmService {
@Autowired
private FirebaseApp firebaseApp;
public void sendNotification(String token, String message) {
Message message = Message.builder()
.putData("score", "850")
.putData("time", "2:45")
.setToken(token)
.build();
String response = FirebaseMessaging.getInstance().send(message);
}
}
I’ve failed to get working receiving Push Notifications on Web
- on active page
- nor – on the background.
I’ve even went and
- created a clean web app – with no Vaadin, no Spring, no – nothing and just follow the instructions on their page.
- I’ve tried with very minimal react app
One of the great obsticles of Integrations are – to try to plug-in multiple technologies at once.
I’ve learned that – the the “plain” JavaScript has evolved with a lot of items that I’ve previously have seen only in Angular or React and TypeScript – where code is trans-complied to be “runnable” by the browsers.
Trying Alternatives
I’ve tried some of the alternatives of Firebase
- One Signal Sign Up fails. I cannot pass through the Welcome – with some not “Unavailable. Please try again later”.
- I’ve started with Amazon SNS – but I saw that it is intended for Mobile Push.
- I’ve attempted several others, but they seem to have worse documentation and integrations.
From Vaadin Web App to Mobile Апп Push Message
What I did make functional push is on Mobile Device using Flutter.
- I’ve created a clean new project
- installed and configured the firebase_cli tools
- Made the appropiate configuration and changes in dart and android: https://firebase.google.com/docs/cloud-messaging/flutter/client
- Started the app on device that has Google Play Services.
For Every other device – without these services – I will need to do another integration – that – I’ve tried to escape – by – implementing it on the Web. Better luck next time. Until Then – I’ll get to more meaningful business logic.