feat(pwa): add PWA support

app/static/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/static/icons/mstile-150x150.png"/>
+            <TileColor>#1c1c1c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

app/static/icons/safari-pinned-tab.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="282.000000pt" height="282.000000pt" viewBox="0 0 282.000000 282.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,282.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 1410 l0 -1410 1410 0 1410 0 0 1410 0 1410 -312 0 -313 -1 -254
+-409 c-140 -226 -257 -410 -261 -410 -4 0 -11 15 -17 33 -47 140 -103 288
+-103 271 0 -11 -9 -47 -20 -79 -11 -31 -17 -61 -14 -66 3 -5 1 -9 -4 -9 -19 0
+-20 -43 -6 -138 8 -54 18 -104 21 -112 3 -8 5 -19 4 -24 -3 -11 59 -397 66
+-416 3 -8 5 -19 4 -24 -3 -12 18 -146 26 -166 4 -8 5 -19 4 -24 -3 -11 59
+-397 66 -416 3 -8 5 -19 4 -24 -4 -16 22 -161 30 -170 4 -5 -14 -27 -41 -50
+-27 -22 -103 -90 -169 -149 l-120 -108 -99 90 c-55 50 -102 87 -106 83 -4 -4
+-6 -2 -5 3 2 6 -22 35 -54 65 l-57 55 15 94 c9 51 15 98 14 105 -1 6 1 18 4
+26 7 19 49 284 46 296 -1 5 1 16 4 24 7 19 49 284 46 296 -1 5 1 16 4 24 7 19
+49 284 46 296 -1 5 1 16 4 24 3 8 16 78 28 155 l21 139 -28 94 c-15 51 -31 89
+-35 85 -4 -4 -30 -69 -57 -143 -26 -74 -52 -135 -56 -135 -5 0 -122 182 -260
+405 l-253 405 -316 3 -317 2 0 -1410z"/>
+<path d="M978 2675 c183 -80 338 -145 343 -145 5 0 9 -8 10 -17 0 -11 3 -13 6
+-5 3 8 29 12 78 12 49 0 75 -4 78 -12 4 -9 6 -8 6 2 1 10 117 65 336 159 184
+80 335 146 335 148 0 2 -343 3 -762 3 l-763 0 333 -145z"/>
+<path d="M1260 1084 l29 -5 4 -92 3 -92 0 95 -1 95 -32 3 c-32 2 -32 2 -3 -4z"/>
+<path d="M1550 1084 l30 -5 3 -227 3 -227 -1 230 0 230 -32 3 c-32 2 -32 2 -3
+-4z"/>
+<path d="M1294 740 c0 -58 1 -81 3 -52 2 28 2 76 0 105 -2 28 -3 5 -3 -53z"/>
+</g>
+</svg>

app/static/js/pwa.js

@@ -0,0 +1,23 @@
+/**
+ * PWA (progressive web app) support
+ */
+function ready() {
+	// Make sure the browser supports service workers
+	if ("serviceWorker" in navigator) {
+		// Register a new service worker.
+		navigator.serviceWorker
+			.register("/static/js/sw.js")
+			.then((registration) => {
+				console.log(
+					"[PWA] Service worker registered with scope: ",
+					registration.scope
+				);
+			})
+			.catch((error) => {
+				console.error("[PWA] Service worker registration failed: ", error);
+			});
+	}
+}
+
+// Load on document load
+document.addEventListener("DOMContentLoaded", ready);

app/static/js/sw.js

@@ -0,0 +1,13 @@
+// Service worker for PWA support
+
+// Install Hook
+// Triggered when the PWA is installed by the browser.
+self.addEventListener("install", () => {
+	console.log("[Service Worker] Installed");
+});
+
+// Activate Hook
+// Triggered when the PWA is activated by the browser.
+self.addEventListener("activate", () => {
+	console.log("[Service Worker] Activated");
+});

app/static/manifest.json

@@ -0,0 +1,22 @@
+{
+  "name": "Haldis",
+  "short_name": "Haldis",
+  "description": "Zeus WPI's drink ordering system",
+  "theme_color": "#ff6600",
+  "background_color": "#1c1c1c",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "/static/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

app/templates/layout.html

@@ -9,13 +9,15 @@
 	('general_bp.about', 'About'),
 	('stats_blueprint.stats', 'Stats'),
 ] -%}
+
 {% if current_user.is_admin() -%}
 	{% set navbar = navbar + [('admin.index', 'Admin')] -%}
 {% endif -%}
+
 {% set active_page = active_page|default('index') -%}
 
 {% block title %}
-Haldis - {{ active_page|capitalize }}
+	Haldis - {{ active_page|capitalize }}
 	{% if title %}
 		- {{ title }}
 	{% endif %}
@@ -33,6 +35,26 @@ Haldis - {{ active_page|capitalize }}
 	<script type="text/javascript" src="{{ url_for('general_bp.current_theme_js') }}"></script>
 	<script type="text/javascript" src="{{ url_for('static', filename='js/theme.js') }}"></script>
 	<script type="text/javascript" src="{{ url_for('static', filename='js/timer.js') }}"></script>
+	<script type="text/javascript" src="{{ url_for('static', filename='js/pwa.js') }}"></script>
+{% endblock %}
+
+{% block head %}
+	{{ super() }}
+
+	<!-- Manifest (for PWA support) -->
+	<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
+
+	<!-- Favicons -->
+	<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='icons/apple-touch-icon.png') }}">
+	<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='icons/favicon-32x32.png') }}">
+	<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='icons/favicon-16x16.png') }}">
+	<link rel="mask-icon" href="{{ url_for('static', filename='icons/safari-pinned-tab.svg') }}" color="#5bbad5">
+	<link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
+
+	<!-- Theme colors -->
+	<meta name="msapplication-TileColor" content="#1c1c1c">
+	<meta name="msapplication-config" content="{{ url_for('static', filename='browserconfig.xml') }}">
+	<meta name="theme-color" content="#1c1c1c">
 {% endblock %}
 
 {% block navbar %}