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

CHANGELOG.md

@@ -6,14 +6,16 @@
 
 ## 1.0.0
 
+### Added
  - Unit tests
- - Add Oritentation on manifest.json
- - Add tox
- - Add Coverage
+ - Option `Oritentation` on manifest.json
+ - tox.ini
+ - Coverage
 
 
  ## 1.0.1
 
+ ### Added
  - Add django 2 requirement
  - Use templateviews instead of own implementations
  - Add content_types
@@ -22,5 +24,22 @@
  - Add default_config in `__init__.py`
  - Add basic serviceworker
  - Add default offline page and default icons
+ ### Changed
  - Updated the unit tests
+
+ ## 1.0.2
+
+ ### Fixed
+ - Fix tox.ini to install pypandoc
+ ### Added
+ - The support to splash screen for iOS Meta tags `apple-touch-startup-image`
+ - Meta tag `mobile-web-app-capable`
+ - Meta tag `application-name`
+ - Meta tag `msapplication-TileColor` and `msapplication-TileImage` for win8
+ - Meta tag `rel="icon"` with default icon
+ - Images for splash screen
+ - Include the new images to `serviceworker.js`
+ ### Changed
+  - Update `CHANGELOG.md`
+  - Update `README.md`
 

README.md

@@ -36,8 +36,9 @@ INSTALLED_APPS = [
 ]
 ```
 
-Configure your app name, description, and icons in settings.py:
+Configure your app name, description, icons and splash screen images in settings.py:
 ```python
+
 PWA_APP_NAME = 'My App'
 PWA_APP_DESCRIPTION = "My app description"
 PWA_APP_THEME_COLOR = '#0A0302'
@@ -51,12 +52,18 @@ PWA_APP_ICONS = [
         'sizes': '160x160'
     }
 ]
+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)'
+    }
+]
 PWA_APP_DIR = 'ltr'
 PWA_APP_LANG = 'en-US'
 
 ```
 
-All settings are optional, and the app will work fine with its internal defaults.  Highly recommend setting at least `PWA_APP_NAME` and `PWA_APP_DESCRIPTION`.
+All settings are optional, and the app will work fine with its internal defaults.  Highly recommend setting at least `PWA_APP_NAME`, `PWA_APP_DESCRIPTION`, `PWA_APP_ICONS` and `PWA_APP_SPLASH_SCREEN`.
 
 Add the progressive web app URLs to urls.py:
 ```python
@@ -109,6 +116,16 @@ var filesToCache = [
     '/images/icons/icon-192x192.png',
     '/images/icons/icon-384x384.png',
     '/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
@@ -152,7 +169,7 @@ self.addEventListener("fetch", event => {
 
 Adding Your Own Service Worker
 =====
-By default, the service worker implemented by this app is empty.  To add service worker functionality, you'll want to create a `serviceworker.js` or similarly named template in a template directory, and then point at it using the PWA_SERVICE_WORKER_PATH variable (PWA_APP_FETCH_URL is passed through).
+To add service worker functionality, you'll want to create a `serviceworker.js` or similarly named template in a template directory, and then point at it using the PWA_SERVICE_WORKER_PATH variable (PWA_APP_FETCH_URL is passed through).
 
 ```python
 PWA_SERVICE_WORKER_PATH = 'my_app/serviceworker.js'

pwa/app_settings.py

@@ -18,37 +18,80 @@
 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 @@ def get_context_data(self, **kwargs):
 
 
 class OfflineView(TemplateView):
-    template_name = "offline.html"
+    template_name = "offline.html"

setup.py

@@ -22,7 +22,7 @@
 
 setup(
     name='django-pwa',
-    version='1.0.1',
+    version='1.0.2',
     packages=find_packages(),
     install_requires=install_requirements,
     include_package_data=True,

tests/test_template_tag_meta.py

@@ -23,10 +23,25 @@ def test_has_tags(self):
             '<link rel="apple-touch-icon" href="/static/images/icons/icon-384x384.png" sizes="384x384">',
             '<link rel="apple-touch-icon" href="/static/images/icons/icon-512x512.png" sizes="512x512">',
             '<link rel="manifest" href="/manifest.json">',
+            '<meta name="mobile-web-app-capable" content="yes">',
             '<meta name="theme-color" content="#000">',
             '<meta name="apple-mobile-web-app-capable" content="yes">',
             '<meta name="apple-mobile-web-app-title" content="MyApp">',
-            '<meta name="apple-mobile-web-app-status-bar-style" content="default">'
+            '<meta name="application-name" content="MyApp">',
+            '<meta name="apple-mobile-web-app-status-bar-style" content="default">',
+            '<link rel="icon" sizes="512x512" href="/static/images/icons/icon-512x512.png">',
+            '<link href="/static/images/icons/splash-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>',
+            '<link href="/static/images/icons/splash-750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>',
+            '<link href="/static/images/icons/splash-1242x2208.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image"/>',
+            '<link href="/static/images/icons/splash-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image"/>',
+            '<link href="/static/images/icons/splash-828x1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>',
+            '<link href="/static/images/icons/splash-1242x2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image"/>',
+            '<link href="/static/images/icons/splash-1536x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>',
+            '<link href="/static/images/icons/splash-1668x2224.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>',
+            '<link href="/static/images/icons/splash-1668x2388.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>',
+            '<link href="/static/images/icons/splash-2048x2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>',
+            '<meta name="msapplication-TileColor" content="#fff">',
+            '<meta name="msapplication-TileImage" content="/static/images/icons/icon-512x512.png">'
         ]
         for text in tags:
             with self.subTest():
@@ -40,9 +55,9 @@ def test_has_serviceworker(self):
             "navigator.serviceWorker.register('/serviceworker.js', {",
             "scope: '.'",
             "}).then(function (registration) {",
-            "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) {",
-            "console.log('django-progressive-web-app: ServiceWorker registration failed: ', err);",
+            "console.log('django-pwa: ServiceWorker registration failed: ', err);",
             "});",
             "</script>"
         ]

tox.ini

@@ -1,14 +1,22 @@
 [tox]
 envlist =
+    py35-django{20}
+    py35-django{21}
     py36-django{20}
     py36-django{21}
+    py37-django{20}
+    py37-django{21}
 
 [testenv]
 commands = python runtests.py
 setenv =
     DJANGO_SETTINGS_MODULE=tests.settings
     PYTHONPATH={toxinidir}
-basepython = py36: python3.6
+basepython =
+    py35: python3.5
+    py36: python3.6
+    py37: python3.7
 deps =
     django20: Django==2.0
-    django21: Django==2.1
+    django21: Django==2.1
+    pypandoc==1.3.3