Added support for webapp with offline page

Just check changelog.txt

Added support for webapp with offline page
574edc5e · Miniontoby · e0930188 · 574edc5e · 574edc5e · 574edc5e
Commit 574edc5e authored 3 years ago by Miniontoby
--- a/.htaccess
+++ b/.htaccess
@@ -9,7 +9,7 @@ RewriteRule ^((?!public/).*)$ public/$1 [L,NC]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule manifest.json manifest.php [L,NC]
-#RewriteRule js/fb_config.js js/fb_config.php [L,NC]
+RewriteRule js/fb_config.js js/fb_config.php [L,NC]
 RewriteRule ^([^/]+)$ index.php?page=$1 [L,NC]

 #RewriteCond %{REQUEST_FILENAME} !-f

--- a/CHANGELOG
+++ b/CHANGELOG
 1.0.0:
 - Created the repo
 - Added images tab and added the logo's including the .ico logo
+1.0.1:
+- Created index.php with templates folder
+- Created config.ini file
+- Added stylesheet
+- Dark theme
+- Created .htaccess
+- Fixed accessability problems
+- Added manifest.json and tried to create webapp with offline page
+- Added icon.png (resized logo.png to make rectangle) and splashscreen.png (different color and resized higher)
+- Added HTML Tags for previews
+- Started working on database
--- a/public/config/config.template.ini
+++ b/public/config/config.template.ini
@@ -9,3 +9,14 @@ app_email =
 app_domain = 
 app_folder = 
 app_language = en_US
+
+[notification]
+fb_enabled = false
+fb_apiKey = 
+fb_authDomain = 
+fb_databaseURL = 
+fb_projectId = 
+fb_storageBucket = 
+fb_messagingSenderId = 
+fb_appId = 
+fb_measurementId = 
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -8,7 +8,7 @@
    --bg-color: #161625;
    --font-color: #e1e1ff;
    --footer-bg: grey;
-    --footer-color: #fff;
+    --footer-color: rgb(0, 0, 0);
 }
 .theme-switch-wrapper { display: flex; align-items: center; } em { margin-left: 10px; font-size: 1rem; } .theme-switch { display: inline-block; height: 34px; position: relative; width: 60px; } .theme-switch input { display:none; } .slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; } .slider:before { background-color: #fff; bottom: 4px; content: ""; height: 26px; left: 4px; position: absolute; transition: .4s; width: 26px; } input:checked + .slider { background-color: #66bb6a; } input:checked + .slider:before { transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }


--- a/public/images/SplashScreen.png
+++ b/public/images/SplashScreen.png
--- a/public/index.php
+++ b/public/index.php
@@ -8,11 +8,15 @@ if (file_exists('templates/' . $page_name . '.php')){
    $page_title = '404 Not Found';
 }
 ?>
-<html>
+<!DOCTYPE html>
+<html lang="<?=$app->config['app_language']?>">
    <head>
        <title><?=$page_title?> - MySchoolDay</title>
+        <meta charset="utf-8">
        <meta name="title" content="<?=$page_title?> - MySchoolDay">
        <meta name="description" content="MySchoolDay WebApp">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="theme-color" content="#ffd260">
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:title" content="<?=$page_title?> - MySchoolDay">
        <meta name="twitter:description" content="MySchoolDay WebApp">
@@ -27,6 +31,7 @@ if (file_exists('templates/' . $page_name . '.php')){
        <link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
        <link rel="stylesheet" href="css/style.css"/>
        <link rel="manifest" href="manifest.json"/>
+        <link rel="apple-touch-icon" href="favicon.ico"/>
    </head>
    <body>

@@ -58,6 +63,12 @@ if (file_exists('templates/' . $page_name . '.php')){
        </nav>
        <noscript>Please Enable JavaScript For Some Features</noscript>
        <script src="js/main.js"></script>
+        <?php
+            if ($app->config['fb_enabled']){ ?>
+                <script src="js/fb_config.js"></script>
+                <script type="module" src="js/fb.js"></script>
+            <?php }
+        ?>
        <footer>
            <span class="copyright">© Copyright 2021 - TheDutchProgrammers</span>
        </footer>

--- a/public/js/fb.js
+++ b/public/js/fb.js
+import "https://www.gstatic.com/firebasejs/8.5.0/firebase-app.js";
+import "https://www.gstatic.com/firebasejs/8.5.0/firebase-analytics.js";
+
+console.log("starting up");
+// firebaseConfig from fb_config.php
+firebase.initializeApp(firebaseConfig);
+//firebase.analytics();
+
+let deferredPrompt;
+
+window.addEventListener('beforeinstallprompt', (event) => {
+	console.log('[fb.js]', 'beforeinstallprompt', event);
+	window.deferredPrompt = event;
+});
+
+window.addEventListener('appinstalled', (event) => {
+	console.log('[fb.js]', 'appinstalled', event);
+	window.deferredPrompt = null;
+});
+
+window.addEventListener('beforeinstallprompt', (e) => {
+	e.preventDefault();
+	deferredPrompt = e;
+	showInstallPromotion();
+	console.log('[fb.js]', `'beforeinstallprompt' event was fired.`);
+});
+
+window.addEventListener('load', function() {
+	if ('serviceWorker' in navigator) {
+		navigator.serviceWorker.register('./js/sw.js');
+	} else {
+		console.warn('[fb.js]', 'Service workers aren\'t supported in this browser.');
+	}
+});
--- a/public/js/fb_config.php
+++ b/public/js/fb_config.php
+<?php
+include('../functions/class.php');
+$app = new MySchoolDay();
+$configs = ["fb_enabled","fb_apiKey","fb_authDomain","fb_databaseURL","fb_projectId","fb_storageBucket","fb_messagingSenderId","fb_appId","fb_measurementId"];
+
+foreach ($app->config as $key => $value) {
+    if(preg_match_all('/fb_(.*)/m', $key)){
+        if (!in_array($key, $configs) || $value == ""){
+            echo $key . " is not set or is null!";
+            return;
+        }
+    }
+}
+header("Content-Type: application/javascript");
+?>
+firebaseConfig = {
+    apiKey: "<?= $app->config['fb_apiKey'] ?>",
+    authDomain: "<?= $app->config['fb_authDomain'] ?>",
+    databaseURL: "<?= $app->config['fb_databaseURL'] ?>",
+    projectId: "<?= $app->config['fb_projectId'] ?>",
+    storageBucket: "<?= $app->config['fb_storageBucket'] ?>",
+    messagingSenderId: "<?= $app->config['fb_messagingSenderId'] ?>",
+    appId: "<?= $app->config['fb_appId'] ?>",
+    measurementId: "<?= $app->config['fb_measurementId'] ?>"
+};
--- a/public/js/sw.js
+++ b/public/js/sw.js
+const CACHE_NAME = "V1";
+importScripts("https://www.gstatic.com/firebasejs/8.5.0/firebase-app.js");
+
+firebaseConfig = {
+    apiKey: "AIzaSyDVu-ql-eQJKLLOMglnkTL3F9mcJsLnTdo",
+    authDomain: "myschoolday-cloud.firebaseapp.com",
+    databaseURL: "https://myschoolday-cloud-default-rtdb.europe-west1.firebasedatabase.app,",
+    projectId: "myschoolday-cloud",
+    storageBucket: "myschoolday-cloud.appspot.com",
+    messagingSenderId: "1009962896793",
+    appId: "1:1009962896793:web:77d1c66d10b61b5db1d708",
+    measurementId: "G-REH6MSC11V"
+};
+firebase.initializeApp(firebaseConfig);
+
+self.addEventListener('install', function(event) {
+	console.log('[ServiceWorker] Install');
+	event.waitUntil((async () => {
+		const cache = await caches.open(CACHE_NAME);
+		await cache.add(new Request("offline.html", {cache: 'reload'}));
+	})());
+	self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+	console.log('[ServiceWorker] Activate');
+	event.waitUntil((async () => {
+		if ('navigationPreload' in self.registration) {
+			await self.registration.navigationPreload.enable();
+		}
+	})());
+
+	// Tell the active service worker to take control of the page immediately.
+	self.clients.claim();
+});
+
+self.addEventListener('fetch', function(event) {
+	console.log('[ServiceWorker] Fetch', event.request.url);
+	if (event.request.mode === 'navigate') {
+		event.respondWith((async () => {
+			try {
+				const preloadResponse = await event.preloadResponse;
+				if (preloadResponse) {
+					return preloadResponse;
+				}
+				const networkResponse = await fetch(event.request);
+				return networkResponse;
+			} catch (error) {
+				console.log('[Service Worker] Fetch failed; returning offline page instead.', error);
+				const cache = await caches.open(CACHE_NAME);
+				const cachedResponse = await cache.match('offline.html');
+				return cachedResponse;
+			}
+		})());
+	}
+});
+
+console.log("sw.js loaded");
\ No newline at end of file
--- a/public/manifest.php
+++ b/public/manifest.php
@@ -12,10 +12,11 @@ $url = ($_SERVER['REQUEST_URI'] == $app->config['app_folder']) ? '/' : $app->con
  "display": "standalone",
  "lang": "<?=$app->config['app_language']?>",
  "icons": [
+      {"src": "images/icon.png", "sizes": "256x256", "type": "image/png", "purpose": "maskable"},
      {"src": "images/icon.png", "sizes": "256x256", "type": "image/png"},
      {"src": "images/logo.png", "sizes": "256x245", "type": "image/png"},
      {"src": "images/LogoMint.png", "sizes": "48x48", "type": "image/png"},
-      {"src": "images/logo-removebg-preview__1_.png", "sizes": "256x245", "type": "image/png"}
+      {"src": "images/SplashScreen.png", "sizes": "512x512", "type": "image/png"}
  ],
  "start_url": "index.php",
  "scope": "<?=$url?>",

--- a/public/offline.html
+++ b/public/offline.html