I’ve created wrappers around the Capacitor plugin methods. Here is my code (I use Vue).
On app boot (called in main.ts in a Vue app):
PushNotifications.initialize() // In push-notifications.ts
push-notifications.ts
This probably could have been refactored into my-push-notifications.ts 
import { MyPushNotifications } from '@/notifications/my-push-notifications'
import router from '@/router'
import { useAppStore } from '@/stores/app-store'
export class PushNotifications {
public static initialize(): void {
MyPushNotifications.initialize()
router.isReady().then(() => {
const store = useAppStore()
if (store.isLoggedIn) {
MyPushNotifications.updateToken()
}
})
}
}
my-push-notifications.ts
import { toastControllerInstance } from '@/instances'
import { useAppStore } from '@/stores/app-store'
import { DateTimeHelper } from '@/utils/date-time-helper'
import { DeviceInfoHelper } from '@/utils/device-info-helper'
import { ToastType } from '@/utils/toast-controller'
import { PermissionState } from '@capacitor/core'
import {
ActionPerformed,
PushNotifications,
PushNotificationSchema,
Token,
} from '@capacitor/push-notifications'
export class MyPushNotifications {
public static async initialize(): Promise<void> {
if (!DeviceInfoHelper.isMobileApp()) {
return
}
await this.clearListeners()
this.addListeners()
this.addChannels()
}
public static async requestPermissions(): Promise<PermissionState> {
if (!DeviceInfoHelper.isMobileApp()) {
return 'granted'
}
const requestResult = await PushNotifications.requestPermissions()
if (requestResult.receive === 'granted') {
this.register()
}
return requestResult.receive
}
public static async register(): Promise<void> {
await PushNotifications.register()
}
public static async updateToken(): Promise<void> {
if (!DeviceInfoHelper.isMobileApp()) {
return
}
if (await this.hasPermission()) {
this.register()
}
}
public static async getPermissionStatus(): Promise<PermissionState> {
return (await PushNotifications.checkPermissions()).receive
}
public static async hasPermission(): Promise<boolean> {
if ((await MyPushNotifications.getPermissionStatus()) === 'granted') {
return true
}
return false
}
public static clearTokenFromStore(): void {
const appStore = useAppStore()
appStore.setPushNotificationToken({
token: '',
lastUpdated: DateTimeHelper.minDate(),
})
}
private static async clearListeners(): Promise<void> {
await PushNotifications.removeAllListeners()
}
private static async addListeners(): Promise<void> {
await PushNotifications.addListener('registration', (token: Token) => {
const appStore = useAppStore()
if (!appStore.isLoggedIn) {
return
}
if (
token.value !== appStore.pushNotificationToken.token ||
DateTimeHelper.isTimeToUpdate(
appStore.pushNotificationToken.lastUpdated,
2419200, // 4 weeks
)
) {
appStore.savePushNotificationToken(token.value)
}
})
await PushNotifications.addListener('registrationError', () => {
toastControllerInstance.createWithJustMessage(
'There was an error registering push notifications',
ToastType.Error,
)
})
// Listens for notifications when the app is in the foreground
await PushNotifications.addListener(
'pushNotificationReceived',
async (notification: PushNotificationSchema) => {
// Stuff
},
)
// Method called when tapping on a notification
await PushNotifications.addListener(
'pushNotificationActionPerformed',
(notification: ActionPerformed) => {
if (notification.actionId === 'tap') {
// Stuff
}
},
)
}
private static addChannels(): void {
PushNotifications.createChannel({
id: 'example',
name: 'example',
description: 'Example',
importance: 3,
})
PushNotifications.createChannel({
id: 'example1',
name: 'example1',
description: 'Example 1',
importance: 3,
})
}
}
On account creation or login, the following gets called:
// Clear push notification token to force a refresh
MyPushNotifications.clearTokenFromStore()
MyPushNotifications.updateToken()
We call MyPushNotifications.requestPermissions() after the user creates an account or logins in. We call it from a button within a modal that pops up explaining why the user should grant push notifications. This modal only shows if they haven’t already granted/rejected permission by calling MyPushNotifications.getPermissionStatus().