[FEAT] Re-enable basic PWA support without customisation options

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_NAME = CONSTANCE_CONFIG["PROJECT_SHORT_NAME"][0]
-PWA_APP_DESCRIPTION = "Network Mapper"
+PWA_APP_DESCRIPTION = CONSTANCE_CONFIG["PROJECT_LONG_NAME"][0]
-PWA_APP_THEME_COLOR = '#000000'
+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'

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) {
+// Cache on install
-  event.waitUntil(
+self.addEventListener("install", event => {
-    caches.open(staticCacheName).then(function (cache) {
+    this.skipWaiting();
-      return cache.addAll([""]);
+    event.waitUntil(
-    })
+        caches.open(staticCacheName)
-  );
+            .then(cache => {
+                return cache.addAll(filesToCache);
+            })
+    )
 });
 
-self.addEventListener("fetch", function (event) {
+// Clear cache on activate
-  var requestUrl = new URL(event.request.url);
+self.addEventListener('activate', event => {
-  if (requestUrl.origin === location.origin) {
+    event.waitUntil(
-    if (requestUrl.pathname === "/") {
+        caches.keys().then(cacheNames => {
-      event.respondWith(caches.match(""));
+            return Promise.all(
-      return;
+                cacheNames
-    }
+                    .filter(cacheName => (cacheName.startsWith("django-pwa-")))
-  }
+                    .filter(cacheName => (cacheName !== staticCacheName))
-  event.respondWith(
+                    .map(cacheName => caches.delete(cacheName))
-    caches.match(event.request).then(function (response) {
+            );
-      return response || fetch(event.request);
+        })
-    })
+    );
-  );
+});
+
+// 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');
+            })
+    )
 });

breccia_mapper/templates/base.html

@@ -7,7 +7,6 @@
 <html lang="{{ LANGUAGE_CODE|default:'en_us' }}">
 
 {% load pwa %}
-{% progressive_web_app_meta %}
 
 <link rel="manifest" href="manifest.json">
 
@@ -53,6 +52,9 @@
         {{ form.media.css }}
     {% endif %}
 
+    <!-- PWA metadata -->
+    {% progressive_web_app_meta %}
+
     {% block extra_head %}{% endblock %}
 
 </head>