WIP PWA support

app.json

@@ -20,6 +20,10 @@
             "description": "Latte cache path",
             "value": "/tmp/latte"
         },
+        "API_SIGNER": {
+            "description": "Signer method",
+            "value": "remote"
+        },
         "API_SIGNER_URL": {
             "description": "Remote signer url",
             "value": "https://signtok.vercel.app/api"

app/Controllers/SettingsController.php

@@ -19,6 +19,7 @@ class SettingsController {
         }
         self::redirect();
     }
+
     static public function api() {
         // TODO, ADD COUNT
         if (isset($_POST['api-test_endpoints'])) {
@@ -33,6 +34,14 @@ class SettingsController {
         self::redirect();
     }
 
+    static public function misc() {
+        if (isset($_POST['misc-sw'])) {
+            $sw = $_POST['misc-sw'];
+            Cookies::set("misc-sw", $sw);
+        }
+        self::redirect();
+    }
+
     static private function redirect() {
         $url = Misc::url('/settings');
         header("Location: {$url}");

app/Models/RSSTemplate.php

@@ -1,9 +1,6 @@
 <?php
 namespace App\Models;
 
-/**
-* Base for templates with a feed
-*/
 class RSSTemplate {
     public string $title;
     public string $desc;

app/Models/SettingsTemplate.php

@@ -6,14 +6,15 @@ use App\Helpers\Cookies;
 use TikScraper\Constants\DownloadMethods;
 
 /**
-* Base for templates with a feed
-*/
+ * Settings model with all possible config items
+ */
 class SettingsTemplate extends BaseTemplate {
     public array $downloaders = [];
     public array $themes = [];
     public bool $isTestEndpoints = false;
     public string $currentDownloader;
     public string $currentTheme;
+    public bool $isServiceWorker = false;
 
     function __construct() {
         parent::__construct("Settings");
@@ -27,5 +28,6 @@ class SettingsTemplate extends BaseTemplate {
         $this->isTestEndpoints = Cookies::check('api-test_endpoints', 'yes');
         $this->currentDownloader = Cookies::downloader();
         $this->currentTheme = Cookies::theme();
+        $this->isServiceWorker = Cookies::check('misc-sw', 'yes');
     }
 }

components/head.latte

@@ -6,7 +6,8 @@
 	<link rel="icon" type="image/png" sizes="32x32" href="{path('/favicon-32x32.png')}">
 	<link rel="icon" type="image/png" sizes="16x16" href="{path('/favicon-16x16.png')}">
 	<link rel="manifest" href="{path('/site.webmanifest')}">
-	<meta property="og:title" content="ProxiTok" />
+	<meta property="og:site_name" content="ProxiTok" />
+	<meta property="og:title" content="{$title}" />
 	<meta property="og:description" content="Alternative frontend for TikTok" />
 	<meta property="og:type" content="website" />
 	{if isset($has_rss)}
@@ -15,4 +16,8 @@
 	<link rel="stylesheet" href="{path('/styles/vendor/cssgg.min.css')}">
 	<link rel="stylesheet" href="{path('/styles/vendor/bulma.min.css')}">
 	<title>{$title} - ProxiTok</title>
+	{*/ Handles optional Service Worker /*}
+	{if \App\Helpers\Cookies::check('misc-sw', 'yes')}
+	<script src="{path('/scripts/setup_sw.js')}"></script>
+	{/if}
 </head>

components/settings/misc.latte

@@ -0,0 +1,18 @@
+{embed '../form.latte', path: '/settings/misc', method: 'POST', submit: true}
+{block fields}
+	<div class="field">
+		<label class="label">Enable service worker</label>
+		<div class="control">
+			<label class="radio">
+    		<input type="radio" name="misc-sw" value="yes" n:attr="checked => $isServiceWorker" />
+				<span>Yes</span>
+			</label>
+			<label class="radio">
+    		<input type="radio" name="misc-sw" value="no" n:attr="checked => !$isServiceWorker" />
+				<span>No</span>
+			</label>
+		</div>
+		<p class="help">This can be used to install the PWA version of ProxiTok</p>
+  </div>
+{/block}
+{/embed}

components/sw.latte

@@ -0,0 +1,3 @@
+{if \App\Helpers\Cookies::check('misc-sw', 'yes')}
+<script src="{path('/scripts/setup_sw.js')}"></script>
+{/if}

routes.php

@@ -57,6 +57,7 @@ $router->mount('/settings', function () use ($router) {
     $router->get('/', 'SettingsController@index');
     $router->post('/general', 'SettingsController@general');
     $router->post('/api', 'SettingsController@api');
+    $router->post('/misc', 'SettingsController@misc');
 });
 
 $router->get('/discover', 'DiscoverController@get');

scripts/setup_sw.js

@@ -0,0 +1,9 @@
+window.addEventListener("load", () => {
+  if (navigator.serviceWorker) {
+    navigator.serviceWorker.register('/sw.js').then(function (reg) {
+      console.log('Service worker registration was successful, scope: ', reg.scope);
+    }).catch(function (error) {
+      console.log('Service worker failed:', error);
+    });
+  }
+})

sw.js

@@ -0,0 +1,17 @@
+const PWA_PRELOAD = {
+  pages: ['/', '/about', '/settings'],
+  scripts: ['/scripts/navbar.js', '/scripts/themes/card.js'],
+  styles: ['/styles/bulma.min.css', '/styles/cssgg.min.css', '/styles/themes/card.css']
+}
+
+self.addEventListener("install", function(e) {
+	e.waitUntil(
+		caches.open("pwa").then(function(cache) {
+			return cache.addAll([
+        ...PWA_PRELOAD.pages,
+        ...PWA_PRELOAD.scripts,
+        ...PWA_PRELOAD.styles
+			]);
+		})
+	);
+});

views/settings.latte

@@ -5,9 +5,18 @@
 {/block}
 
 {block content}
-	<p class="title">General</p>
-	{include '../components/settings/general.latte'}
+	<div class="content">
+		<p class="title">General</p>
+		{include '../components/settings/general.latte'}
+	</div>
 	<hr />
-	<p class="title">Api</p>
-	{include '../components/settings/api.latte'}
+	<div class="content">
+		<p class="title">Api</p>
+		{include '../components/settings/api.latte'}
+	</div>
+	<hr />
+	<div class="content">
+		<p class="title">Misc</p>
+		{include '../components/settings/misc.latte'}
+	</div>
 {/block}