Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(firebase-guide): update guide with Capacitor 2.0 changes #2598

Merged
merged 1 commit into from
Mar 18, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 29 additions & 15 deletions site/docs-md/guides/push-notifications-firebase.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -30,27 +30,21 @@ 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:

```bash
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
Expand All @@ -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
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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) => {
Expand All @@ -180,6 +193,7 @@ export class HomePage implements OnInit {
alert('Push action performed: ' + JSON.stringify(notification));
}
);
}
}
```

Expand Down