Skip to content

alicomert/FCM-Web-Push-Token-Easy-Example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Certainly! Below is a Markdown template for your README.md file that you can use on GitHub. This template includes an overview, setup instructions, and usage details tailored to your FCM Web Push Token example. You can adjust it as needed to fit your project's specifics.

FCM Web Push Token Example

This repository contains a simple example demonstrating how to integrate Firebase Cloud Messaging (FCM) for web push notifications. The example includes two main files: index.html, for the web application setup, and sw.js, for the Service Worker responsible for handling push notifications.

Overview

The purpose of this example is to show how you can implement FCM in a web application to send push notifications to users. It covers setting up Firebase in your web app, registering a Service Worker, and requesting a token to send notifications.

Setup

Before you begin, ensure you have a Firebase project set up. Follow these steps to configure the project:

  1. Go to the Firebase Console.
  2. Create a new project or select an existing one.
  3. Register your web application with Firebase.
  4. Obtain your Firebase configuration object.

Obtaining a VAPID Key

The Voluntary Application Server Identification (VAPID) key is essential for authenticating your application's server with push services. It's used when obtaining the push notification token. Here's how to generate and find your VAPID key:

  1. Navigate to the Cloud Messaging tab in your Firebase project settings.
  2. Under the Web configuration section, you will find your Web Push certificates.
  3. Here, you can generate a new pair of keys if you haven't already. Once generated, your public key is your VAPID key.

Include your VAPID key in the index.html file as follows:

getToken(messaging, { serviceWorkerRegistration: registration, vapidKey: 'YOUR_VAPID_KEY' })
### Configuration

Replace the placeholder values in the firebaseConfig object in index.html with your actual Firebase project configuration values. Also, replace 'YOUR_VAPID_KEY' in index.html with your VAPID key.

const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID",
    measurementId: "YOUR_MEASUREMENT_ID"
};

Service Worker

Ensure the sw.js file is located in the root directory of your project so it can be correctly registered by the web application.

Usage

To use this example, simply serve the index.html file through a local or remote web server. If you're testing this locally, you can use simple server solutions like Python's HTTP server module or npm's http-server package.

When the index.html page is loaded in a browser, it attempts to register the Service Worker and request a push notification token. Successful retrieval and display of the token in the console indicate that the setup is correct.

Contributing

Contributions to this project are welcome! Please feel free to submit pull requests or create issues for any bugs or improvements.

License

This project is open source and available under the MIT License.


Remember to include any additional sections or details relevant to your project. This README provides a basic structure that introduces the project, explains setup and configuration steps, outlines usage, and encourages contributions.

About

Firebase Push Notification

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published