Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

vonovak
Copy link
Contributor

@vonovak vonovak commented Apr 16, 2025

Why

Note: I ended up concluding that the extra dependencies this requires are not worth adding into the repo for everyone consuming it, so I won't be merging at this time - but the way it's done is correct and will continue to work down the line. You can follow the instructions in this PR to integrate image support (and more) into your apps. Note that npx create-target is experimental and is documented outside of the official Expo docs.

Showcase support for rich push notifications with images in the notification-tester app by implementing a Notification Service Extension for iOS. Android works out of the box.

This is in line with recently added support for images in Expo Notification Service backend expo/expo-server-sdk-node#147

Steps to follow

This requires development build, not Expo Go.

  1. Follow instructions at expo-apple-targets by running npx create-target and choose "Notification Service" target from the prompt. This generates several files that you should check in to vcs. In this PR, all of the files at path apps/notification-tester/targets/notification-service were generated by this step.
  2. Copy-paste the Swift code from here into the corresponding file generated in step 1. Swift is required for this task, service extension cannot be implemented in JS.
  3. Build and run the app

Test Plan

  1. Run the notification-tester app on an iOS device
  2. Navigate to the notification playground
  3. Send a push notification with an image using the new "Send me a push notification with an image" button
  4. Verify that the notification appears with the attached image

Checklist

  • This diff will work correctly for npx expo prebuild & EAS Build (eg: updated a module plugin).

Copy link
Contributor Author

vonovak commented Apr 16, 2025

This stack of pull requests is managed by Graphite. Learn more about stacking.

@vonovak vonovak force-pushed the vonovak/_notifications_showcase_image_attachments_in_notification-tester branch from 6a5eda6 to 123dbbc Compare April 16, 2025 13:49
@expo-bot expo-bot added the bot: suggestions ExpoBot has some suggestions label Apr 16, 2025
@vonovak vonovak requested a review from douglowder April 16, 2025 13:53
@vonovak vonovak marked this pull request as ready for review April 16, 2025 13:53
@vonovak vonovak force-pushed the vonovak/_notifications_showcase_image_attachments_in_notification-tester branch 3 times, most recently from 38f4523 to 0d8a6fd Compare April 16, 2025 14:02
@vonovak vonovak marked this pull request as draft April 16, 2025 14:05
@vonovak vonovak force-pushed the vonovak/_notifications_showcase_image_attachments_in_notification-tester branch from 0d8a6fd to 5cf9915 Compare April 16, 2025 15:52
@expo-bot expo-bot added bot: passed checks ExpoBot has nothing to complain about and removed bot: suggestions ExpoBot has some suggestions labels Apr 16, 2025
@vonovak vonovak removed the request for review from douglowder April 16, 2025 15:53
@vonovak vonovak closed this Apr 17, 2025
@BrodaNoel
Copy link
Contributor

@vonovak let me check if I understand this.
In order to implement it on my app, I should copy the content on files:

  • apps/notification-tester/targets/notification-service/Info.plist
  • apps/notification-tester/targets/notification-service/NotificationService.swift
  • apps/notification-tester/targets/notification-service/expo-target.config.js
  • apps/notification-tester/targets/notification-service/generated.entitlements

And finally adding "@bacons/apple-targets" as plugin.

What @bacons/apple-targets is? Is it a node-module? Should I add it on package.json? I don't see it added on your package-json, but I see it exists on https://www.npmjs.com/package/@bacons/apple-targets

@BrodaNoel
Copy link
Contributor

btw, one of the file contents says:

/** @type {import('@bacons/apple-targets/app.plugin').ConfigFunction} */
module.exports = config => ({
  type: "notification-service",
  entitlements: { /* Add entitlements */ },
});

Should we actually add something inside that JSON (entitlements: { /* Add entitlements */ },)?

}
]
],
"@bacons/apple-targets"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not added as dependency. Should I add it in package.json?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, @bacons/apple-targets will be added to package.json when you run npx create-target as documented in https://github.com/EvanBacon/expo-apple-targets#-how-to-use

"userInterfaceStyle": "automatic",
"newArchEnabled": true,
"ios": {
"appleTeamId": "C8D8QTF339",
Copy link
Contributor Author

@vonovak vonovak May 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

replace this with your own apple team id

@BrodaNoel
Copy link
Contributor

Please consider taking a look at my last comment in #36462, before implementing this PR.

@eriknewland
Copy link

Thank you :D implementation working for me on testflight

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bot: passed checks ExpoBot has nothing to complain about
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants