This article provides instructions for setting up a Firebase account for Web Push Notifications.
Creating a Firebase Project
Click on "Add project".
Enter a project name and confirm the settings.
ⓘ Optional: Link the project to Google Analytics or skip this step.
Registering a Web App in Firebase
Go to Project settings → "General" tab.
Scroll down to "Your apps" → Click on "Add app" → select the web icon 🌐.
Enter an app name and confirm.
You will now receive a Firebase configuration snippet with values such as:
apiKey,authDomain,projectId,messagingSenderId,appId.
Generating Firebase Admin SDK JSON
In the Firebase Console → click the gear icon in the top left → "Project settings".
Switch to the "Service Accounts" tab.
Click on "Generate new private key" → this will provide you with a JSON file containing the keys.
This file contains values such as
project_id,private_key,client_email.You will save this file later in the dispatch tool (this is your firebase-adminsdk JSON).
Activating Cloud Messaging
In the Project settings → "Cloud Messaging" tab.
There you will find the Sender ID (important for Web Push).
Scroll further down → "Web Push certificates".
Here you can generate a VAPID Key.
Click on "Generate key pair" → your Public VAPID Key will then appear.
Enter this key into the following
junePushConfig.js.
Creating the Firebase JS Configuration File
Create a file named junePushConfig.js using the template below, where the Firebase data, the VAPID key, and the collectToken for JUNE are stored:
var config = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
vapidKey: "",
collectToken: ""
};
// universell verfügbar machen
if (typeof window !== "undefined") {
window.__JUNE_PUSH_CONFIG__ = config;
}
if (typeof self !== "undefined") {
self.__JUNE_PUSH_CONFIG__ = config;
}You can find the information in Project Settings / General:
You can find the Collect Token in the API tab of the corresponding list where the push registrations should be collected:
Setting up the Service Worker for Web Push Notifications
To reliably receive push notifications in the background (even if the user has closed your page), a special configuration file – the Service Worker – must be placed in the root directory of the website.
1. Requesting the Service Worker File
Since many hosting platforms restrict the direct upload of .js files, we provide the Service Worker file directly to you:
Action: Please contact our technical support at support@juneapp.com.
2. Location and Upload
The file must be located exactly in the root directory of the website; otherwise, the browser will not be able to find it correctly.
Important: After uploading, check whether the file can be accessed correctly in the browser (e.g., by entering the full URL https://[Your Domain]/junePushSw.js).
Service Note: Uploading junePushConfig.js
In order for the June Push SDK to know which of your Firebase projects to connect to, the configuration file must be available at a specific location.
1. File to Upload
File:
junePushConfig.jsContent: The configuration provided by you with your Firebase keys, the Vapid key, and the Collect Token of the list.
2. Location and Upload
The file must be located exactly in the root directory of your website. Important: The correct storage location is crucial, as the HTML snippet will otherwise not be able to find the file and the push registration will fail.
Setting up JUNE Token and Integration
1. Initializing the Token
Create a new token: Administration / Tokens / +
Name the token and paste the content of your previously downloaded Admin SDK JSON below.
2. Creating the Integration
Create a new integration: Administration / Integrations / +
Fill in the data and select your list as well as the initialized token:
Inserting the HTML Snippet
This HTML snippet is integrated into the website so that users can activate push notifications:
<button id="btn">Push Notifications aktivieren</button>
<script src="/junePushConfig.js"></script>
<script src="https://view.juneapp.com/june-lp-framework/dev/sdk/push_notifications_v2/js/junePushSdk.js"></script>
<script>
const sdk = new JunePushSDK({
vapidKey: window.__JUNE_PUSH_CONFIG__.vapidKey,
collectToken: window.__JUNE_PUSH_CONFIG__.collectToken,
disablePushNotificationInForeground: false,
apiBaseUrl: 'https://engagement.juneapp.com'
});
document.getElementById("btn").addEventListener("click", async () => {
const token = await sdk.register();
console.log("FCM Token:", token);
});
sdk.listenToForegroundMessages(payload => {
//alert("Neue Nachricht: " + payload.notification.title);
});
</script>