Currently, I am in the process of converting my Django project into a progressive web app. As part of this transition, I want to precache my files to ensure they are available offline. However, I'm encountering an issue in locating my templates (e.g. homepage.html, index.html) to precache them using my service worker. The service worker is currently placed inside the static folder.
The current structure of my folders is as follows:
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
I need assistance in mapping the HTML templates for both my main app and my_second_app in my serviceWorker.js located within the static folder. Any help would be greatly appreciated. Please let me know if there's a better approach that I should consider :)
On a positive note, I have managed to successfully precache the static files. Here is a snippet of my code:
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();
})
);
});