Skip to content

nuxt-community/onesignal-module

Folders and files

NameName
Last commit message
Last commit date

Latest commit

481849c · Jul 17, 2023

History

8 Commits
Apr 16, 2020
Jan 23, 2021
Jan 23, 2021
Jan 23, 2021
Apr 16, 2020
Jan 23, 2021
Jan 23, 2021
Jan 23, 2021
Apr 16, 2020
Oct 6, 2020
Apr 16, 2020
Apr 16, 2020
Apr 16, 2020
Jan 23, 2021
Jan 23, 2021
Apr 16, 2020
Jan 23, 2021
Jan 23, 2021

Repository files navigation

OneSignal Module

npm version npm downloads Github Actions CI Codecov License

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.

Setup

  1. Follow steps to install pwa module

  2. Add @nuxtjs/onesignal dependency to your project

yarn add @nuxtjs/onesignal # or npm install @nuxtjs/onesignal
  1. Add @nuxtjs/onesignal BEFORE @nuxtjs/pwa to the modules section of nuxt.config:
modules: [
  '@nuxtjs/onesignal',
  '@nuxtjs/pwa'
]
  1. Add oneSignal options to nuxt.config:
// Options
oneSignal: {
  init: {
    appId: 'YOUR_APP_ID',
    allowLocalhostAsSecureOrigin: true,
    welcomeNotification: {
        disable: true
    }
  }
}

See references below for all init options.

  1. Add OneSignalSDK* to .gitignore

Async Functions

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 )}
]);

Change OneSignal SDK Script URL

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'
}

References

License

MIT License