Как предварительно кэшировать HTML-шаблоны Django с помощью сервисного работника - PullRequest
Новая
       30

Как предварительно кэшировать HTML-шаблоны Django с помощью сервисного работника

0 голосов
/ 25 октября 2018

Я конвертирую свой проект Django в прогрессивное веб-приложение и пытаюсь предварительно кэшировать свои файлы, чтобы они были доступны в автономном режиме.Моя проблема в том, что я не знаю, как найти свои шаблоны (например, homepage.html, index.html), чтобы их предварительно кэшировать, используя мой сервисный работник.Я поместил своего сервисного работника в статическую папку.

Моя текущая структура папок выглядит следующим образом: 

main/
-- migrations/
-- static/
---- js/
------ core/
------ plugins/
------ app.js
---- css/ 
---- img/ 
---- templates/
------ base.html
------ about.html
------ homepage.html
----*serviceWorker.js*
-- __init.py__
-- admin.py
-- apps.py
-- models.py
-- views.py
my_second_app/
-- migrations/
-- static/
---- js/
------ index.js
---- css/ 
---- img/ 
---- templates/
------ base.html
------ user.html
------ page.html
-- __init__.py

Как я могу отобразить шаблоны HTML для моего основного приложения и my_second_app на моем serviceWorker.JS внутри статической папки?Заранее спасибо всем, кто мог помочь.И дайте мне знать, если я делаю это неправильно:)

Во всяком случае, я успешно прекодировал статические файлы.Это мой пример кода.

const precached = [
  '/',
  '/screener/',
  '/accounts/login/',
  '/accounts/signup/',
  '/assets/js/now-ui-dashboard.js',
  '/assets/js/core/bootstrap.min.js',
  '/assets/js/core/jquery-ui.min.js',
  '/assets/js/core/jquery.3.2.1.min.js',
  '/assets/js/plugins/chart.bundle.min.js',
  '/assets/css/accounts.css',
  '/assets/css/bootstrap.min.css',
  '/assets/css/now-ui-dashboard.css',
  '/assets/css/user.css',
  '/assets/fonts/nucleo-outline.ttf'
]

self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open(staticCacheName).then(cache => {
      return cache.addAll(precached);
    })
    .then(() => {
      return self.skipWaiting();
    })
  );
});

1 Ответ

0 голосов
/ 25 мая 2019

Вот как вы это сделаете:

1) настройте ваш serviceworker.js, как описано в этом великолепном видео: https://www.youtube.com/watch?v=ksXwaWHCW6k (Примерно в 27:30 он начинает переписывать работника службы.js для кэширования полностью визуализированных представлений (вы спрашивали о «шаблонах», но я предполагаю, что вы имели в виду представления)

2) Инициализируйте ваш serviceworker на вашей странице base.html следующим образом: 

# in the <head> tag of your mainApp/base.html

    <script type="text/javascript">
        // Initialize the service worker
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register("{% url 'serviceworker' %}", { 
              scope: '.' // <--- THIS BIT IS REQUIRED
            }).then(function (registration) {
                console.log('ServiceWorker registration successful with scope: ', registration.scope);
            }, function (err) {
                console.log('ServiceWorker registration failed: ', err);
            });
        }
    </script>

3) Поместите свой файл serviceworker.js в папку mainApp / Templates /

4) Добавьте его в свой mainApp / urls.py (это позволит вам использовать шаблоны Django {% Like this%} прямо в ваших работниках по обслуживанию).JS файл!) 

# mainApp/urls.py

urlpatterns = [
    ...
    path('serviceworker', (TemplateView.as_view(
      template_name="browsepages/serviceworker.js", 
      content_type='application/javascript',)), 
      name='serviceworker'),
]

Этот процесс работал очень хорошо для меня на моем сайте Django.Надеюсь, это поможет кому-то еще (например, мне), который наткнулся на этот пост.

...