Make Custom Offline Page in Django, Django PWA, django-pwa, custom offline page, django,

Опубликовано: 11 Май 2025
на канале: Pyzit.

727

#django #offlinepage #webdevelopment #custompage #djangoPWA #WebCog #djangoweb #programming #webdesign #webcogoffline

ABOUT OUR CHANNEL
Our channel is about Web Development. We cover lots of cool stuff such as Word Press, Web Development and Web Designing
Support Channel here: https://www.buymeacoffee.com/webcog
Check out our channel here:
   / @pyzit
Don’t forget to subscribe!

Packages Link:
Github:- https://github.com/silviolleite/djang...
Pypi:- https://pypi.org/project/django-pwa/
pip:- pip install django-pwa
Documentations:- https://github.com/silviolleite/djang...

Setting.py
Add pwa to your list of INSTALLED_APPS in settings.py:

INSTALLED_APPS = [
...
'pwa',
...
]
Define STATICFILES_DIRS for your custom PWA_APP_ICONS

STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
Configure your app name, description, icons, splash screen images, screenshots and shortcuts in settings.py:

PWA_APP_NAME = 'My App'
PWA_APP_DESCRIPTION = "My app description"
PWA_APP_THEME_COLOR = '#0A0302'
PWA_APP_BACKGROUND_COLOR = '#ffffff'
PWA_APP_DISPLAY = 'standalone'
PWA_APP_SCOPE = '/'
PWA_APP_ORIENTATION = 'any'
PWA_APP_START_URL = '/'
PWA_APP_STATUS_BAR_COLOR = 'default'
PWA_APP_ICONS = [
{
'src': '/static/images/my_app_icon.png',
'sizes': '160x160'
}
]
PWA_APP_ICONS_APPLE = [
{
'src': '/static/images/my_apple_icon.png',
'sizes': '160x160'
}
]
PWA_APP_SPLASH_SCREEN = [
{
'src': '/static/images/icons/splash-640x1136.png',
'media': '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)'
}
]
PWA_APP_DIR = 'ltr'
PWA_APP_LANG = 'en-US'
PWA_APP_SHORTCUTS = [
{
'name': 'Shortcut',
'url': '/target',
'description': 'Shortcut to a page in my application'
}
]
PWA_APP_SCREENSHOTS = [
{
'src': '/static/images/icons/splash-750x1334.png',
'sizes': '750x1334',
"type": "image/png"
}
]
Add the progressive web app URLs to urls.py:

from django.urls import url, include

urlpatterns = [
...
url('', include('pwa.urls')), # You MUST use an empty string as the URL prefix
...
]
Inject the required meta tags in your base.html (or wherever your HTML head is defined):

{% load pwa %}

head
...
{% progressive_web_app_meta %}
...
/head

Make Custom Offline Page in Django, Django PWA, django-pwa, custom offline page, django, #webcog

CHECK OUT OUR OTHER VIDEOS
   • #webcog Download Blogger Website Temp...
   • #webcog How to get Free Domain, Web H...
   • #webcog Download Portfolio Website Te...

╔═╦╗╔╦╗╔═╦═╦╦╦╦╗╔═╗
║╚╣║║║╚╣╚╣╔╣╔╣║╚╣═╣
╠╗║╚╝║║╠╗║╚╣║║║║║═╣
╚═╩══╩═╩═╩═╩╝╚╩═╩═╝