xtrinch / fcm-django-web-demo Goto Github PK

Quick demo to demonstrate the use of firebase web push notifications with the use of `javascript` on frontend, `django` on backend and push notifications via `fcm-django` pypi package for django.

JavaScript 6.38% HTML 50.51% CSS 5.69% Python 37.42%

firebase-web notifications django web-push-notification push-notifications

fcm-django-web-demo's Introduction

fcm-django-web-demo

Quick demo to demonstrate the use of firebase web push notifications with the use of javascript on frontend, django on backend and push notifications via fcm-django pypi package for django. Python3 compatible only!

Quick start

prerequisites

install python 3, pip
in fcm-django-web-demo:
- create virtual environment with python3 -m venv env
- activate virtual environment with source env/bin/activate or .\env\Scripts\activate.ps1 for Windows' Powershell
- install necessary Python packages with pip install -r mysite/requirements.txt

frontend

in fcm-django-web-demo/frontend:
- run server with python -m http.server 8001

backend

in fcm-django-web-demo/mysite:
- run database migrations with python manage.py migrate
- create Django administrator with python manage.py createsuperuser
- collect static files with python manage.py collectstatic
- run server with python manage.py runserver 0.0.0.0:8000.

how to use

open http://localhost:8001 in your browser of choice
request token and allow firebase to send notifications to your browser (device) - if notifications are already allowed, there will only be a token displayed
you should now be seeing your instance id token on the aforementioned URL
if you go to django admin, http://localhost:8000/admin/fcm_django/fcmdevice/ and login with the superuser you created earlier, you should be seeing a FCMDevice instance for your browser
send yourself a test notification with django admin actions OR

send yourself notifications from the shell

example (run python manage.py shell from fcm-django-web-demo/mysite):

   from firebase_admin.messaging import Message, Notification
   from fcm_django.models import FCMDevice
   device = FCMDevice.objects.all().first()
   device.send_message(Message(notification=Notification(title='title', body='message')))

voila :)

optional HTTPS support

why would you want to do this? because service workers will not work on http, unless you are running them on localhost
generate certificate and key with openssl req -nodes -new -x509 -keyout key.pem -out cert.pem in fcm-django-web-demo
in fcm-django-web-demo/frontend:
- update URL protocol to https and localhost to your server's IP address in index.html
- run frontend server with python server.py
in fcm-django-web-demo/mysite:
- add your server's IP address to allowed hosts in project settings (shell example: echo "ALLOWED_HOSTS = ['172.20.1.10']" > mysite/local_settings.py)
- run backend server with python manage.py runsslserver --certificate ../cert.pem --key ../key.pem 0.0.0.0:8000
testing this demo in Chrome may require to run it with --ignore-certificate-errors flag to avoid SSL certificate fetch errors
during the testing allow untrusted connections to the demo servers on browser prompt

fcm-django DRF API URL docs demo

available via coreapi and djangorestframework pypi packages, can be accessed at http://localhost:8000/docs

fcm-django-web-demo's People

Contributors

Stargazers

Watchers

fcm-django-web-demo's Issues

Doesn't work on Firefox nor Safari neither

I use Python3, and start the web server this way:

 $  python3 -m http.server 8001

and as a result see this (both browsers (firefox and safari)):

If I open the application within Django after I did the following additional steps (not documented, but the default steps for Django):

$ python manage.py migrate
$ python createsuperuser
$ python manage.py runserver

the following page is shown:

and in the sub-screen I see the following:

I have to admit that it is not self-explanatory, and I would appreciate if you explain it or let me know where the error is.

I like to add that the key to my app was added, and the key you provided within your source code was not used.

I like to understand where the steps happen which registers the web browser as a device and lets Django receive a DEVICE ID TOKEN which is then saved in the DB, which enables a developer at a later stage to send (if bulk is not used) to the individual device of the user a message.

The documentation was (for me) not clear enough about it, and I am not sure now if your lib provides this or not?

Send user instance to api

Hello, Can you please tell me how to send user instance to the api through javascript
I've Tried this
`body: JSON.stringify({
"user": {{ user }},
"name": "test",
'registration_id': currentToken,
'type': 'web',
'device_id':'sdsdsdsds'

    }),`

Also this
`body: JSON.stringify({
"id": {{ user }},
"name": "test",
'registration_id': currentToken,
'type': 'web',
'device_id':'sdsdsdsds'

    }),`

But none of these code working.

Can't work on Brave browser

The /docs/ endpoint does not work.

Trying to connect to https://localhost:8000/docs/ fails with the following console error stack:

Internal Server Error: /docs/
Traceback (most recent call last):
  File "/usr/home/anhoxa/git/fcm-django-web-demo/venv/lib/python3.7/site-packages/django/core/handlers/exception.py", line 47, in inner
    response = get_response(request)
  File "/usr/home/anhoxa/git/fcm-django-web-demo/venv/lib/python3.7/site-packages/django/core/handlers/base.py", line 181, in _get_response
    response = wrapped_callback(request, *callback_args, **callback_kwargs)
  File "/usr/home/anhoxa/git/fcm-django-web-demo/venv/lib/python3.7/site-packages/django/views/decorators/csrf.py", line 54, in wrapped_view
    return view_func(*args, **kwargs)
  File "/usr/home/anhoxa/git/fcm-django-web-demo/venv/lib/python3.7/site-packages/django/views/generic/base.py", line 70, in view
    return self.dispatch(request, *args, **kwargs)
  File "/usr/home/anhoxa/git/fcm-django-web-demo/venv/lib/python3.7/site-packages/rest_framework/views.py", line 509, in dispatch
    response = self.handle_exception(exc)
  File "/usr/home/anhoxa/git/fcm-django-web-demo/venv/lib/python3.7/site-packages/rest_framework/schemas/views.py", line 48, in handle_exception
    return super().handle_exception(exc)
  File "/usr/home/anhoxa/git/fcm-django-web-demo/venv/lib/python3.7/site-packages/rest_framework/views.py", line 469, in handle_exception
    self.raise_uncaught_exception(exc)
  File "/usr/home/anhoxa/git/fcm-django-web-demo/venv/lib/python3.7/site-packages/rest_framework/views.py", line 480, in raise_uncaught_exception
    raise exc
  File "/usr/home/anhoxa/git/fcm-django-web-demo/venv/lib/python3.7/site-packages/rest_framework/views.py", line 506, in dispatch
    response = handler(request, *args, **kwargs)
  File "/usr/home/anhoxa/git/fcm-django-web-demo/venv/lib/python3.7/site-packages/rest_framework/schemas/views.py", line 37, in get
    schema = self.schema_generator.get_schema(request, self.public)
  File "/usr/home/anhoxa/git/fcm-django-web-demo/venv/lib/python3.7/site-packages/rest_framework/schemas/coreapi.py", line 156, in get_schema
    links = self.get_links(None if public else request)
  File "/usr/home/anhoxa/git/fcm-django-web-demo/venv/lib/python3.7/site-packages/rest_framework/schemas/coreapi.py", line 143, in get_links
    link = view.schema.get_link(path, method, base_url=self.url)
AttributeError: 'AutoSchema' object has no attribute 'get_link'
[07/May/2021 12:50:42] "GET /docs/ HTTP/1.1" 500 100622

not working

I try to use python 3.9 3.8 3.6 but not working. All the time working this bug
ImportError: cannot import name 'six' from 'django.utils' (C:\Users\acer_\AppData\Local\Programs\Python\Python39\lib\site-packages\django\utils\__init__.py)

MissmatchSenderId

Hi,
When i try to test push this keeps happening What should i do.,

Some messages were sent: [{'multicast_ids': [5871282443266364075], 'success': 0, 'failure': 1, 'canonical_ids': 0, 'results': [{'error': 'MismatchSenderId'}], 'topic_message_id': None}]

Thanks.,

i have installed how to run it

I have created a new python virtualenv and then copied the folder there.

then i did: pip install -r requirements.txt

It installed all the requirement files:

After that how to do

TypeError: send_message() missing 1 required positional argument: 'message'

After following documentation, I got the error below

TypeError: send_message() missing 1 required positional argument: 'message'

After I checked the code, I found out that message argument is mandatory. (https://github.com/xtrinch/fcm-django/blob/bb239015f348c4b58fbd556adac2f11fd73c0e9f/fcm_django/models.py#L117)

So is it should be changed into below?

device.send_message(message=Message(notification=Notification(title='title', body='message')))

`coreapi` must be installed for schema support.

First, I tried installing requirements.txt but I was getting the same error, so I updated the modules, it was working fine for me about a week ago but since yesterday, I am facing this error

current versions that I'm using:-
coreapi==2.3.3
coreschema==0.0.4
Django==4.2.7
django-cors-headers==4.3.1
django-sslserver==0.22
djangorestframework==3.14.0
fcm-django==2.0.0
six==1.16.0
urllib3==2.1.0

How to integrate django templates

Thanks for this demo and for your amazing works, this demo is working properly. But still I've some questions.
firebase-messaging-sw.js is not included in index.html so what is the use case of this file. How this file is integrated in this project.

Does this project work with pure django templates? If this works, how can i integrate this project with django templates.

can you please, create one new branch django tempate demo. This will help for beginners like me

while retrieving token. TypeError: Cannot destructure property 'appConfig' of 'undefined' as it is undefined.

I used the same example, nothing changed except the function that sends to the server and the VAPID_KEY

fcm-django-web-demo update requirement file packages version

the requirement right now install django 3.0.7
and django-cors-headers==2.1.0 , needs to import 'six' package from django init.py.

and as we know it is not available in django 3

Requirement of custom messages

Is there a possibility to add an model in admin for custom messages where we can type the body and content and send the message or the notification

Not getting notifications - Config looks different on the front end site?

Not getting any notifications, guessing it's because I'ven not set up the config correctly to my firebase account. The config looks different from the one in the project, so not sure on how to implement it. This is what mine look like?

<script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.0/firebase-app.js";
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries

  // Your web app's Firebase configuration
  const firebaseConfig = {
    apiKey: "xxxx",
    authDomain: "xxx-test.firebaseapp.com",
    projectId: "xxx-test",
    storageBucket: "xxxx-test.appspot.com",
    messagingSenderId: "xxx",
    appId: "xxxx
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
</script>

EDIT:

So OK I filled out the credentials as you prescribe:

<script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>
<script>
const firebaseConfig = {
    apiKey: "xxx",
    authDomain: "xx-test.firebaseapp.com",
    projectId: "xx-test",
    storageBucket: "xx-test.appspot.com",
    messagingSenderId: "xx",
    appId: "xxx"
  };

  firebase.initializeApp(firebaseConfig);
</script>

and then i replaced credentials.json with my own credentials from Firebase. But now when I'm trying to post a test message I get these messages in django admin:

A message failed to send. 1 device was marked as inactive.

Requested entity was not found. (Registration ID/Tokens: xxxx