为 Django 项目制作 PWA

渐进式 Web 应用程序或 PWA 是一种使用 Web 技术开发的应用程序，可以像普通应用程序一样安装在任何设备上。

先决条件：准备部署的 django 项目。对于 Django 教程，您可以参考以下链接 https://www.geeksforgeeks.org/django-tutorial/

必须遵循以下步骤来创建 Django 项目的渐进式 Web 应用程序。

STEP 1：首先使用以下命令安装django pwa

pip install django-pwa

第 2 步：在已安装应用程序部分的项目settings.py中添加“ pwa ”，并在项目的urls.py中提供以下路径 -

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

设置.py

网址.py

STEP 3：在 js 文件夹中，创建一个名为serviceworker.js的文件，并在其中添加以下代码。

Javascript

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);
      })
    );
});

第 4 步：现在在 settings.py 中将 service worker 的路径添加为PWA_SERVICE_WORKER_PATH = os.path.join(BASE_DIR, 'static/js', 'serviceworker.js')。

第 5 步：现在要创建 manifest.json 文件，请进入 Django 项目的设置文件并添加以下详细信息。 Django 会自动为你的项目构建 manifest.json

蟒蛇3

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'

STEP 6：在项目的索引或首页添加{% load pwa %}和{%progressive_web_app_meta %}。

步骤 7：右键单击浏览器并选择检查元素选项。在应用程序部分，您将看到清单文件和服务工作者文件存在于那里。

第 8 步：我们的 PWA 现已准备好安装。您将在地址选项卡中看到安装图标。