add pwa app, serviceworker, offline fallback and appicons

praekeltfoundation · Feb 27, 2017 · 260ef0e · 260ef0e
1 parent 28d7bf2
commit 260ef0e
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 0 deletions.
diff --git a/oneplus/templates/core/main.html b/oneplus/templates/core/main.html
@@ -5,6 +5,8 @@
     <link href="//fonts.googleapis.com/css?family=Asap|Lato" rel="stylesheet">
     <title>DIG-IT | {% block title %}{% endblock %}</title>
     {% load static %}
+    {% load pwa %}
+    {% progressive_web_app_meta %}
     <link rel="stylesheet" type="text/css" href="{% static "css/oneplus.css" %}">
     <link rel="shortcut icon" href="{{ STATIC_URL }}img/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

diff --git a/oneplus/templates/public/public_main.html b/oneplus/templates/public/public_main.html
@@ -5,6 +5,8 @@
     <link href="//fonts.googleapis.com/css?family=Asap|Lato" rel="stylesheet">
     <title>DIG-IT | {% block title %}{% endblock %}</title>
     {% load static %}
+    {% load pwa %}
+    {% progressive_web_app_meta %}
     <link rel="stylesheet" type="text/css" href="{% static "css/oneplus.css" %}">
     <link rel="shortcut icon" href="{{ STATIC_URL }}img/favicon.ico" />
     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

diff --git a/oneplusmvp/media/img/appicons/dig-it_icon_144.png b/oneplusmvp/media/img/appicons/dig-it_icon_144.png
diff --git a/oneplusmvp/media/img/appicons/dig-it_icon_192.png b/oneplusmvp/media/img/appicons/dig-it_icon_192.png
diff --git a/oneplusmvp/media/img/appicons/dig-it_icon_96.png b/oneplusmvp/media/img/appicons/dig-it_icon_96.png
diff --git a/oneplusmvp/media/offline.html b/oneplusmvp/media/offline.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>DIG-IT | Offline</title>
+    <link rel="stylesheet" type="text/css" href="/static/css/oneplus.css">
+    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
+</head>
+<body>
+  <article class="container">
+    <article class="content pale-teal-accent">
+        <h1 class="color-accent center-font">No Internet Connection</h1>
+        <h2 class="center-font">Please connect and try again</h2>
+        <br />
+        <a onClick="window.location.reload()" class="button">Reload</a>
+    </article>
+  </article>
+</body>
diff --git a/oneplusmvp/serviceworker.js b/oneplusmvp/serviceworker.js
@@ -0,0 +1,27 @@
+
+var CACHE = 'app-cache';
+
+self.addEventListener('install', function(evt) {
+  evt.waitUntil(precache());
+});
+
+self.addEventListener('fetch', function(evt) {
+  evt.respondWith(fetch(evt.request).catch(function () {
+    return caches.open(CACHE).then(function(cache) {
+      return cache.match('/media/offline.html');
+    });
+  }));
+});
+
+function precache() {
+  return caches.open(CACHE).then(function (cache) {
+    return cache.addAll([
+      '/',
+      '/media/offline.html',
+      '/static/css/oneplus.css',
+      '/media/img/appicons/dig-it_icon_96.png',
+      '/media/img/appicons/dig-it_icon_144.png',
+      '/media/img/appicons/dig-it_icon_192.png'
+    ]);
+  });
+}
diff --git a/oneplusmvp/settings.py b/oneplusmvp/settings.py
@@ -72,6 +72,7 @@ def abspath(*args):
     "bs4",
     "google_analytics",
     "haystack",
+    "pwa",
     "raven.contrib.django.raven_compat",
     "django.contrib.contenttypes",
     "django.contrib.sessions",
@@ -281,6 +282,29 @@ def abspath(*args):
 FB_SITE_DESC = 'Challenge your maths skills and improve your marks. ' \
                'dig-it helps Gr10 - 12s score in maths - and in life.'
 
+# Progressive Web App
+PWA_SERVICE_WORKER_PATH = os.path.join(ENV_PATH, 'serviceworker.js')
+PWA_APP_NAME = 'dig-it'
+PWA_APP_DESCRIPTION = 'dig-it is a mobisite designed to support Grade 10 - Grade 12 maths learners.'
+PWA_APP_THEME_COLOR = '#68baa7'
+PWA_APP_ICONS = [
+    {
+      "src": "/media/img/appicons/dig-it_icon_96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/media/img/appicons/dig-it_icon_144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/media/img/appicons/dig-it_icon_192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+]
+
 try:
     from local_settings import *
 except ImportError as e:

diff --git a/oneplusmvp/urls.py b/oneplusmvp/urls.py
@@ -13,6 +13,7 @@
     (r'^grappelli/', include('grappelli.urls')),
     url(r'^', include('mobileu.urls')),
     url(r'^admin/', include(admin.site.urls)),
+    url(r'^', include('pwa.urls')),
 ) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
 
 urlpatterns += staticfiles_urlpatterns()
diff --git a/requirements.txt b/requirements.txt
@@ -15,3 +15,4 @@ coverage==4.2
 django-boolean-sum
 elasticsearch
 django-haystack==2.4.1
+django-progressive-web-app==0.1