From d66e0ea21a9d520062e19f1b8a185b03bc7bd82c Mon Sep 17 00:00:00 2001 From: Matthew Grove Date: Wed, 1 Feb 2023 23:29:43 +0000 Subject: [PATCH] [FEAT] Re-enable basic PWA support without customisation options --- breccia_mapper/settings.py | 29 +++++++-- breccia_mapper/static/js/serviceworker.js | 77 +++++++++++++++++------ breccia_mapper/templates/base.html | 4 +- 3 files changed, 83 insertions(+), 27 deletions(-) diff --git a/breccia_mapper/settings.py b/breccia_mapper/settings.py index a72cf16..829d71e 100644 --- a/breccia_mapper/settings.py +++ b/breccia_mapper/settings.py @@ -31,6 +31,18 @@ The most likely required settings are: SECRET_KEY, DEBUG, ALLOWED_HOSTS, DATABAS default: http The protocol the site uses. Valid options are http or https. +- PROJECT_LONG_NAME + default: Project Network Mapper + The project's full name + +- PROJECT_SHORT_NAME + default: Network Mapper + The project's short/abbreviated name. + +- PROJECT_THEME_COLOR + default: 212121 + The project's theme color, in hex format (excluding the leading #). + - ALLOWED_HOSTS default: * if DEBUG else localhost Accepted values for server header in request - protects against CSRF and CSS attacks @@ -403,6 +415,9 @@ CONSTANCE_CONFIG = { 'PROJECT_TAGLINE': ( 'Here is your project\'s tagline.', 'Project tagline'), + 'PROJECT_THEME_COLOR': ( + '#212121', + 'The hex color code for the project\'s theme color, including the #.'), 'HOMEPAGE_HEADER_IMAGE': ( '800x500.png', 'Homepage header image', @@ -456,6 +471,7 @@ CONSTANCE_CONFIG_FIELDSETS = { 'PROJECT_SHORT_NAME', 'PROJECT_LEAD', 'PROJECT_TAGLINE', + 'PROJECT_THEME_COLOR', ), 'Homepage configuration': ( 'HOMEPAGE_HEADER_IMAGE_SHRINK', @@ -545,9 +561,9 @@ BOOTSTRAP_DATEPICKER_PLUS = { PWA_SERVICE_WORKER_PATH = BASE_DIR.joinpath('static/js', 'serviceworker.js') -PWA_APP_NAME = 'networkmapper' -PWA_APP_DESCRIPTION = "Network Mapper" -PWA_APP_THEME_COLOR = '#000000' +PWA_APP_NAME = CONSTANCE_CONFIG["PROJECT_SHORT_NAME"][0] +PWA_APP_DESCRIPTION = CONSTANCE_CONFIG["PROJECT_LONG_NAME"][0] +PWA_APP_THEME_COLOR = CONSTANCE_CONFIG["PROJECT_THEME_COLOR"][0] PWA_APP_BACKGROUND_COLOR = '#ffffff' PWA_APP_DISPLAY = 'standalone' PWA_APP_SCOPE = '/' @@ -556,24 +572,25 @@ PWA_APP_START_URL = '/' PWA_APP_STATUS_BAR_COLOR = 'default' PWA_APP_ICONS = [ { - 'src': 'media/icon-192x192.png', + 'src': '/media/icon-192x192.png', 'sizes': '160x160' } ] PWA_APP_ICONS_APPLE = [ { - 'src': 'media/icon-192x192.png', + 'src': '/media/icon-192x192.png', 'sizes': '160x160' } ] PWA_APP_SPLASH_SCREEN = [ { - 'src': 'media/icon.png', + 'src': '/media/icon.png', 'media': '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)' } ] PWA_APP_DIR = 'ltr' PWA_APP_LANG = 'en-GB' +PWA_APP_DEBUG_MODE = False # Database default automatic primary key DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField' diff --git a/breccia_mapper/static/js/serviceworker.js b/breccia_mapper/static/js/serviceworker.js index 9ed99a2..569335e 100644 --- a/breccia_mapper/static/js/serviceworker.js +++ b/breccia_mapper/static/js/serviceworker.js @@ -1,24 +1,61 @@ -var staticCacheName = "djangopwa-v1"; +var staticCacheName = "django-pwa-v" + new Date().getTime(); +var filesToCache = [ + '/offline', + '/css/django-pwa-app.css', + '/media/icon-72x72.png', + '/media/icon-96x96.png', + '/media/icon-128x128.png', + '/media/icon-144x144.png', + '/media/icon-152x152.png', + '/media/icon-192x192.png', + '/media/icon-384x384.png', + '/media/icon-512x512.png', + '/static/media/splash-640x1136.png', + '/static/media/splash-750x1334.png', + '/static/media/splash-1242x2208.png', + '/static/media/splash-1125x2436.png', + '/static/media/splash-828x1792.png', + '/static/media/splash-1242x2688.png', + '/static/media/splash-1536x2048.png', + '/static/media/splash-1668x2224.png', + '/static/media/splash-1668x2388.png', + '/static/media/splash-2048x2732.png' +]; -self.addEventListener("install", function (event) { - event.waitUntil( - caches.open(staticCacheName).then(function (cache) { - return cache.addAll([""]); - }) - ); +// Cache on install +self.addEventListener("install", event => { + this.skipWaiting(); + event.waitUntil( + caches.open(staticCacheName) + .then(cache => { + return cache.addAll(filesToCache); + }) + ) }); -self.addEventListener("fetch", function (event) { - var requestUrl = new URL(event.request.url); - if (requestUrl.origin === location.origin) { - if (requestUrl.pathname === "/") { - event.respondWith(caches.match("")); - return; - } - } - event.respondWith( - caches.match(event.request).then(function (response) { - return response || fetch(event.request); - }) - ); +// Clear cache on activate +self.addEventListener('activate', event => { + event.waitUntil( + caches.keys().then(cacheNames => { + return Promise.all( + cacheNames + .filter(cacheName => (cacheName.startsWith("django-pwa-"))) + .filter(cacheName => (cacheName !== staticCacheName)) + .map(cacheName => caches.delete(cacheName)) + ); + }) + ); }); + +// Serve from Cache +self.addEventListener("fetch", event => { + event.respondWith( + caches.match(event.request) + .then(response => { + return response || fetch(event.request); + }) + .catch(() => { + return caches.match('offline'); + }) + ) +}); \ No newline at end of file diff --git a/breccia_mapper/templates/base.html b/breccia_mapper/templates/base.html index 49cc7de..5f91f99 100755 --- a/breccia_mapper/templates/base.html +++ b/breccia_mapper/templates/base.html @@ -7,7 +7,6 @@ {% load pwa %} -{% progressive_web_app_meta %} @@ -53,6 +52,9 @@ {{ form.media.css }} {% endif %} + + {% progressive_web_app_meta %} + {% block extra_head %}{% endblock %}