Send a push notification with Firebase & Django

In this post, we will see how to send a push notification from a Django backend to a mobile app using Nativescript with Firebase.

Create a Firebase account or connect with your google account:

Create a firebase project

For Android:

Add Android app to project via firebase project page

Once created, download the google-services.json file (will be used to configure firebase in the mobile app)

For iOS

Once created, download the GoogleService-Info.plist file (will be used to configure firebase in the mobile app)

Create django project

pip install Django
django-admin startproject firebasetest_back

Add django firebase settings


    "APP_VERBOSE_NAME": "firebasetest_django",
    # default: _('FCM Django')
    "FCM_SERVER_KEY": "xxxxx:xxxxxxxxxxx..."
    # true if you want to have only one active device per registered user at a time
    # default: False
    # devices to which notifications cannot be sent,
    # are deleted upon receiving error response from FCM
    # default: False

FCM_SERVER_KEY is available in your firebase project settings by clicking on the wheel at the top in the left menu.

Create the mobile app project with Nativescript vue 2.0

Copy/Paste project id available from the Firebase project settings (Applications section) to Android package name in package.json

Add firebase config file to project

To prepare the android app for the nativescript firebase plugin, Copy/paste to app/App_Resources/Android/

Test nativescript project running

For issues, check following fixes to help else go to « Get FCM Token »

Issues encountered + Fixes:

Execution failed for task ':app:mergeDexDebug'.
Error: null, Cannot fit requested classes in a single dex file (# methods: 105904 > 65536)


In app/App_Resources/Android/app.gradle, add:

android {
    defaultConfig {
        minSdkVersion 17
        generatedDensities = []
        multiDexEnabled true <---- New
    aaptOptions {
        additionalParameters "--no-version-vectors"

In platforms/android/settings.json, add in the object:

    "v8Version": "8.0.426.16",
    "ndkRevision": "21.0.6113669",
    "mksnapshotParams": "--profile_deserialization --turbo_instruction_scheduling --target_os=android --no-native-code-counters",
    "multiDexEnabled": true <-- New

Restart the project

tns debug android --bundle

Install the nativescript firebase plugin

tns plugin add nativescript-plugin-firebase

Issues encountered + Fixes:

TypeError: Cannot read property ‘firebase’ of undefined

tns plugin remove nativescript-plugin-firebase
tns plugin add nativescript-plugin-firebase

Get FCM ( Firebase Cloud Messaging ) dynamic token

# app/app.js
var firebase = require("nativescript-plugin-firebase");

    onPushTokenReceivedCallback: function(token) {
      console.log("Firebase push token: " + token);

Run the app from your phone & Copy/Paste the token somewhere

tns run android --bundle

Send a a push notification from Django shell to your phone

python shell
from fcm_django.models import FCMDevice

device = FCMDevice.objects.create(registration_id='FCM_TOKEN')
device.send_message('Title', 'Message')
{'multicast_ids': [xxxxx], 'success': 1, 'failure': 0, 'canonical_ids': 0, 'results': [{'message_id': '0:1595250666779992%319c135b319c135b'}], 'topic_message_id': None}

Hope it is also working for you!

For any comments or questions, feel free to write a comment below.


Other fixes found for iOS

tns build ios
Command failed: ruby -e "require 'xcodeproj';'/Users/alexb/projects/firebasetest2/platforms/ios/plugins-debug.xcconfig').merge('/Users/alexb/projects/firebasetest2/node_modules/nativescript-plugin-firebase/platforms/ios/build.xcconfig')).save_as('/Users/alexb/projects/firebasetest2/platforms/ios/plugins-debug.xcconfig'))"
/usr/local/Cellar/ruby/2.7.1_2/lib/ruby/2.7.0/rubygems/core_ext/kernel_require.rb:92:in `require': cannot load such file -- xcodeproj (LoadError)
        from /usr/local/Cellar/ruby/2.7.1_2/lib/ruby/2.7.0/rubygems/core_ext/kernel_require.rb:92:in `require'
        from -e:1:in `<main>'
 gem install xcodeproj


Laisser un commentaire