استعمال django مع pwa

محمود الساعور2 · 22 أكتوبر

السلام عليكم

مرحبا جميعا ,احاول تعلم تقنية PWA مع جانغو ,لذلك قمت بإنشاء مشروع تجريبي بسيط عبارة عن زر واحد فقط وعند النقر عليه يتم تحميل التطبيق كpwa لكنه لايعمل مهما حاولت, على الرغم انه لايوجد لدي اي اخطاء ظاهرة سواء بالكونسول او في قسم ابليكيشن, ارجو منكم مساعدتي في ايجاد المشكلة .

PWA-TEST.zip

Mustafa Suleiman · 22 أكتوبر

سأشرح لك الأمر وحاول تطبيقه على مشروع لتستفيد، أولاً تثبيت مكتبة django-pwa:

pip install django-pwa

ثم في ملف settings.py في الجزء الخاص بـ installed apps قم بإضافة pwa:

1-660x390.png.a275fd79fb8609c5dfab52cb4322656e.png

ثم في ملف urls.py الذي بجانب settings.py ضع المسار التالي:

path(“, include(‘pwa.urls’))

2-660x376.png.d958f46f5436cee300365a26d25d25a4.png

ثم في مجلد js قم بإنشاء ملف باسم serviceworker.js وضع التالي:

let staticCacheName = 'djangopwa-v1';
 
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(staticCacheName).then(function(cache) {
      return cache.addAll([
        '',
      ]);
    })
  );
});
 
self.addEventListener('fetch', function(event) {
  let requestUrl = new URL(event.request.url);
    if (requestUrl.origin === location.origin) {
      if ((requestUrl.pathname === '/')) {
        event.respondWith(caches.match(''));
        return;
      }
    }
    event.respondWith(
      caches.match(event.request).then(function(response) {
        return response || fetch(event.request);
      })
    );
});

الآن في ملف settings.py ضع التالي بأي مكان:

 PWA_SERVICE_WORKER_PATH = os.path.join(BASE_DIR, ‘static/js’, ‘serviceworker.js’)

ثم ضع التالي أيضًا:

PWA_APP_NAME = 'hsoub'
PWA_APP_DESCRIPTION = "hsoub PWA"
PWA_APP_THEME_COLOR = '#000000'
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/icon-160x160.png',
		'sizes': '160x160'
	}
]
PWA_APP_ICONS_APPLE = [
	{
		'src': 'static/images/icon-160x160.png',
		'sizes': '160x160'
	}
]
PWA_APP_SPLASH_SCREEN = [
	{
		'src': 'static/images/icon.png',
		'media': '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)'
	}
]
PWA_APP_DIR = 'ltr'
PWA_APP_LANG = 'en-US'

بالطبع لا تنسى وضع أيقونات في مجلد static/images لاحظ في الكود نقوم بتحديد أيقونة باسم icon.png وغيرها بمقاسات مختلفة كأيقونة لتطبيق PWA، تستطيع توليد تلك الصور من خلال https://redketchup.io/icon-converter.

وسيقوم إطار جانغو بإنشاء ملف manifest.json من خلال تلك البيانات.

والآن في قالب الصفحة الرئيسية ضع التالي بعد عنصر <html>:

{% load pwa %} 
{% progressive_web_app_meta %}

والآن عند تشغيل المشروع سترى أيقونة لتثبيت PWA في شريط العنوان على اليمين.

محمود الساعور2 · 22 أكتوبر

بتاريخ 23 دقائق مضت قال Mustafa Suleiman:
سأشرح لك الأمر وحاول تطبيقه على مشروع لتستفيد، أولاً تثبيت مكتبة django-pwa:
pip install django-pwa
ثم في ملف settings.py في الجزء الخاص بـ installed apps قم بإضافة pwa:

ثم في ملف urls.py الذي بجانب settings.py ضع المسار التالي:
path(“, include(‘pwa.urls’))
ثم في مجلد js قم بإنشاء ملف باسم serviceworker.js وضع التالي:
let staticCacheName = 'djangopwa-v1';
 
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(staticCacheName).then(function(cache) {
      return cache.addAll([
        '',
      ]);
    })
  );
});
 
self.addEventListener('fetch', function(event) {
  let requestUrl = new URL(event.request.url);
    if (requestUrl.origin === location.origin) {
      if ((requestUrl.pathname === '/')) {
        event.respondWith(caches.match(''));
        return;
      }
    }
    event.respondWith(
      caches.match(event.request).then(function(response) {
        return response || fetch(event.request);
      })
    );
});
الآن في ملف settings.py ضع التالي بأي مكان:
 PWA_SERVICE_WORKER_PATH = os.path.join(BASE_DIR, ‘static/js’, ‘serviceworker.js’)
ثم ضع التالي أيضًا:
PWA_APP_NAME = 'hsoub'
PWA_APP_DESCRIPTION = "hsoub PWA"
PWA_APP_THEME_COLOR = '#000000'
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/icon-160x160.png',
		'sizes': '160x160'
	}
]
PWA_APP_ICONS_APPLE = [
	{
		'src': 'static/images/icon-160x160.png',
		'sizes': '160x160'
	}
]
PWA_APP_SPLASH_SCREEN = [
	{
		'src': 'static/images/icon.png',
		'media': '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)'
	}
]
PWA_APP_DIR = 'ltr'
PWA_APP_LANG = 'en-US'
بالطبع لا تنسى وضع أيقونات في مجلد static/images لاحظ في الكود نقوم بتحديد أيقونة باسم icon.png وغيرها بمقاسات مختلفة كأيقونة لتطبيق PWA، تستطيع توليد تلك الصور من خلال https://redketchup.io/icon-converter.

وسيقوم إطار جانغو بإنشاء ملف manifest.json من خلال تلك البيانات.

والآن في قالب الصفحة الرئيسية ضع التالي بعد عنصر <html>:
{% load pwa %} 
{% progressive_web_app_meta %}
والآن عند تشغيل المشروع سترى أيقونة لتثبيت PWA في شريط العنوان على اليمين.