PWA не работает должным образом с Django с использованием Service Workers - PullRequest
Новая
       4

PWA не работает должным образом с Django с использованием Service Workers

1 голос
/ 10 февраля 2020

Я разработал небольшой прототип в django с одной моделью: профилем и 2 шаблонами с 2 представлениями (список профилей и страница редактирования профиля) с формой в forms.py. Я хочу протестировать создание PWA с Django, и вот что я сделал: 1) pip install django -progressive-web-app, 2) добавил pwa в установленные приложения, 3) добавил вид рендеринга для базы. html, которая будет использовать работника службы! 

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

4) добавила его к URL-адресам: 

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) и добавил это в файл serviceworker. js, расположенный в приложении / static / 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);
      })
    );
});

Произошло то, что работник службы работает под управлением Chrome инструмента разработчика, но в консоли django он отображает эту ошибку: Not Found: / base_layout, и домашняя страница доступна через Автономный режим, но другой путь (/ пользователь) нет. И консоль Google Chrome отображает эту ошибку: 

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

Кроме того, изображения не загружаются.

Что я сделал не так?

1 Ответ

0 голосов
/ 09 апреля 2020

Для изображений добавьте 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, также добавьте их пути в массив.

...