CODEWITHSUNDEEP
javascriptdjangoservice-workerprogressive-web-appssw-precache
jeanawhou
jeanawhou

Reputation: 181

How to precache django html templates using a service worker

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

Upvotes: 1

Views: 767

Answers (1)

Michael Romrell
Michael Romrell

Reputation: 1015

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.

Upvotes: 1

Related Questions