commit 8b64a692f3190798a137aa5f0c58967c75edd586
parent ce9ca4d80d24dbc144e297cc7945966c02aedd49
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Thu, 4 Mar 2021 10:45:42 -0800
Merge pull request #28 from AsherMorgan/pwa
PWA
Diffstat:
14 files changed, 147 insertions(+), 7 deletions(-)
diff --git a/404.html b/404.html
@@ -6,7 +6,7 @@
<meta name="description" content="Quiz yourself on Spanish vocabulary and conjugations through a free and highly customizable web interface.">
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<link rel="icon" type="image/png" href="https://ashermorgan.github.io/Spanish-Quizzer/images/favicon-32.png">
- <link rel="apple-touch-icon" sizes="180x180" href="https://ashermorgan.github.io/Spanish-Quizzer/images/apple-touch-icon.png">
+ <link rel="apple-touch-icon" sizes="180x180" href="https://ashermorgan.github.io/Spanish-Quizzer/images/favicon-180.png">
<link rel="stylesheet" href="https://ashermorgan.github.io/Spanish-Quizzer/css/global.css"/>
<link rel="stylesheet" href="https://ashermorgan.github.io/Spanish-Quizzer/css/404.css"/>
</head>
diff --git a/css/global.css b/css/global.css
@@ -1,6 +1,6 @@
/******** Variable styles ********/
:root {
- --theme-color: #00aad4;
+ --theme-color: #009bc2;
--foreground-color: #000000;
--background-color: #FFFFFF;
--hover-color: #F0F0F0;
@@ -37,7 +37,7 @@ header {
font-size: 25px;
font-weight: bold;
cursor: pointer;
- color: inherit;
+ color: #000000;
text-decoration: none;
margin: 0px;
padding-top: 15px;
@@ -102,7 +102,6 @@ button.icon img {
/******** Dark mode ********/
body.dark {
- --theme-color: #0088AA;
--foreground-color: #E0E0E0;
--background-color: #121416;
--hover-color: #323436;
diff --git a/data/index.html b/data/index.html
@@ -6,7 +6,7 @@
<meta name="description" content="Quiz yourself on Spanish vocabulary and conjugations through a free and highly customizable web interface.">
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<link rel="icon" type="image/png" href="../images/favicon-32.png">
- <link rel="apple-touch-icon" sizes="180x180" href="../images/apple-touch-icon.png">
+ <link rel="apple-touch-icon" sizes="180x180" href="../images/favicon-180.png">
<link rel="stylesheet" href="../css/global.css">
<link rel="stylesheet" href="../css/data.css">
<script src="../js/global.js"></script>
diff --git a/images/apple-touch-icon.png b/images/apple-touch-icon.png
Binary files differ.
diff --git a/images/favicon-180.png b/images/favicon-180.png
Binary files differ.
diff --git a/images/favicon-192-maskable.png b/images/favicon-192-maskable.png
Binary files differ.
diff --git a/images/favicon-192.png b/images/favicon-192.png
Binary files differ.
diff --git a/images/favicon-32.png b/images/favicon-32.png
Binary files differ.
diff --git a/images/favicon-512-maskable.png b/images/favicon-512-maskable.png
Binary files differ.
diff --git a/images/favicon-512.png b/images/favicon-512.png
Binary files differ.
diff --git a/index.html b/index.html
@@ -5,8 +5,10 @@
<title>Spanish-Quizzer</title>
<meta name="description" content="Quiz yourself on Spanish vocabulary and conjugations through a free and highly customizable web interface.">
<meta name="viewport" content="width=device-width">
+ <meta name="theme-color" content="#009bc2">
+ <link rel="manifest" href="manifest.json">
<link rel="icon" type="image/png" href="images/favicon-32.png">
- <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
+ <link rel="apple-touch-icon" sizes="180x180" href="images/favicon-180.png">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/filtersPage.css">
@@ -37,5 +39,12 @@
<router-view @back="Back"></router-view>
</keep-alive>
</div>
+
+ <script>
+ // Register service worker
+ if ("serviceWorker" in navigator) {
+ navigator.serviceWorker.register("./service-worker.js");
+ }
+ </script>
</body>
</html>
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,41 @@
+{
+ "background_color": "#009bc2",
+ "categories": ["education"],
+ "description": "Quizzes you on Spanish vocabulary and verb conjugations",
+ "display": "fullscreen",
+ "icons": [
+ {
+ "src": "images/favicon-32.png",
+ "sizes": "32x32"
+ },
+ {
+ "src": "images/favicon-180.png",
+ "sizes": "180x180"
+ },
+ {
+ "src": "images/favicon-192.png",
+ "sizes": "192x192"
+ },
+ {
+ "src": "images/favicon-192-maskable.png",
+ "sizes": "192x192",
+ "purpose": "maskable"
+ },
+ {
+ "src": "images/favicon-512.png",
+ "sizes": "512x512"
+ },
+ {
+ "src": "images/favicon-512-maskable.png",
+ "sizes": "512x512",
+ "purpose": "maskable"
+ }
+ ],
+ "lang": "en-US",
+ "name": "Spanish-Quizzer",
+ "orientation": "portrait",
+ "scope": "./",
+ "short_name": "Spanish-Quizzer",
+ "start_url": "./index.html",
+ "theme_color": "#009bc2"
+}
diff --git a/service-worker.js b/service-worker.js
@@ -0,0 +1,91 @@
+// Initialize constants
+const version = "spanish-quizzer-1";
+const resources = [
+ "https://cdn.jsdelivr.net/npm/vue@2.6.12",
+ "https://cdn.jsdelivr.net/npm/vue-router@3.5.1",
+ "https://unpkg.com/papaparse@5.1.1/papaparse.min.js",
+ "./css/app.css",
+ "./css/filtersPage.css",
+ "./css/global.css",
+ "./css/quizzer.css",
+ "./css/reference.css",
+ "./data/verbs.csv",
+ "./data/vocab.csv",
+ "./images/arrow-left.svg",
+ "./images/favicon-32.png",
+ "./images/favicon-180.png",
+ "./images/favicon-192-maskable.png",
+ "./images/favicon-192.png",
+ "./images/favicon-512-maskable.png",
+ "./images/favicon-512.png",
+ "./images/plus.svg",
+ "./images/trash.svg",
+ "./images/x.svg",
+ "./js/app.js",
+ "./js/filters.js",
+ "./js/filtersPage.js",
+ "./js/global.js",
+ "./js/quizzer.js",
+ "./js/reference.js",
+ "./index.html",
+ "./",
+];
+
+
+
+self.addEventListener("install", function(event) {
+ event.waitUntil(async function() {
+ // Cache resources
+ const cache = await caches.open(version);
+ await cache.addAll(resources);
+ }());
+});
+
+
+
+self.addEventListener("fetch", function(event) {
+ // Ignore non-GET requests
+ if (event.request.method !== "GET") return;
+
+ event.respondWith(async function() {
+ // Look for cached response
+ const cache = await caches.open(version);
+ const cachedResponse = await cache.match(event.request);
+
+ if (cachedResponse) {
+ // Update cache in the background
+ event.waitUntil(cache.add(event.request));
+
+ // Returned cached response
+ return cachedResponse;
+ }
+ else {
+ // Fall back to network
+ const response = await fetch(event.request);
+
+ // Add response to cache
+ cache.put(event.request, response.clone());
+
+ // Return response
+ return response;
+ }
+ }());
+});
+
+
+
+self.addEventListener("activate", function(event) {
+ event.waitUntil(
+ // Remove outdated caches
+ caches.keys().then(function (keys) {
+ return Promise.all(
+ keys.filter(function (key) {
+ return key != version;
+ })
+ .map(function (key) {
+ return caches.delete(key);
+ })
+ );
+ })
+ );
+});
diff --git a/tests/index.html b/tests/index.html
@@ -5,7 +5,7 @@
<title>Mocha Tests - Spanish-Quizzer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="icon" type="image/png" href="../images/favicon-32.png">
- <link rel="apple-touch-icon" sizes="180x180" href="../images/apple-touch-icon.png">
+ <link rel="apple-touch-icon" sizes="180x180" href="../images/favicon-180.png">
<link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css"/>
<script src="https://unpkg.com/chai/chai.js"></script>
<script src="https://unpkg.com/mocha/mocha.js"></script>
