为 Django 项目制作 PWA

简介

PWA（Progressive Web App）是一种新型的 web 应用程序，从浏览器角度来看就像一个普通的网站，但实际上它可以像 native 应用程序一样进行离线缓存、推送通知等函数，并且是可以安装到操作系统桌面的。本文将介绍如何为 Django 项目制作 PWA。

前置知识

• Django
• JavaScript
• ServiceWorker
• Web App Manifest

实现步骤

1. 创建一个 Django 项目

如果您已经有了 Django 项目，则可以跳过这一步。否则，可以通过以下命令创建新项目：

django-admin startproject myproject

2. 安装 PWA 支持包

可以使用 pip 命令安装 django-pwa 支持包：

pip install django-pwa

3. 配置 PWA

打开项目中的 settings.py 文件，将 'pwa' 添加到 INSTALLED_APPS 列表中。

INSTALLED_APPS = (
    ...
    'pwa',
)

并添加 PWA 的 middleware 到 MIDDLEWARE 列表中。

MIDDLEWARE = [
    ...
    'pwa.middleware.PwaMiddleware',
]

在 settings.py 文件末尾添加以下代码：

PWA_APP_NAME = 'My Progressive Web App'
PWA_APP_DESCRIPTION = 'My web app description'
PWA_APP_THEME_COLOR = '#333'
PWA_APP_BACKGROUND_COLOR = '#fff'
PWA_APP_DISPLAY = 'standalone'
PWA_APP_SCOPE = '/'
PWA_APP_ORIENTATION = 'any'
PWA_APP_START_URL = '/'

这些设置将会影响到 PWA 的外观和功能。

4. 创建 Web App Manifest 文件

Web App Manifest 是一个 JSON 文件，用于描述应用的元数据，例如名称、图标等。我们需要在静态文件目录下创建一个 manifest.json 文件，并添加以下内容：

{
  "name": "My Progressive Web App",
  "short_name": "My PWA",
  "description": "My web app description",
  "icons": [
    {
      "src": "/static/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#333"
}

5. 创建 ServiceWorker

ServiceWorker 是一种专门用于构建 PWA 的 JavaScript API，它可以使您的网站离线应用程序具有可控性、安全性、交互性和高性能。我们需要创建一个 JavaScript 文件，命名为 sw.js 并将其放置在项目的静态目录中。

在 sw.js 中添加以下代码：

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('myapp-static-v1').then(function(cache) {
      return cache.addAll([
        '/',
        '/static/css/main.css',
        '/static/js/main.js'
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request).then(function(response) {
    return response || fetch(event.request);
  }));
});

install 事件会在 ServiceWorker 安装完成后触发，我们在这里可以将需要缓存的文件添加到缓存中。在 fetch 事件中，我们能够从 ServiceWorker 中获取数据，以便快速响应，从而提高速度。

6. 导入 JavaScript 和 CSS 文件

在 base.html 或者其他模板文件中，在 head 标签中添加以下代码：

{% load pwa %}
{% pwa_meta %}
{% pwa_manifest %}
<script src="{% static 'sw.js' %}"></script>

这些标签会添加所需的 JavaScript、CSS 和 Web App Manifest 数据。

总结

通过以上步骤，我们已经将 Django 项目转为 PWA，您可以在桌面上安装它，也可以像普通的网站一样进行浏览。但是需要注意的是，如果您需要在离线环境下进行浏览，请确保在 ServiceWorker 安装时已经将需要缓存的文件添加到缓存中。