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: https://firebase.google.com/

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

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'fcm_django'
]

FCM_DJANGO_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
    "ONE_DEVICE_PER_USER": True,
    # devices to which notifications cannot be sent,
    # are deleted upon receiving error response from FCM
    # default: False
    "DELETE_INACTIVE_DEVICES": True,
}

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

https://docs.nativescript.org/start/introduction

Add firebase config file to project

To prepare the android app for the nativescript firebase plugin, Copy/paste google.services.json 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)

Solution: https://stackoverflow.com/questions/51109159/nativescript-cannot-fit-requested-classes-in-a-single-dex-file

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

https://github.com/EddyVerbruggen/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");

firebase.init({
    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 manage.py 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.

Sources:

Other fixes found for iOS

tns build ios
Command failed: ruby -e "require 'xcodeproj'; Xcodeproj::Config.new('/Users/alexb/projects/firebasetest2/platforms/ios/plugins-debug.xcconfig').merge(Xcodeproj::Config.new('/Users/alexb/projects/firebasetest2/node_modules/nativescript-plugin-firebase/platforms/ios/build.xcconfig')).save_as(Pathname.new('/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

0

Laisser un commentaire