How to precache django html templates using a service worker

Question

I am converting my Django project to a progressive web app, and i am trying to precache my my files for them to be available offline. My problem is, I dont know how to locate my templates (e.g. homepage.html, index.html) to precache them using my service worker. I placed my service worker inside the static folder.

My current folder structure looks like this:

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

How can I map the HTML templates for my main app and my_second_app on my serviceWorker.js inside the static folder? Thanks in advance for anyone who could help. And let me know if I am doing it wrong :)

Anyway, I have successfully precached the static files. This is my code sample.

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();
    })
  );
});

I'm not clear what you are trying to do here. Surely it's not the templates you need to cache, but the rendered output from the views? — Daniel Roseman, Oct 25 '18 at 15:59
@DanielRoseman yeah, im not really sure what to do. I just followed this tutorial https://medium.com/beginners-guide-to-mobile-web-development/convert-django-website-to-a-progressive-web-app-3536bc4f2862 but even the html and css without the data from the views still not available offline. Im still getting the dinosaur from chrome. — jeanawhou, Oct 25 '18 at 16:08

score 1 · Answer 1 · answered May 25 '19 at 07:16

Here's how you do it:

1) setup your serviceworker.js as descried in this great video: https://www.youtube.com/watch?v=ksXwaWHCW6k (At about the 27:30 mark, he starts to rewrite the serviceworker.js to cache fully rendered views (You asked about 'Templates' but I assume you meant views)

2) Initialize your serviceworker on your base.html page like this:

# 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) Place your serviceworker.js file in your mainApp/Templates/ folder

4) Add this to your mainApp/urls.py (This lets you use Django Templates {% Like this %} right inside your serviceworkers.js file!)

# mainApp/urls.py

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

This process worked really well for me on my Django site. Hopefully it will help out anyone else (like me) that stumbled on this post.

How to precache django html templates using a service worker

1 Answers1