时间戳

首页 > 解决方案 > 使用 Service Worker 的 PWA 无法与 Django 一起正常工作

django - 使用 Service Worker 的 PWA 无法与 Django 一起正常工作

问题描述

我在 django 中开发了一个小型原型，其中包含一个模型：Profile，以及带有 2 个视图的 2 个模板（一个配置文件列表和一个编辑配置文件页面），以及 forms.py 中的一个表单。我想测试用 Django 创建 PWA，这是我做的其他事情：1）pip install django-progressive-web-app，2）在已安装的应用程序中添加了“pwa”，3）为基础添加了渲染视图。将使用 service worker 的 html ！

def base(request):
    return render(request,'app/base.html')

4）将其添加到网址：

urlpatterns = [
    path(r'', profiles, name="profiles"),
    path('user/<pk>', profile, name="profile"),
    path('', include('pwa.urls')),
]

5）添加此以识别服务人员：

PWA_SERVICE_WORKER_PATH = os.path.join(BASE_DIR, 'posts/static/js', 'serviceworker.js')

6）添加标签：

{% load pwa %}

<head>
    ...
    {% progressive_web_app_meta %}
    ...
</head>

7) 并将其添加到位于 app/static/js 中的 serviceworker.js 文件中：

var staticCacheName = 'djangopwa-v1';

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(staticCacheName).then(function(cache) {
      return cache.addAll([
        '/base_layout'
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  var requestUrl = new URL(event.request.url);
    if (requestUrl.origin === location.origin) {
      if ((requestUrl.pathname === '/')) {
        event.respondWith(caches.match('/base_layout'));
        return;
      }
    }
    event.respondWith(
      caches.match(event.request).then(function(response) {
        return response || fetch(event.request);
      })
    );
});

发生的事情是 service worker 在 Chrome 开发者工具下运行，但在 django 控制台中显示此错误：未找到：/base_layout，并且主页可通过离线模式访问，但其他路径（/用户）不是吨。谷歌浏览器的控制台显示这个错误：

The FetchEvent for "http://localhost:8000/manifest.json" resulted in a network error response: the promise was rejected.
Promise.then (async)
(anonymous) @ serviceworker.js:19
serviceworker.js:1 Uncaught (in promise) TypeError: Failed to fetch

此外，没有加载图像。

我做错了什么？

标签： djangodjango-templatesprogressive-web-apps

解决方案

对于图像，将图像 url 添加到传递给cache.addAll方法的数组中。像这样：

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(staticCacheName).then(function(cache) {
      return cache.addAll([
        '/base_layout',
        '/static/img-1.png',
        '/static/img-2.png',
      ]);
    })
  );
});

为确保您的 css 和 js 文件加载，还将它们的路径添加到数组中。

推荐阅读