@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:
- Ensure you've you got the API installed/imported:
import * as Notifications from "expo-notifications";
- Setup references to handle notifications and notification responses/interactions:
const [expoPushToken, setExpoPushToken] = useState("");
const [notification, setNotification] = useState(false);
const notificationListener = useRef();
const responseListener = useRef();
- For this use case, we want the WebView uri to be able modified. See how this is currently working below, for context. The code below presumes you have necessary dependencies installed (ie. WebView):
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}/>
- Use the listeners shown below, which can be found/copied from the Expo Push Notification API Snack/Example. In this case I want the action to be the same if the end-user interacts with the notification whether app is in foreground, backgrounded, or killed:
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);
});
- Lastly, in our HTTP POST request (using CURL in this case) we want to pass a "data" field with a JSON Object that the listeners above can act on. The location above is mentioned regarding where the listener can collect the Object.
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
