Skip to main content

push notification with Expo - React Native APP


store expoPushToken in local storage if can't find it,
1. form screen
useEffect => fetchStorage

2. For android, download google-services.json
app.json
"googleServicesFile": "./google-services.json",

3. onSumbmit:
const input = {
...rest,
photos: JSON.stringify(photoUrls),
type: form,
accountId: ACCOUNT_ID,
expoPushToken
}

4. on api: add notification:
const pushTokens = contacts.map(contact => contact.expoPushToken)
pushNotification(pushTokens, body)

5. admin portal:
add/send notification

Test notification:
https://expo.io/notifications

steps:

  1. getting a user's Expo Push Token
  2. calling Expo's Push API with the token when you want to send a notification
  3. responding to receiving the notification in your app (maybe upon opening, you want to jump to a particular screen that the notification refers to)


Apollo Server:
yarn add expo-server-sdk

expo-server-sdk-node





import { Expo } from 'expo-server-sdk'

const pushNotification = (pushTokens, body) => {
// Create a new Expo SDK client
let expo = new Expo()

// Create the messages that you want to send to clents
let messages = []
for (let pushToken of pushTokens) {
// Each push token looks like ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]

// Check that all your push tokens appear to be valid Expo push tokens
if (!Expo.isExpoPushToken(pushToken)) {
console.error(`Push token ${pushToken} is not a valid Expo push token`)
continue
}

// Construct a message (see https://docs.expo.io/versions/latest/guides/push-notifications)
messages.push({
to: pushToken,
sound: 'default',
body: body,
data: { withSome: 'data' }
})
}

// The Expo push notification service accepts batches of notifications so
// that you don't need to send 1000 requests to send 1000 notifications. We
// recommend you batch your notifications to reduce the number of requests
// and to compress them (notifications with similar content will get
// compressed).
let chunks = expo.chunkPushNotifications(messages)
let tickets = []
;(async () => {
// Send the chunks to the Expo push notification service. There are
// different strategies you could use. A simple one is to send one chunk at a
// time, which nicely spreads the load out over time:
for (let chunk of chunks) {
try {
let ticketChunk = await expo.sendPushNotificationsAsync(chunk)
console.log(ticketChunk)
tickets.push(...ticketChunk)
// NOTE: If a ticket contains an error code in ticket.details.error, you
// must handle it appropriately. The error codes are listed in the Expo
// documentation:
// https://docs.expo.io/versions/latest/guides/push-notifications#response-format
} catch (error) {
console.error(error)
}
}
})()
}

export { pushNotification }

Android:


firebase for  push notification

Using FCM for Push Notifications

1. Client Setup:
{
  ...
  "android": {
    "googleServicesFile": "./google-services.json",
    ...
  }
}
2. Uploading Server Credentials

expo push:android:upload --api-key <your-token-here>
AAAAIckC1Mc:APA91bFqM8-bMbBChBXmEamBjai_EOsCOp0jNnRrVJhmQT1pVD7jJXQYdvceCOwXfKthN6wGoHt4L3x3mUIXMwYxgMpsMbV_pvBtChRA8j5Bvn5F2hkkOVHy-65KTP9kSsV-zvDrI4uz

Comments

Post a Comment

Popular posts from this blog

About GraphQL - Downside

Web caching complexity

File uploading. Since GraphQL doesn’t understand files, a file uploading feature is not included in its specification. You won’t have to deal with this limitation in case of REST, as there you can POST or PUT whatever content you want to.
To allow file uploads in your GraphQL web app, there are several options: using Base64 encoding. But it will make the request larger and expensive to encode/decode.making a separate API endpoint just for this purpose.using a library like Apollo for implementing the GraphQL multipart request specification.uploadFileToS3:combineResolvers( // isAuthenticated, async (parent, args, { models }) => { const { file } = awaitargs const { createReadStream, filename, mimetype, encoding } = awaitfile conststream = createReadStream() constresult = awaituploadFileToS3(filename, stream) returnresult } ),