feat(pwa): add PWA support

This commit is contained in:
maartenvn 2021-10-28 23:35:57 +02:00
parent 4cbc4473de
commit 9e3578425f
13 changed files with 122 additions and 1 deletions

View file

@ -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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

View file

@ -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>

After

Width:  |  Height:  |  Size: 1.8 KiB

23
app/static/js/pwa.js Normal file
View file

@ -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);

13
app/static/js/sw.js Normal file
View file

@ -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");
});

22
app/static/manifest.json Normal file
View file

@ -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"
}
]
}

View file

@ -9,9 +9,11 @@
('general_bp.about', 'About'), ('general_bp.about', 'About'),
('stats_blueprint.stats', 'Stats'), ('stats_blueprint.stats', 'Stats'),
] -%} ] -%}
{% if current_user.is_admin() -%} {% if current_user.is_admin() -%}
{% set navbar = navbar + [('admin.index', 'Admin')] -%} {% set navbar = navbar + [('admin.index', 'Admin')] -%}
{% endif -%} {% endif -%}
{% set active_page = active_page|default('index') -%} {% set active_page = active_page|default('index') -%}
{% block title %} {% block title %}
@ -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('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/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/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 %} {% endblock %}
{% block navbar %} {% block navbar %}