diff --git a/site/docs-md/guides/push-notifications-firebase.md b/site/docs-md/guides/push-notifications-firebase.md index 10307f4f8..11d5c55ab 100644 --- a/site/docs-md/guides/push-notifications-firebase.md +++ b/site/docs-md/guides/push-notifications-firebase.md @@ -21,7 +21,7 @@ Building and deploying iOS and Android applications using Capacitor requires a b To test push notifications on iOS, Apple requires that you have [a paid Apple Developer account](https://developer.apple.com/) and a *physical* iOS device. -## Prepare an Ionic App +## Prepare an Ionic Capacitor App If you have an existing Ionic 4 app, skip this section. If not, let's create an Ionic app first. In your preferred terminal, install the latest version of the Ionic CLI: @@ -30,13 +30,13 @@ In your preferred terminal, install the latest version of the Ionic CLI: npm install -g ionic ``` -Next, let's use the CLI to create a new Ionic 4 app based on the **blank** starter project and call it **capApp**: +Next, let's use the CLI to create a new Ionic 4 Angular app based on the **blank** starter project and call it **capApp**: ```bash -ionic start capApp blank +ionic start capApp blank --type=angular ``` -## Add Capacitor +On the prompt asking to integrate your new app with Capacitor, type `y` and press enter. That will add Capacitor and the Capacitor CLI to our new application. Once the application has been created successfully, switch to the newly created project directory: @@ -44,13 +44,7 @@ Once the application has been created successfully, switch to the newly created cd capApp/ ``` -Next, let's add Capacitor and the Capacitor CLI to our new application... - -```bash -ionic integrations enable capacitor -``` - -... and finish up by running `npx cap init`, which will allow us to fill out our app information. +Finish up by running `npx cap init`, which will allow us to fill out our app information. ```bash npx cap init @@ -59,7 +53,7 @@ npx cap init ``` ## Building the App & Adding Platforms -Before adding any native platforms to this project, the app must be built at least once. A web build creates the web assets directory that Capacitor needs (`www` folder in Ionic projects). +Before adding any native platforms to this project, the app must be built at least once. A web build creates the web assets directory that Capacitor needs (`www` folder in Ionic Angular projects). ```bash ionic build @@ -98,8 +92,17 @@ export class HomePage implements OnInit { ngOnInit() { console.log('Initializing HomePage'); - // Register with Apple / Google to receive push via APNS/FCM - PushNotifications.register(); + // Request permission to use push notifications + // iOS will prompt user and return if they granted permission or not + // Android will just grant without prompting + PushNotifications.requestPermission().then( result => { + if (result.granted) { + // Register with Apple / Google to receive push via APNS/FCM + PushNotifications.register(); + } else { + // Show some error + } + }); // On success, we should be able to receive notifications PushNotifications.addListener('registration', @@ -155,7 +158,17 @@ export class HomePage implements OnInit { ngOnInit() { console.log('Initializing HomePage'); - PushNotifications.register(); + // Request permission to use push notifications + // iOS will prompt user and return if they granted permission or not + // Android will just grant without prompting + PushNotifications.requestPermission().then( result => { + if (result.granted) { + // Register with Apple / Google to receive push via APNS/FCM + PushNotifications.register(); + } else { + // Show some error + } + }); PushNotifications.addListener('registration', (token: PushNotificationToken) => { @@ -180,6 +193,7 @@ export class HomePage implements OnInit { alert('Push action performed: ' + JSON.stringify(notification)); } ); + } } ```