Using Expo Push Notification Service, I currently send Push Notification to all users, which are anonymous. The only data I am collecting and writing to a Firebase Database is the "ExponentPushToken" that identifies a unique device for sending notifications using expo's service. I have been sending Push Notification in terminal using the following command:
curl -H "Content-Type: application/json" -X POST "https://exp.host/--/api/v2/push/send" -d '{
"to": [
"ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]",
"ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]"
],
"title": "Hello World!",
"body": "Example text here!!",
"sound": "default"
}'
Now, I presume this is not the most flexible way to send notifications, but it allowed me to QUICKLY hit the ground running. My goal now, is to be able to send users that interact with (click/press on) a particular push notification when receiving it on their device to a specific "state" (webview of a particular URL) within the app... I have read through most of the documentation, but I believe some of the content is a bit beyond my ability to interpret regarding what is necessary to make this happen (E.g. setting up Listener's, etc). Wondering if anyone can help simplify implementing this for me? Even if its a bit "janky", I am open to anything!
@AleMux answer nudged me in the right direction, but for the sake of specificity here is how one can accomplish the desired outcome posed in the question.
Using Expo's Push Notification API, you'll want to ensure you have the appropriate listeners in place, which are already referenced in their API Snack/Example (https://docs.expo.dev/versions/latest/sdk/notifications/#api). For simplicity, this is what we need to focus on for this functionality:
import * as Notifications from "expo-notifications";
const [expoPushToken, setExpoPushToken] = useState("");
const [notification, setNotification] = useState(false);
const notificationListener = useRef();
const responseListener = useRef();
const [page, setPage] = useState("");
const [baseURI] = useState("https://www.google.com");
//---A bunch of your app code will presumably be here as to what your app will render, but we'll focus in on the specific needs for this WebView---//
<WebView source={{uri: `${baseURI}/${page}`}} ref={webviewRef}/>
notificationListener.current =
Notifications.addNotificationReceivedListener((notification) => {
setNotification(notification);
const onInteraction = notification.request.content.data.event;
setPage(onInteraction);
});
responseListener.current =
Notifications.addNotificationResponseReceivedListener((response) => {
console.log(response);
const onInteraction = response.notification.request.content.data.event;
setPage(onInteraction);
});
notification.request.content.data.event
. In this case the CURL HTTP POST request would look like this to setPage
of webview to a page a page within the baseURI
domain that is determined by the information sent to the listener above via the information located in the "data" field of the post request. The location data.event
referenced above references the object sent like this "data": {"event": "insert page info here"}
. Here is a working example of the complete CURL command:curl -H "Content-Type: application/json" -X POST "https://exp.host/--/api/v2/push/send" -d '{
"to": "ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]",
"title": "You have new mail messages!",
"body": "Check them out here in the app by interacting with this notification.",
"sound": "default",
"data": {"event": "mail"}
}'
When the end user interacts with the push notification (ie. presses the badge) the app will open and webview will render ${baseURI}/${page}
which in this case, would be https://www.google.com/mail