Added the splash screen for iOS and Meta tags to Android and Win8

pwa/app_settings.py

@@ -18,37 +18,80 @@ PWA_APP_FETCH_URL = getattr(settings, 'PWA_APP_FETCH_URL', '/')
 PWA_APP_ICONS = getattr(settings, 'PWA_APP_ICONS', [
     {
         'src': '/static/images/icons/icon-72x72.png',
-        'sizes': '72x72'
+        'size': '72x72'
     },
     {
         'src': '/static/images/icons/icon-96x96.png',
-        'sizes': '96x96'
+        'size': '96x96'
     },
     {
         'src': '/static/images/icons/icon-128x128.png',
-        'sizes': '128x128'
+        'size': '128x128'
     },
     {
         'src': '/static/images/icons/icon-144x144.png',
-        'sizes': '144x144'
+        'size': '144x144'
     },
     {
         'src': '/static/images/icons/icon-152x152.png',
-        'sizes': '152x152'
+        'size': '152x152'
     },
     {
         'src': '/static/images/icons/icon-192x192.png',
-        'sizes': '192x192'
+        'size': '192x192'
     },
     {
         'src': '/static/images/icons/icon-384x384.png',
-        'sizes': '384x384'
+        'size': '384x384'
     },
     {
         'src': '/static/images/icons/icon-512x512.png',
-        'sizes': '512x512'
+        'size': '512x512'
     }
 ])
+PWA_APP_SPLASH_SCREEN = getattr(settings, 'PWA_APP_SPLASH_SCREEN', [
+    {
+        'src': '/static/images/icons/splash-640x1136.png',
+        'media': '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)'
+    },
+    {
+        'src': '/static/images/icons/splash-750x1334.png',
+        'media': '(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)'
+    },
+    {
+        'src': '/static/images/icons/splash-1242x2208.png',
+        'media': '(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)'
+    },
+    {
+        'src': '/static/images/icons/splash-1125x2436.png',
+        'media': '(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)'
+    },
+    {
+        'src': '/static/images/icons/splash-828x1792.png',
+        'media': '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)'
+    },
+    {
+        'src': '/static/images/icons/splash-1242x2688.png',
+        'media': '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)'
+    },
+    {
+        'src': '/static/images/icons/splash-1536x2048.png',
+        'media': '(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)'
+    },
+    {
+        'src': '/static/images/icons/splash-1668x2224.png',
+        'media': '(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)'
+    },
+    {
+        'src': '/static/images/icons/splash-1668x2388.png',
+        'media': '(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)'
+    },
+    {
+        'src': '/static/images/icons/splash-2048x2732.png',
+        'media': '(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)'
+    }
+
+])
 PWA_APP_DIR = getattr(settings, 'PWA_APP_DIR', 'auto')
 PWA_APP_LANG = getattr(settings, 'PWA_APP_LANG', 'en-US')
 

pwa/templates/pwa.html

@@ -1,27 +1,48 @@
 <!-- Path to manifest.json -->
 <link rel="manifest" href="/manifest.json">
 
-<!-- Icons for Apple Devices -->
-{% for icon in PWA_APP_ICONS %}
-    <link rel="apple-touch-icon" href="{{ icon.src }}" sizes="{{ icon.sizes }}">
-{% endfor %}
+<!-- Add to homescreen for Chrome on Android -->
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="application-name" content="{{ PWA_APP_NAME }}">
 
+
+<!-- Chrome for Android theme color -->
 <meta name="theme-color" content="{{ PWA_APP_THEME_COLOR }}">
+
+<!-- Add to homescreen for Safari on iOS -->
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-title" content="{{ PWA_APP_NAME }}">
 <meta name="apple-mobile-web-app-status-bar-style" content="default">
+{% for icon in PWA_APP_ICONS %}
+<link rel="apple-touch-icon" href="{{ icon.src }}" sizes="{{ icon.size }}">
+{% endfor %}
+
+
+{% for splash in PWA_APP_SPLASH_SCREEN%}
+<link href="{{ splash.src }}" media="{{ splash.media }}" rel="apple-touch-startup-image"/>
+{% endfor %}
+
+
+<!-- Tile for Win8 -->
+<meta name="msapplication-TileColor" content="{{ PWA_APP_BACKGROUND_COLOR }}">
+{% with PWA_APP_ICONS|last as icon %}
+<meta name="msapplication-TileImage" content="{{ icon.src }}">
+
+
+<link rel="icon" sizes="{{ icon.size }}" href="{{ icon.src }}">
+{% endwith %}
 
 <script type="text/javascript">
     // Initialize the service worker
     if ('serviceWorker' in navigator) {
         navigator.serviceWorker.register('/serviceworker.js', {
-            scope: '.' // <--- THIS BIT IS REQUIRED
+            scope: '.'
         }).then(function (registration) {
             // Registration was successful
-            console.log('django-progressive-web-app: ServiceWorker registration successful with scope: ', registration.scope);
+            console.log('django-pwa: ServiceWorker registration successful with scope: ', registration.scope);
         }, function (err) {
             // registration failed :(
-            console.log('django-progressive-web-app: ServiceWorker registration failed: ', err);
+            console.log('django-pwa: ServiceWorker registration failed: ', err);
         });
     }
 </script>

pwa/templates/serviceworker.js

@@ -12,6 +12,16 @@ var filesToCache = [
     '/static/images/icons/icon-192x192.png',
     '/static/images/icons/icon-384x384.png',
     '/static/images/icons/icon-512x512.png',
+    '/static/images/icons/splash-640x1136.png',
+    '/static/images/icons/splash-750x1334.png',
+    '/static/images/icons/splash-1242x2208.png',
+    '/static/images/icons/splash-1125x2436.png',
+    '/static/images/icons/splash-828x1792.png',
+    '/static/images/icons/splash-1242x2688.png',
+    '/static/images/icons/splash-1536x2048.png',
+    '/static/images/icons/splash-1668x2224.png',
+    '/static/images/icons/splash-1668x2388.png',
+    '/static/images/icons/splash-2048x2732.png'
 ];
 
 // Cache on install

pwa/views.py

@@ -24,4 +24,4 @@ class Manifest(TemplateView):
 
 
 class OfflineView(TemplateView):
-    template_name = "offline.html"
+    template_name = "offline.html"