Hacer PWA de un proyecto Django

Las Progressive Web Apps o PWA son un tipo de aplicación que se desarrolla utilizando tecnologías web y se puede instalar en cualquier dispositivo como una aplicación normal. 

Requisitos previos: un proyecto de Django que esté listo para implementarse. Para el tutorial de Django, puede consultar el siguiente enlace https://www.geeksforgeeks.org/django-tutorial/

Se deben seguir los pasos a continuación para crear una aplicación web progresiva de un proyecto Django.

PASO 1: Primero use el siguiente comando para instalar django pwa

pip install django-pwa

PASO 2: En settings.py del proyecto dentro de la sección de aplicaciones instaladas, agregue ‘ pwa ‘ y en urls.py del proyecto proporcione la siguiente ruta: 
 

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

configuración.py

urls.py

PASO 3: En la carpeta js, cree un archivo llamado serviceworker.js y agréguele el siguiente código.

var staticCacheName = 'djangopwa-v1';
 
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(staticCacheName).then(function(cache) {
      return cache.addAll([
        '',
      ]);
    })
  );
});
 
self.addEventListener('fetch', function(event) {
  var 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);
      })
    );
});

PASO 4: ahora en settings.py agregue la ruta al trabajador de servicio como PWA_SERVICE_WORKER_PATH = os.path.join(BASE_DIR, ‘static/js’, ‘serviceworker.js’). 

PASO 5:   Ahora, para crear el archivo manifest.json, vaya al archivo de configuración de su Proyecto Django y agregue los siguientes detalles. Django construirá automáticamente el manifest.json para su proyecto

PWA_APP_NAME = 'geeksforgeeks'
PWA_APP_DESCRIPTION = "GeeksForGeeks 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'

PASO 6: Agrega {% load pwa %} y {% progresiva_web_app_meta %} en el índice o primera página del proyecto. 

PASO 7: Haga clic con el botón derecho en el navegador y elija la opción inspeccionar elemento. En la sección de la aplicación, verá que el archivo de manifiesto y el archivo del trabajador del servicio están presentes allí.

PASO 8: Nuestro PWA está listo para ser instalado ahora. Verá el icono de instalación en la pestaña de dirección.