Angular Service Worker в Django не работает в автономном режиме - PullRequest
Новая
       44

Angular Service Worker в Django не работает в автономном режиме

0 голосов
/ 24 июня 2019

Я использую Angular и Django для создания Progressive Web App (PWA) приложения. В частности, я использую пакет @ angular / pwa и хочу иметь веб-приложение, которое также работает в автономном режиме. Как описано ниже, использование простого http-сервера из npm дает правильные результаты, но после развертывания сборки Angular в Django веб-приложение не работает в автономном режиме.

Настройка

Я создаю угловой интерфейс с помощью следующей команды: 

ng build --prod --deploy-url="/static/" --base-href="/" --outputHashing=none

Затем я помещаю файлы в webappBackend/webappBackend/static/. Я также добавил этот каталог как статический каталог в settings.py.

Вещи, которые я должен был исправить перед запуском сервера Django:

  1. --deploy-url не добавляет префикс к manifest.webmanifest и favicon.ico в index.html 
<script src="/static/runtime-es2015.js" type="module"></script>
<script src="/static/polyfills-es2015.js" type="module"></script>
<script src="/static/runtime-es5.js" nomodule></script>
<script src="/static/polyfills-es5.js" nomodule></script>
<script src="/static/main-es2015.js" type="module"></script>
<script src="/static/main-es5.js" nomodule></script></body>
  1. --deploy-url не добавляет префикс к файлам в ngsw.json , поэтому мне пришлось исправить это для ресурсов приложения и ресурсов, а также в hashTable. Здесь я приведу только некоторые изменения для удобства чтения: 
"urls": [
        "/static/favicon.ico",
        "/static/index.html",
        "/static/main-es2015.js",
        "/static/main-es5.js",
        "/static/polyfills-es2015.js",
        "/static/polyfills-es5.js",
        "/static/runtime-es2015.js",
        "/static/runtime-es5.js",
        "/static/styles.css"
      ]
  1. Мне пришлось добавить шаблон URL, чтобы перехватить запрос для ngsw-worker.js : 
url(r'^ngsw-worker.js', 
    (TemplateView.as_view(template_name="ngsw-worker.js",
    content_type='application/javascript', )),
    name='ngsw-worker.js')
  1. Мне нужно было зайти в ngsw-worker.js и изменить добавить префикс / static / к запросу на ngsw.json file: 
const res = yield this.safeFetch(this.adapter.newRequest('/static/ngsw.json?ngsw-cache-bust=' + Math.random()));

Как зарегистрирован сервисный работник: 

ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })

Ожидаемые против фактических результатов

Ожидаемое поведение - веб-приложение также работает в автономном режиме. В настоящее время, если я запускаю http-сервер (простой HTTP-сервер из npm) с 

http-server -o

в static / , он работает как положено, даже в автономном режиме (при использовании http-сервера мне не нужно вносить изменения, описанные выше). Если я запускаю Django, когда я отключаюсь, ничего не загружается.

При использовании Django, когда я перехожу в автономный режим, работник службы не отображается в Dev Tools в Chrome. Кэш-память также пуста. Когда я выхожу в сеть, оба отображаются правильно.

...