v5 から v6 への移行
このガイドは、Amplify JavaScript v5 のプッシュ通知 API を新しい v6 のプッシュ通知 API に移行するのに役立ちます。
インストール
v6 の導入により、JavaScript ポリフィルとコア ネイティブ モジュールは @aws-amplify/react-native パッケージの一部になりました。必要な依存関係は次のように変更されました。
Instructions for React Native version 0.72 and below
@aws-amplify/react-native requires a minimum iOS deployment target of 13.0 if you are using react-native version less than or equal to 0.72. Open the Podfile located in the ios directory and update the target value:
- platform :ios, min_ios_version_supported + platform :ios, 13.0- プッシュ通知には
amazon-cognito-identity-jsと@react-native-community/netinfoは不要になりました。 react-native-url-polyfillを別途インストールする必要はなくなりました。@aws-amplify/react-nativeが必須になりました。
npm install aws-amplify @aws-amplify/react-native @aws-amplify/rtn-push-notification @react-native-async-storage/async-storage react-native-get-random-valuesnpm install aws-amplify @aws-amplify/rtn-push-notification amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfillさらに、ポリフィルのインポートをアプリケーションのエントリーポイント ファイルに追加する必要がなくなりました。
// Example index.js- import 'react-native-get-random-values';- import 'react-native-url-polyfill/auto';Push.enable
enable API は v6 では initializePushNotifications に名前が変更され、API の機能をより明確にしていますが、動作は変更されていません。この API は aws-amplify/push-notifications パスからエクスポートされます。
import { Amplify } from 'aws-amplify';import amplifyconfig from './amplifyconfiguration.json';import { initializePushNotifications } from 'aws-amplify/push-notifications';
Amplify.configure(amplifyconfig);initializePushNotifications();import { Amplify, Notifications } from 'aws-amplify';import awsconfig from './src/aws-exports';
Amplify.configure(awsconfig);Notifications.Push.enable();権限のリクエスト
Push.getPermissionStatus
v6 の getPermissionStatus API の動作は変更されていませんが、この API は aws-amplify/push-notifications パスからエクスポートされるようになり、返されるステータスが次のように更新されました。
- ステータスが SCREAMING_SNAKE_CASE 規則から camelCase に変更されました。
- 返されるステータスは
PushNotificationPermissionStatus列挙型ではなく文字列になりました。
出力
V5
PushNotificationPermissionStatus.SHOULD_REQUESTPushNotificationPermissionStatus.SHOULD_EXPLAIN_THEN_REQUESTPushNotificationPermissionStatus.GRANTEDPushNotificationPermissionStatus.DENIEDV6
'shouldRequest' | 'shouldExplainThenRequest' | 'granted' | 'denied'import { getPermissionStatus } from 'aws-amplify/push-notifications';
const status = await getPermissionStatus();import { Notifications } from 'aws-amplify';
const status = await Notifications.Push.getPermissionStatus();Push.requestPermissions
v6 の requestPermissions API の動作は変更されていませんが、aws-amplify/push-notifications パスからエクスポートされるようになりました。
import { requestPermissions } from 'aws-amplify/push-notifications';
const permissions = { sound: false, badge: false};
const arePermissionsGranted = await requestPermissions(permissions);import { Notifications } from 'aws-amplify';
const permissions = { sound: false, badge: false};
const arePermissionsGranted = await Notifications.Push.requestPermissions(permissions);Push.onTokenReceived
v6 の onTokenReceived API の動作は変更されていませんが、aws-amplify/push-notifications パスからエクスポートされるようになりました。
import { onTokenReceived } from 'aws-amplify/push-notifications';
const myTokenReceivedHandler: OnTokenReceivedInput = (token) => { // Do something with the received token};
const listener = onTokenReceived(myTokenReceivedHandler);
listener.remove(); // Remember to remove the listener when it is no longer neededimport { Notifications } from 'aws-amplify';
const myTokenReceivedHandler = (token) => { // Do something with the received token};
const listener = Notifications.Push.onTokenReceived(myTokenReceivedHandler);
listener.remove(); // Remember to remove the listener when it is no longer needed通知とのやり取り
v6 でのプッシュ通知とのやり取りの動作は変更されていません。引き続き onNotificationReceivedInForeground、onNotificationReceivedInBackground、onNotificationOpened および getLaunchNotification API を使用してそれらと対話します。ただし、これらの API は aws-amplify/push-notifications パスからエクスポートされるようになりました。
Push.onNotificationReceivedInForeground
import { onNotificationReceivedInForeground } from 'aws-amplify/push-notifications';
const myNotificationReceivedHandler = (notification) => { // Respond to the received push notification message in real time};
const listener = onNotificationReceivedInForeground(myNotificationReceivedHandler);
listener.remove(); // Remember to remove the listener when it is no longer neededimport { Notifications } from 'aws-amplify';
const myNotificationReceivedHandler = (notification) => { // Respond to the received push notification message in real time};
const listener = Notifications.Push.onNotificationReceivedInForeground( myNotificationReceivedHandler);
listener.remove(); // Remember to remove the listener when it is no longer neededPush.onNotificationReceivedInBackground
import { onNotificationReceivedInForeground } from 'aws-amplify/push-notifications';
const myNotificationReceivedHandler = (notification) => { // Process the received push notification message in the background};
const listener = onNotificationReceivedInBackground(myNotificationReceivedHandler);
listener.remove(); // Depending on your use case, you may not need to remove this listenerimport { Notifications } from 'aws-amplify';
const myNotificationReceivedHandler = (notification) => { // Process the received push notification message in the background};
const listener = Notifications.Push.onNotificationReceivedInBackground( myNotificationReceivedHandler);
listener.remove(); // Depending on your use case, you may not need to remove this listenerPush.onNotificationOpened
import { onNotificationOpened } from 'aws-amplify/push-notifications';
const myNotificationOpenedHandler = (notification) => { // Take further action with the opened push notification message};
const listener = onNotificationOpened(myNotificationOpenedHandler);
listener.remove(); // Remember to remove the listener when it is no longer neededimport { Notifications } from 'aws-amplify';
const myNotificationOpenedHandler = (notification) => { // Take further action with the opened push notification message};
const listener = Notifications.Push.onNotificationOpened( myNotificationOpenedHandler);
listener.remove(); // Remember to remove the listener when it is no longer neededPush.getLaunchNotification
import { getLaunchNotification } from 'aws-amplify/push-notifications';
const launchNotification = await getLaunchNotification();import { Notifications } from 'aws-amplify';
const launchNotification = await Notifications.Push.getLaunchNotification();Push.identifyUser
v6 の identifyUser API の動作は変更されていませんが、aws-amplify/push-notifications パスからエクスポートされるようになりました。さらに、入力パラメータが次のように更新されました。
- 2 つの位置位置パラメータ (
userIdとuserInfoに対応) の代わりに、3 つの名前付きパラメータuserId、userProfileおよびoptions(これらのプロパティを含む単一の入力オブジェクト) が存在するようになりました。 - 以前
userInfoの下にあったattributesプロパティがcustomPropertiesに名前変更され、userProfileの下にあるようになりました。 optionsの下に新しいuserAttributesプロパティがあります。userProfileの下に新しい便利なプロパティname、emailおよびplanがあります。これらのプロパティは自動的にcustomPropertiesにマージされます。
入力
V5
userId: string;userInfo: { attributes?: Record<string, string[]>; demographic?: { appVersion?: string; locale?: string; make?: string; model?: string; modelVersion?: string; platform?: string; platformVersion?: string; timezone?: string; }; location?: { city?: string; country?: string; latitude?: number; longitude?: number; postalCode?: string; region?: string; }; metrics?: Record<string, number>;}V6
input: { userId: string; userProfile: { customProperties?: Record<string, string[]>; demographic?: { appVersion?: string; locale?: string; make?: string; model?: string; modelVersion?: string; platform?: string; platformVersion?: string; timezone?: string; }; email?: string; location?: { city?: string; country?: string; latitude?: number; longitude?: number; postalCode?: string; region?: string; }; metrics?: Record<string, number>; name?: string; plan?: string; }; options?: { userAttributes?: Record<string, string[]>; };}import { identifyUser } from 'aws-amplify/in-app-messaging';
const identifyUserInput = { userId: 'user-id', userProfile: { email: 'example@service.com', name: 'User A', plan: 'Standard' customProperties: { hobbies: ['cooking', 'knitting'], }, demographic: { appVersion: '1.0.0', locale: 'en_US', make: 'Apple', model: 'iPhone', modelVersion: '13', platform: 'iOS', platformVersion: '15', timezone: 'Americas/Los_Angeles' }, location: { city: 'Seattle', country: 'US', postalCode: '98121', region: 'WA', latitude: 0.0, longitude: 0.0 }, metrics: { logins: 157 }, },};
await identifyUser(identifyUserInput);import { Notifications } from 'aws-amplify';const { InAppMessaging } = Notifications;
const userId = 'user-id';const userInfo = { address: 'example@service.com', attributes: { hobbies: ['cooking', 'knitting'], }, demographic: { appVersion: '1.0.0', locale: 'en_US', make: 'Apple', model: 'iPhone', modelVersion: '13', platform: 'iOS', platformVersion: '15', timezone: 'Americas/Los_Angeles' }, location: { city: 'Seattle', country: 'US', postalCode: '98121', region: 'WA', latitude: 0.0, longitude: 0.0 }, metrics: { logins: 157 }, optOut: 'NONE'};
await InAppMessaging.identifyUser(userId, userInfo);アプリバッジ数を追加する
v6 でのアプリバッジ数の取得と更新の動作は変更されていません。引き続き getBadgeCount および setBadgeCount API を使用します。ただし、これらの API は aws-amplify/push-notifications パスからエクスポートされるようになりました。
Push.getBadgeCount
import { getBadgeCount } from 'aws-amplify/push-notifications';
const count = await getBadgeCount();import { Notifications } from 'aws-amplify';
const count = await Notifications.Push.getBadgeCount();Push.setBadgeCount
import { setBadgeCount } from 'aws-amplify/push-notifications';
setBadgeCount(42);import { Notifications } from 'aws-amplify';
Notifications.Push.setBadgeCount(42);