Django Push Notifications to HTML Site: Full Example (2023) using Channels

To send push notifications to an HTML site using Django Channels, you need to follow these steps:
\
Install Django Channels using the following command:\
```
pip install channels\
```\
```
2. Create a new Django project:\
django-admin startproject push_notification_demo\
```\
\
3. Create a new Django app within the project:\
```\
cd push_notification_demo\
python manage.py startapp push_notifications\
```\
\
4. Update the project's settings to include Channels:\
```python\
# push_notification_demo/settings.py\
\
INSTALLED_APPS = [\
    ...\
    'channels',\
    'push_notifications',\
]\
\
CHANNEL_LAYERS = {\
    'default': {\
        'BACKEND': 'channels.layers.InMemoryChannelLayer',\
    },\
} \
```\
\
5. Create a new file called `consumers.py` inside the `push_notifications` app:\
```python\
# push_notifications/consumers.py\
\
from channels.generic.websocket import WebsocketConsumer\
import json\
\
\
class PushNotificationConsumer(WebsocketConsumer):\
    def connect(self):\
        self.accept()\
\
    def disconnect(self, close_code):\
        pass\
\
    def receive(self, text_data):\
        text_data_json = json.loads(text_data)\
        message = text_data_json['message']\
\
        self.send(text_data=json.dumps({\
            'message': message\
        }))\
```\
\
6. Create a new file called `routing.py` inside the `push_notifications` app:\
```python\
# push_notifications/routing.py\
\
from django.urls import re_path\
\
from . import consumers\
\
\
websocket_urlpatterns = [\
    re_path(r'ws/push-notification/$', consumers.PushNotificationConsumer.as_asgi()),\
]\
```\
\
7. Update the project's routing to include the new routing file:\
```python\
# push_notification_demo/routing.py\
\
from django.urls import path\
from channels.routing import ProtocolTypeRouter, URLRouter\
from push_notifications import routing\
\
application = ProtocolTypeRouter({\
    'http': get_asgi_application(),\
    'websocket': URLRouter(\
        routing.websocket_urlpatterns\
    ),\
})\
```\
\
8. Create a new HTML file called `index.html` in the `templates` directory:\
```html\
<!-- push_notifications/templates/index.html -->\
\
<!DOCTYPE html>\
<html>\
<head>\
    <title>Push Notification Demo</title>\
</head>\
<body>\
    <h1>Push Notification Demo</h1>\
    <div id="notification"></div>\
\
    <script>\
        const notificationElement = document.getElementById('notification');\
\
        const socket = new WebSocket('ws://' + window.location.host + '/ws/push-notification/');\
\
        socket.onmessage = function(e) {\
            const data = JSON.parse(e.data);\
            notificationElement.innerHTML = data.message;\
        };\
    </script>\
</body>\
</html>\
```\
\
9. Update the project's URL configuration to serve the HTML file:\
```python\
# push_notification_demo/urls.py\
\
from django.urls import path\
from django.conf.urls import include\
from django.views.generic import TemplateView\
\
urlpatterns = [\
    path('', TemplateView.as_view(template_name='index.html')),\
    path('ws/', include('push_notifications.routing')),\
]\
```\
\
10. Run the Django development server:\
 ```\
 python manage.py runserver\
 ```\
\
Now, when you open your browser and navigate to `http://localhost:8000`, you should see the "Push Notification Demo" page. You can send a push notification by using a WebSocket client and sending a message to the `ws://localhost:8000/ws/push-notification/` endpoint. The message will be displayed in the `notification` div on the HTML page.
Django Push Notifications to HTML Site: Full Example (2023) using Channels