OneSignal is a Free, high volume and reliable push notification service for websites and mobile applications. Setting and using this module is a little tricky as OneSignal requires to register its own Service worker.
-
Follow steps to install pwa module
-
Add
@nuxtjs/onesignal
dependency to your project
yarn add @nuxtjs/onesignal # or npm install @nuxtjs/onesignal
- Add
@nuxtjs/onesignal
BEFORE@nuxtjs/pwa
to themodules
section ofnuxt.config
:
modules: [
'@nuxtjs/onesignal',
'@nuxtjs/pwa'
]
- Add
oneSignal
options tonuxt.config
:
// Options
oneSignal: {
init: {
appId: 'YOUR_APP_ID',
allowLocalhostAsSecureOrigin: true,
welcomeNotification: {
disable: true
}
}
}
See references below for all init
options.
- Add
OneSignalSDK*
to.gitignore
This module exposes oneSignal as $OneSignal
everywhere. So you can call it.
Please note that because of async loading of OneSignal SDK script, every action should be pushed into $OneSignal
stack.
// Inside page components
this.$OneSignal.push(() => {
this.$OneSignal.isPushNotificationsEnabled((isEnabled) => {
if (isEnabled) {
console.log('Push notifications are enabled!')
} else {
console.log('Push notifications are not enabled yet.')
}
})
})
// Using window and array form
window.$OneSignal.push(['addListenerForNotificationOpened', (data) => {
console.log('Received NotificationOpened:', data )}
]);
By default this modules ships with latest SDK dist.
You can use recommended CDN by using cdn: true
or changing it to a custom value using OneSignalSDK
.
oneSignal: {
// Use CDN
cdn: true,
// Use any custom URL
OneSignalSDK: 'https://cdn.onesignal.com/sdks/OneSignalSDK.js'
}
- Web Push SDK Reference - Available options and API calls
- Customize Permission Messages
- Thanks for Subscribing Notifications
- Product overview - More info about OneSignal
- Web Push SDK Setup - Setup guides for in-depth reading what this modules does.