Receive pushwoosh notifications using Quasar framework / vue.js
Open a new project in Quasar Framework
$ yarn global add @quasar/cli
$ npm install -g @quasar/cli
$ quasar create <folder_name>
Note: iOS Simulator can neither subscribe nor receive push notifications. Android and Windows Phone emulator will work. To integrate Pushwoosh with your Cordova application, follow these simple steps:
- Install the Plugin source code into your app:
For Cordova:
cordova plugin add pushwoosh-cordova-plugin
-
Whitelist .pushwoosh.com domain in the config.xml file:
Do not forget to add cordova-plugin-whitelist plugin for android platform.
cordova plugin add cordova-plugin-whitelist
-
Get the google-services.json from your Firebase console as described here and add it to your project.
-
Add the following section to your config.xml:
...
The first step is always to generate a new plugin using Quasar CLI:
$ quasar new boot 'file-name'
Where 'file-name' should be exchanged by a suitable name for your boot file.
This command creates a new file: /src/boot/.js with the following content:
In the quasar.conf.js file add:
boot: [
'file-name'
],
In the boot file that was generated add the code below:
// "async" is optional
export default async ({ store }) => {
document.addEventListener('deviceready', () => {
var pushwoosh = cordova.require("pushwoosh-cordova-plugin.PushNotification");
// Should be called before pushwoosh.onDeviceReady
document.addEventListener('push-notification', function(event) {
var notification = event.notification;
alert(notification)
// handle push open here
});
// Initialize Pushwoosh. This will trigger all pending push notifications on start.
pushwoosh.onDeviceReady({
//PUSHWOOSH_APP_ID
appid: "XXXXX-XXXXX",
//YOUR_FCM_SENDER_ID
projectid: "XXXXXXXXXXXXX",
//serviceName: "MPNS_SERVICE_NAME"
});
pushwoosh.registerDevice(
function(status) {
var pushToken = status.pushToken;
alert('Value token device : ' + pushToken)
//The token device shown in Alert is what you will use to send panel notification or Api Pushwoosh
// handle successful registration here
},
function(status) {
alert('Error register : ' + status)
// handle registration error here
}
);
} , false)
}