How To Implement Firebase FCM Push Notifications in your Svelte Web Application

Integrating Firebase Cloud Messaging (FCM) into your SvelteKit application can greatly enhance its capability to engage users through real-time notifications. This guide will walk you through the process step by step.

Prerequisites

Before beginning, ensure you have the following prerequisites met:

• A Firebase project set up in the Firebase Console.
• The latest versions of Node.js and npm are installed.
• A SvelteKit project ready for integration.

Step 1: Installing Necessary Packages

Install the required packages to enable Firebase functionality, user notifications, and UI components in your SvelteKit application. I've chosen svelte-french-toast and flowbite-svelte, but you can choose an alternative to these that fit your project.

Open your terminal and navigate to your SvelteKit project's root directory. Run the following command to install the necessary npm packages:

npm install firebase svelte-french-toast flowbite-svelte

Let's break down what each of these packages offers:

1. Firebase (firebase): This is the core Firebase SDK. It is a comprehensive app development platform that provides the backend services needed to build apps, including databases, analytics, authentication, and, crucially for our purposes, cloud messaging.

2. Svelte French Toast (svelte-french-toast): This is a lightweight, easy-to-use toast notification library Svelte applications. It allows us to show notifications or messages in our web application. These notifications are essential for informing users of new messages received through Firebase Cloud Messaging.

3. Flowbite Svelte (flowbite-svelte): This package provides Svelte components based on the Flowbite toolkit, built on top of Tailwind CSS. It offers a range of ready-to-use components like modals, buttons, and more, which we will utilize to create a user-friendly interface for handling notifications.

By installing these packages, you're equipping your SvelteKit application with the tools to integrate Firebase Cloud Messaging, display notifications, and enhance the overall user experience with interactive UI components.

Step 2: Setting Up Firebase in SvelteKit with TypeScript

Integrating Firebase into a SvelteKit application using TypeScript requires setting up the Firebase configuration and initializing the Firebase app. Here's a step-by-step guide to accomplish this:

Creating a Firebase Configuration File

1. Obtain Firebase Configuration:
   • Access your project in the

Firebase Console

(https://console.firebase.google.com/).

• Find 'Project settings' in the gear icon menu next to 'Project Overview'.
• Under the 'Your apps' section, locate the 'Firebase SDK snippet' and choose the 'Config' tab to reveal your configuration keys.

2. Create and Type the Configuration File:
   • In your SvelteKit project, go to src/lib.
   • Create a new TypeScript file, firebase.ts.
   • Define and export a constant for your Firebase configuration. You can also create a type for this configuration for better TypeScript support:

// src/lib/firebase.ts
export type FirebaseConfig = {
  apiKey: string,
  authDomain: string,
  // ... other Firebase config properties as string types
};

export const firebaseConfig: FirebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  // ... other actual config values
};

Replace the placeholders with your Firebase project's specific configuration details.

Initializing Firebase in Your Application

1. Import Firebase App:

   • Start by importing Firebase app initialisation in a central file like src/routes/+layout.svelte.

2. Import Your Firebase Configuration:

   • Import the firebaseConfig object you've just defined.

3. Initialize Firebase:

   • Utilize initializeApp from Firebase to bootstrap the Firebase application.

Here's the TypeScript code for initializing Firebase:

// Example file: src/routes/__layout.svelte
import { initializeApp } from 'firebase/app';
import type { FirebaseApp } from 'firebase/app';
import { firebaseConfig } from '$lib/firebase';

// Initialize Firebase
const firebaseApp: FirebaseApp = initializeApp(firebaseConfig);

This setup ensures your SvelteKit application is correctly connected to the Firebase needed for accessing Firebase services, including Firebase Cloud Messaging, in a type-safe manner.

Step 3: Implementing Firebase Messaging with TypeScript in Svelte

Integrating Firebase Messaging into a Svelte component using TypeScript involves several steps, including requesting notification permissions, acquiring a token, and handling incoming messages. Here's a detailed guide with appropriate comments:

1. Import Necessary Modules and Initialize Variables:
   • Start by importing modules from Svelte, Firebase Messaging, and the toast library.
   • Define variables for the token and an array to store messages.

import { onMount } from 'svelte';
import { getMessaging, getToken, onMessage, Messaging } from 'firebase/messaging';
import { firebaseConfig } from '$lib/firebase';
import toast from 'svelte-french-toast';

// token will store the Firebase Cloud Messaging token
let token: string | null = null;

// messages will hold the array of messages received
let messages: any

=

; // Consider defining a more specific type for your message structure

2. **Request Notification Permission and Get Token:**
   - When the component is mounted, request the user's permission for notifications.
   - If granted, use `getToken` to fetch the Firebase Cloud Messaging token.
   - Replace `'YOUR_VAPID_KEY'` with the VAPID key from your Firebase project settings.

```typescript
onMount(() => {
  // Initialize messaging with our Firebase configuration
  const messaging: Messaging = getMessaging(initializeApp(firebaseConfig));

  // Request permission for notifications
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      // Permission granted: Get the token
      getToken(messaging, { vapidKey: 'YOUR_VAPID_KEY' })
        .then(fetchedToken => {
          // Store the received token
          token = fetchedToken;
        })
        .catch(error => {
          // Handle any errors in fetching the token
          console.error('Error fetching token:', error);
        });
    }
  });
});

3. Handle Incoming Messages:
   • Use the onMessage method to handle messages when the app is open and in the foreground.
   • Display the message content using the toast notification.

// Listen for messages when the app is open
onMessage(messaging, (payload) => {
  // Add the new message to the messages array
  messages.push(payload);

  // Display the message content as a toast notification
  toast.success(`${payload.notification?.title}: ${payload.notification?.body}`);
});

This setup creates a robust mechanism for handling Firebase Cloud Messaging in a Svelte application using TypeScript. It ensures that you can receive and display messages to the user while maintaining the type safety and features provided by TypeScript. Remember to replace 'YOUR_VAPID_KEY' with the VAPID key you obtained from your Firebase project settings.

Step 4: Enhancing User Interface for Notifications with Svelte

Rather than have the browser pop-up a message with no context, we will improve the user experience by implementing a dialog to help users understand why they would want to enable the feature before it is asked for.

Creating a Button to Trigger the Modal

1. Import Flowbite Components:

   • Import Button and Modal components from flowbite-svelte to use in your UI.

2. Define State Variables:

   • Declare a reactive variable, open, to control the visibility of the modal.

<script lang="ts">
  import { Button, Modal } from 'flowbite-svelte';
  let open: boolean = false;
</script>

3. Add a Button to Enable Notifications:
   • Implement a Button component that, when clicked, sets open to true, triggering the modal display.

<Button on:click={() => (open = true)}>Enable Notifications</Button>

Designing the Modal for Notification Permission

1. Modal Implementation:

   • Utilize the Modal component to create a dialog box that provides information about notifications and the option to enable them.
   • The bind:open attribute binds the modal's visibility to the open state variable.

2. Content and Action Button:

   • Inside the modal, provide explanatory text to inform users about the purpose of enabling notifications. This should explain why the web visitor should accept notifications.
   • Include another Button component inside the modal to trigger the actual permission request function (requestNotificationPermission).

<Modal title="Enable Notifications" bind:open>
  <p>Get instant alerts for new content by enabling notifications.</p>
  <Button on:click={requestNotificationPermission}>Enable Notifications</Button>
</Modal>

Implementing the requestNotificationPermission Function

1. Define the Function:
   • In your script, define the requestNotificationPermission function, which should handle the logic for requesting notification permissions (as detailed in Step 3).

<script lang="ts">
  // ... existing imports and variables

  function requestNotificationPermission() {
    // Logic for requesting notification permissions
  }
</script>

With this setup, your SvelteKit application provides a user-friendly interface that invites users to enable notifications. The modal approach ensures that the request for notification permissions is both non-intrusive and contextually clear, enhancing the overall user experience.

Step 5: Detailed Implementation of Notification Permission Request

In this step, we'll implement a function, requestNotificationPermission, that will handle the process of requesting notification permissions from the user. This function is crucial for obtaining the necessary permissions to send push notifications via Firebase Cloud Messaging.

Function Implementation

1. Implementing the Permission Request Logic:
   • Start by declaring the requestNotificationPermission function.
   • Use the Notification.requestPermission method to prompt the user for permission to send notifications.
   • This method returns a promise that resolves to the user's response.

function requestNotificationPermission() {
  Notification.requestPermission().then(permission => {
    // Handle the user's response
  });
}

2. Handling User's Response:
   • Analyze the response returned by Notification.requestPermission.
   • If the permission is granted ('granted'), proceed to fetch the FCM token.
   • Handle other scenarios, such as permission denial ('denied') or default (not yet decided) accordingly.

function requestNotificationPermission() {
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      // User has granted permission
      console.log('Notification permission granted.');

      // Fetch the FCM token
      const messaging = getMessaging(initializeApp(firebaseConfig));
      getToken(messaging, { vapidKey: 'YOUR_VAPID_KEY' })
        .then(fetchedToken => {
          // Store and use the fetched token
          token = fetchedToken;
          console.log('Token:', token);
        })
        .catch(error => {
          console.error('Error fetching token:', error);
        });
    } else if (permission === 'denied') {
      // User has denied permission
      console.error('Notification permission denied.');
    }
  });
}

Incorporating the Function into Your Component

1. Adding the Function to Your Svelte Component:
   • Ensure that requestNotificationPermission is defined within the script tag of your Svelte component where you manage notifications.
   • This function will be called when the user clicks the 'Enable Notifications' button inside the modal, as set up in Step 4.

Notes and Best Practices

• VAPID Key: Remember to replace 'YOUR_VAPID_KEY' with the actual VAPID key from your Firebase project settings.
• User Experience: It’s important to consider the user experience when requesting permissions. Avoid asking for permissions immediately upon page load. Instead, consider a context where users understand why they are being asked to enable notifications.

Following these steps, you’ll have implemented a robust system for requesting notification permissions within your SvelteKit application, paving the way for effective user engagement through Firebase Cloud Messaging.

Conclusion

This can easily be extended to store the token against the user account, allowing user-based notifications to be sent.

With these steps, you have accomplished a significant integration of Firebase Cloud Messaging (FCM) push notifications into your SvelteKit application. This achievement brings a host of benefits and enhancements to your project:

1. Enhanced User Engagement: By implementing push notifications, your application can actively engage users with real-time updates and alerts. This feature is crucial for keeping your audience informed and connected to your content or services.

2. Interactive User Experience: Using Svelte components like modals and buttons for notification permissions offers an interactive and user-friendly experience. This approach ensures that users are informed about the notifications and involved in the permission process, leading to a higher acceptance rate.

3. Responsive Notifications: The integration allows your application to respond to events and messages quickly, providing users with immediate and relevant information. This responsiveness is critical in maintaining user interest and satisfaction.

4. Technical Advancement: Leveraging Firebase Cloud Messaging within a SvelteKit environment demonstrates an advanced use of modern web development technologies and practices. This integration showcases your ability to combine powerful back-end services with efficient front-end frameworks.

5. Scalability and Flexibility: Firebase FCM offers a scalable solution to handle a large number of notifications and users. As your application grows, this integration ensures your notification system will scale as well, providing the flexibility to adapt to changing requirements.

In conclusion, successfully integrating Firebase FCM into your SvelteKit application marks a significant step forward in developing dynamic, user-centric web applications. This feature improves user experience and equips your application with the tools to stay ahead in the fast-evolving digital landscape. It is expected that in 2024, mobile browsers will also fully support push notifications, making them a great way to keep people updated with news and information from your web application.