Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating the Cloud Messaging docs for Angular Fire modular #3516

Merged
merged 3 commits into from
May 14, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
196 changes: 187 additions & 9 deletions docs/messaging.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,198 @@

# Cloud Messaging

The FCM JavaScript API lets you receive notification messages in web apps running in browsers that support the Push API.
Firebase FCM allows you to register devices with unique FCM tokens, that you can later programtically send notifications to using Firebase Cloud Functions. It is up to the application to update these tokens in Firebase if you want to use them in other layers of your application, i.e send a notification to all administrators, etc. In that case, you would likely want to store your fcm tokens on your user collection, or a sub collection or another collection with different permissions.

[Learn More](https://firebase.google.com/docs/cloud-messaging/)
# Provide Messaging to your existing application

## Dependency Injection
```
import { getMessaging, provideMessaging } from "@angular/fire/messaging";

YADA YADA YADA
bootstrapApplication(AppComponent, {
providers: [
...,
provideMessaging(() => getMessaging())
),
],
});
```

## Firebase API
# Create a Firebase Messaging Service Worker

Something something look at the offical docs
There are two parts to Firebase Messaging, a Service Worker and the DOM API. Angular Fire Messaging allows you to request permission, get tokens, delete tokens, and subscribe to messages on the DOM side. To register to receive notifications you need to set up the Service Worker. [The official Firebase documentation for setting up the details exactly how to do that](https://firebase.google.com/docs/cloud-messaging/js/client).

## Convenience observables
#### Create your firebase-messaging-sw.js file in your src/assets folder

### Foo
*Note: When copying the below file, make sure your firebase version in your installation matches the version your are importing from below*

bar baz
It may be wise to use file replacements or environments here for different environments

```
// This sample application is using 9.22, make sure you are importing the same version

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getMessaging } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-messaging-sw.js";

const firebaseApp = initializeApp({
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
});

const messaging = getMessaging(firebaseApp);
```

# Example messaging service

```
import { Injectable } from "@angular/core";
import { Messaging, getToken, onMessage, deleteToken } from "@angular/fire/messaging";
import { Observable, tap } from "rxjs";

@Injectable({
providedIn: "root",
})
export class FcmService {
constructor(private msg: Messaging){
Notification.requestPermission().then(
(notificationPermissions: NotificationPermission) => {
if (notificationPermissions === "granted") {
console.log("Granted");
}
if (notificationPermissions === "denied") {
console.log("Denied");
}
});
navigator.serviceWorker
.register("/assets/firebase-messaging-sw.js", {
type: "module",
})
.then((serviceWorkerRegistration) => {
getToken(this.msg, {
vapidKey: `an optional key generated on Firebase for your fcm tokens`,
serviceWorkerRegistration: serviceWorkerRegistration,
}).then((x) => {
console.log('my fcm token', x);
// This is a good place to then store it on your database for each user
});
});
}
this.message$ = new Observable((sub) => onMessage(this.msg, (msg) =>
sub.next(msg))).pipe(
tap((msg) => {
console.log("My Firebase Cloud Message", msg);
})
);
}
deleteToken(){
// We can also delete fcm tokens, make sure to also update this on your firestore db if you are storing them as well
await deleteToken(this.msg);
}
```

# Testing and Sending Notifications

Firebase will allow you to send a test notification under Engage > Messaging > New Campaign > Notifications. Here you can click send a test message. Additionally, you can send them programmatically through Firebase cloud functions.

Here is a barebones Node example:

```
export const sendTestMessage = onRequest(async (_, res) => {
try {
const message = {
notification: {
title: "Test Title",
body: "Test Body",
},
token: "your token here, you can store these and retreive as you please",
};
await admin.messaging().send(message);
res.sendStatus(200);
} catch (error) {
console.error(error);
res.sendStatus(500);
}
});
```

Here is a Node example that listens for a new comment on a collection, then sends a notification, and also adds it to a cache on Firebase so users can click through them.

```
exports.onPostReply =
onDocumentCreated("comments/{commentId}", async (event) => {
if (!event) throw new Error("No event found for document creation");
const snapshot = event.data;
if (!snapshot) {
throw new Error("No data associated with the event");
}
const data = snapshot.data();
if (!data.postId) {
throw new Error("No post ID found");
}
const postRef = await firestore.collection("posts").doc(data.postId).get();
const postData = postRef.data();
if (!postData) {
throw new Error("No postData found");
}
// userUid will be the post author's id.
const {userUid} = postData;
if (!userUid) {
throw new Error(
"Could not find the userUid for the post author for post reply"
);
}
const messageForNotification = {
title: "You have a new reply on your post",
body: "",
};
await createNotificationAndCache(messageForNotification, userUid);
});

// If you want to cache notifications a number of times, abstracting this
// to a function can bring a lot of value.

interface NotificationProps {
title: string;
body: string;
}

async function createNotificationAndCache(
notificationProps: NotificationProps, userAuthUid: string) {
const userRef = await firestore.collection("users").where("authUid", "==",
userAuthUid).get();
const userData = userRef.docs[0].data();

const promises: Promise<any>[] = [];
// This sample application has seperate fcm tokens for web and mobile
if (userData.mobileToken) {
const message = {
notification: notificationProps,
token: userData.mobileToken,
};
const promise = admin.messaging().send(message);
promises.push(promise);
}
if (userData.webToken) {
const message = {
notification: notificationProps,
token: userData.webToken,
};
const promise = admin.messaging().send(message);
promises.push(promise);
}

const notificationCacheValue = {
userAuthUid: userAuthUid,
tokenTitle: notificationProps.title,
tokenBody: notificationProps.body,
isActive: true, // This determines whether a notification has been seen
};

promises.push(
firestore.collection("notificationCache").add(notificationCacheValue));

await Promise.all(promises);
} ```