Categories
Utveckling

Hur man aktiverar push-meddelande med Meteor JS

Under de senaste månaderna har vi varit upptagna med att utveckla vår egen revolutionerande produkt. Mitt team och jag bestämde oss för att gå med Meteor på detta eftersom avsikten är att utveckla en multiplattformsapplikation med realtidsuppdateringar som en nyckelfaktor. Tillsammans med Meteor valde vi att gå med React JS för mallen med Meteor för reaktivitet av data. Att arbeta med Meteor har varit en fantastisk upplevelse hittills, men då och då hamnade vi på en vägspärr eftersom det finns mycket begränsad dokumentation om några av funktionerna – Push Notification var en gång ett sådant fall. Vi fick lägga mycket arbetstimmar på att dechiffrera problemet och få det att fungera ordentligt.

Så, på den här bloggen med titeln “Hur man aktiverar push-meddelanden med Meteor JS, kommer jag att dela några viktiga detaljer om hur du kan få push-meddelandet att fungera med Meteor JS-plattformen. Låt oss börja!

Det första steget mot att implementera push-aviseringsfunktionen på Meteor JS är att få projektnumret och API-nyckeln från Firebase-portalen.

Använd följande steg för att få den nödvändiga informationen:

1. Öppna Firebase Utvecklarkonsol.

2. Klicka på ‘skapa projekt’ och ge det ett passande projektnamn.

3. När det är gjort kommer du att kunna se Firebase-översiktssidan. Klicka nu på länken ‘Projektinställning’ som finns uppe till vänster (en del av svävningsinställningarna).

4. Klicka nu på fliken “Cloud Messaging”.

5. Skriv ner ditt avsändar-ID (det ska vara alla siffror) och din servernyckel (har stora och små bokstäver, siffror, understreck och bindestreck).

How To Enable Push Notification Using MeteorJS

Låt oss nu komma in på kodningsdelen

Vi har använt “raix/push” för push-meddelandefunktionen. Det första steget är naturligtvis att installera det. Installationsprocessen är som följer:

meteor add raix:push

meteor add cordova:cordova-plugin-device@1.1.5

meteor add cordova:phonegap-plugin-push@1.5.2 Lägg

nu till Push.Configure som en del av klienten inuti Meteor Startup () block av main.js

Push.Configure({

   android: {

     senderID: xxxxxxxxxx,

     alert: true,

     badge: true,

     sound: true,

     vibrate: true,

     clearNotifications: true

     // icon: ”,

     // iconColor: ”

  },

  ios: {

  alert: true,

  badge: true,

  sound: true

  }

});

How To Enable Push Notification Using MeteorJS

Dessutom måste du inkludera mobile-config.js också:

   App.configurePlugin(‘phonegap-plugin-push’, {

        SENDER_ID: xxxxxxxxxxxxx

    });

How To Enable Push Notification Using MeteorJS

När den här delen är klar lägger du till Push.Configure till servern i Meteor.startup()-blocket i main.js

Push.Configure({

        gcm: {

        projectNumber: xxxxxxxxxxx,

        apiKey: ‘xxxxxxxxxxx’

        }

    });

How To Enable Push Notification Using MeteorJS
Försök nu att skicka push-meddelandet:

Följande kod måste inkluderas för att push-meddelandet ska fungera effektivt:

Push.send({

        from: ‘push’,

        title: ‘Push Notification’,

        text: ‘Push Notification text’,

        badge: 1, //valfritt, använd den för att ställa in märkesantalet för mottagaren när appen är i bakgrunden.

        query: {

        // T.ex. skicka till en specifik användare om du använder konton:

            userId: ‘xxxxxxxxxx’

        } // Fråga appCollection

        / / token: appId eller token t.ex. “{ apn: token }”

        // tokens: array of appId’s eller tokens

        // payload: user data

        // delayUntil: Date

    });

 

Vi har slutfört kodningsdelen och nu kan vi testa push-meddelandet. Push-aviseringsfunktionen fungerar bara på mobila enheter, så anslut din Android-telefon (för att få push-aviseringar som fungerar på ios se detta länk) och mata in följande kommando i terminalen:

Meteor kör Android-enhet

Det är allt, din push-aviseringsfunktion bör börja fungera. Hör gärna av dig till mig på Twitter om du stöter på problem. Dela också dina tankar i kommentarsfältet. Glad kodning!!

Categories
DEVELOPMENT

How To Enable Push Notification Using Meteor JS

Over the past few months, we have been busy developing our own revolutionary product. My team and I decided to go with Meteor on this one as the intention is to develop a multi-platform application with real-time updates being a key factor. Along with Meteor, we chose to go with React JS for the template with Meteor for reactivity of data. Working on Meteor has been a great experience so far but every now and then we did hit a roadblock as there is very limited documentation on some of the functionalities – Push Notification being once such case. We had to spend a lot of working hours to decipher the problem and get it to work properly.

So, on this blog titled ‘How to enable push notification using Meteor JS, I’ll share a few important details as to how you can get the push notification to work using the Meteor JS platform. Let’s begin!

The first step towards implementing the push notification feature on Meteor JS is to obtain the Project Number and API Key from the firebase portal.

Use the following steps to get the required details:

1. Access the Firebase Developer Console.

2. Click on ‘create project’ and give it a suitable project name.

3. Once that is done, you’ll be able to see the Firebase Overview page. Now click on the ‘Project Setting’ link found on the top left (part of the hover settings).

4. Now click on ‘Cloud Messaging’ tab.

5. Write down your Sender ID (it should be all digits) and your Server key (has upper and lower case letters, numbers, underscores, and dashes).

How To Enable Push Notification Using MeteorJS

Now Let’s Get Into The Coding Part

We have used “raix/push” for the push notification feature. The first step obviously is to install it. The installation process is as follows:

meteor add raix:push

meteor add cordova:cordova-plugin-device@1.1.5

meteor add cordova:phonegap-plugin-push@1.5.2

Now add Push.Configure as part of the client inside the Meteor Startup () block of main.js

Push.Configure({
   android: {
     senderID: xxxxxxxxxx,
     alert: true,
     badge: true,
     sound: true,
     vibrate: true,
     clearNotifications: true
     // icon: '',
     // iconColor: ''
  },
  ios: {
  alert: true,
  badge: true,
  sound: true
  }
});

How To Enable Push Notification Using MeteorJS

Additionally, you’ll have to include the mobile-config.js as well:

    App.configurePlugin('phonegap-plugin-push', {
        SENDER_ID: xxxxxxxxxxxxx
    });

How To Enable Push Notification Using MeteorJS

Once this part is done, add Push.Configure to the server inside Meteor.startup() block of main.js

Push.Configure({
        gcm: {
        projectNumber: xxxxxxxxxxx,
        apiKey: 'xxxxxxxxxxx'
        }
    });

How To Enable Push Notification Using MeteorJS

Now Try Sending The Push Notification:

The following code has to be included for the push notification to work efficiently:

Push.send({
        from: 'push',
        title: 'Push Notification',
        text: 'Push Notification text',
        badge: 1, //optional, use it to set badge count of the receiver when the app is in background.
        query: {
        // Ex. send to a specific user if using accounts:
            userId: 'xxxxxxxxx'
        } // Query the appCollection
        // token: appId or token eg. "{ apn: token }"
        // tokens: array of appId's or tokens
        // payload: user data
        // delayUntil: Date
    });

We have completed the coding part and now we can test the push notification. The push notification feature will only work on mobile devices, so connect your Android phone (to get push notifications to work on ios refer this link) and input the following command in the terminal:

Meteor run Android-device

That’s it, your push notification feature should start working. Feel free to get in touch with me on Twitter if you run into any difficulties. Do share your thoughts in the comments section as well. Happy Coding!!