feat: pwa

.changeset/rude-weeks-vanish.md

@@ -0,0 +1,5 @@
+---
+"@openstapps/app": patch
+---
+
+fix user logout when token expires

frontend/app/angular.json

@@ -40,14 +40,17 @@
                 "glob": "CHANGELOG.md",
                 "input": ".",
                 "output": "assets"
-              }
+              },
+              "src/manifest.webmanifest"
             ],
             "styles": [
               {
                 "input": "src/global.scss",
                 "inject": true
               }
-            ]
+            ],
+            "serviceWorker": true,
+            "ngswConfigPath": "ngsw-config.json"
           },
           "configurations": {
             "production": {
@@ -129,7 +132,8 @@
                 "glob": "**/*",
                 "input": "src/assets",
                 "output": "/assets"
-              }
+              },
+              "src/manifest.webmanifest"
             ]
           }
         },

frontend/app/ngsw-config.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": ["/favicon.ico", "/index.html", "/manifest.webmanifest", "/*.css", "/*.js"]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": ["/assets/**", "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"]
+      }
+    }
+  ]
+}

frontend/app/package.json

@@ -59,6 +59,7 @@
     "@angular/forms": "17.3.0",
     "@angular/platform-browser": "17.3.0",
     "@angular/router": "17.3.0",
+    "@angular/service-worker": "17.3.0",
     "@awesome-cordova-plugins/calendar": "6.6.0",
     "@awesome-cordova-plugins/core": "6.6.0",
     "@capacitor-community/screen-brightness": "6.0.0",
@@ -97,7 +98,7 @@
     "form-data": "4.0.0",
     "geojson": "0.5.0",
     "ionic-appauth": "0.9.0",
-    "jsonpath-plus": "10.0.6",
+    "jsonpath-plus": "10.0.7",
     "maplibre-gl": "4.0.2",
     "material-symbols": "0.17.1",
     "moment": "2.30.1",

frontend/app/resources/logo_pwa.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg2"
+   width="1024"
+   height="1024"
+   viewBox="0 0 1024 1024"
+   sodipodi:docname="logo_pwa.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   xml:space="preserve"
+   inkscape:export-filename="../src/assets/icons/icon-512x512.png"
+   inkscape:export-xdpi="48"
+   inkscape:export-ydpi="48"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs6" /><sodipodi:namedview
+     id="namedview4"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.49999772"
+     inkscape:cx="454.00207"
+     inkscape:cy="347.00158"
+     inkscape:window-width="1504"
+     inkscape:window-height="1729"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g8" /><g
+     inkscape:groupmode="layer"
+     inkscape:label="Image"
+     id="g8"><rect
+       style="fill:#00b5cc;fill-opacity:1;stroke-width:1.10978"
+       id="rect2351"
+       width="379.77051"
+       height="379.77051"
+       x="143.85109"
+       y="141.62936"
+       ry="50.263741"
+       sodipodi:insensitive="true" /><rect
+       style="fill:#3be40b;fill-opacity:1;stroke-width:1.11352"
+       id="rect2353"
+       width="154.14215"
+       height="154.14215"
+       x="580.75684"
+       y="367.25772"
+       ry="25.690359"
+       sodipodi:insensitive="true" /><rect
+       style="fill:#c90e20;fill-opacity:1;stroke-width:1.10084"
+       id="rect2355"
+       width="306.05032"
+       height="306.05032"
+       x="580.75684"
+       y="578.53516"
+       ry="35.743107"
+       sodipodi:insensitive="true" /><rect
+       style="fill:#e4a20b;fill-opacity:1;stroke-width:1.11912"
+       id="rect2357"
+       width="232.33018"
+       height="232.33018"
+       x="291.29138"
+       y="578.53516"
+       ry="33.509159"
+       sodipodi:insensitive="true" /></g></svg>

frontend/app/src/app/app.module.ts

@@ -15,7 +15,7 @@
 import {CommonModule, LocationStrategy, PathLocationStrategy, registerLocaleData} from '@angular/common';
 import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from '@angular/common/http';
 import localeDe from '@angular/common/locales/de';
-import {APP_INITIALIZER, NgModule} from '@angular/core';
+import {APP_INITIALIZER, NgModule, isDevMode} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {RouteReuseStrategy} from '@angular/router';
 import {IonicModule, IonicRouteStrategy, Platform} from '@ionic/angular';
@@ -71,6 +71,7 @@ import {Capacitor} from '@capacitor/core';
 import {SplashScreen} from '@capacitor/splash-screen';
 import maplibregl from 'maplibre-gl';
 import {Protocol} from 'pmtiles';
+import {ServiceWorkerModule} from '@angular/service-worker';
 
 registerLocaleData(localeDe);
 
@@ -185,6 +186,12 @@ export function createTranslateLoader(http: HttpClient) {
     LoggerModule.forRoot({
       level: environment.production ? NgxLoggerLevel.FATAL : NgxLoggerLevel.TRACE,
     }),
+    ServiceWorkerModule.register('ngsw-worker.js', {
+      enabled: !isDevMode(),
+      // Register the ServiceWorker as soon as the application is stable
+      // or after 30 seconds (whichever comes first).
+      registrationStrategy: 'registerWhenStable:30000',
+    }),
   ],
   providers: [
     {

frontend/app/src/index.html

@@ -23,8 +23,11 @@
     <!-- add to homescreen for ios -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <link rel="manifest" href="manifest.webmanifest" />
+    <meta name="theme-color" content="#1976d2" />
   </head>
   <body style="background-color: var(--ion-color-primary)">
     <app-root></app-root>
+    <noscript>Please enable JavaScript to continue using this application.</noscript>
   </body>
 </html>

frontend/app/src/main.ts

@@ -12,6 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
+import '@capacitor/core';
 import {enableProdMode} from '@angular/core';
 import {platformBrowser} from '@angular/platform-browser';
 import {AppModule} from './app/app.module';

frontend/app/src/manifest.webmanifest

@@ -0,0 +1,140 @@
+{
+  "name": "StApps",
+  "short_name": "StApps",
+  "description": "Goethe-Uni App (powered by Open StApps)\n\nMit der Goethe-Uni App kannst dein Studium noch besser organisieren. Informationen über die Universität, Bibliotheken, Räumen, Veranstaltungen und Personen sind leicht über die Suche auffindbar. Zudem sind nun die Bibliotheksdienste und Notenübersicht integriert. Die Informationssysteme des Fachbereich 16 sind nicht integriert.\n\nBei Fragen und Anregungen kann das Feedback Tool in der App genutzt werden.\n\nWeiterhin ist das App-Team der Goethe-Universität unter app@rz.uni-frankfurt.de erreichbar.\n\nFeatures:\n\n- aktuelle Uni News\n- Vorlesungsverzeichnis\n- Umfassende Suche\n- Stellenangebote des Career Service\n- Bibliotheksdienste & Bibliothekskatalog\n- Notenübersicht\n- tagesaktuelle Speisepläne der Mensen und Cafeterien\n- Favoritenliste anlegen und verwalten\n- persönlichen Stundenplan erstellen (nicht mit QIS/LSF synchronisiert)",
+  "theme_color": "#3880ff",
+  "background_color": "#3880ff",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "prefer_related_applications": true,
+  "related_applications": [
+    {
+      "platform": "play",
+      "id": "de.goetheuni"
+    }
+  ],
+  "categories": ["education"],
+  "shortcuts": [
+    {
+      "name": "Mensa",
+      "url": "/canteen"
+    },
+    {
+      "name": "Karte",
+      "url": "/map"
+    },
+    {
+      "name": "Kalender",
+      "url": "/schedule/now"
+    },
+    {
+      "name": "Wochenübersicht",
+      "url": "/schedule/week-overview"
+    },
+    {
+      "name": "Suche",
+      "url": "/search"
+    },
+    {
+      "name": "Meine App",
+      "url": "/profile"
+    }
+  ],
+  "icons": [
+    {
+      "src": "assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ],
+  "screnshots": [
+    {
+      "src": "assets/screenshots/overview.png",
+      "type": "image/png",
+      "sizes": "664x1440"
+    },
+    {
+      "src": "assets/screenshots/canteens.png",
+      "type": "image/png",
+      "sizes": "664x1440"
+    },
+    {
+      "src": "assets/screenshots/map.png",
+      "type": "image/png",
+      "sizes": "664x1440"
+    },
+    {
+      "src": "assets/screenshots/my-app.png",
+      "type": "image/png",
+      "sizes": "664x1440"
+    },
+    {
+      "src": "assets/screenshots/overview-wide.png",
+      "type": "image/png",
+      "sizes": "3204x1440",
+      "form_factor": "wide"
+    },
+    {
+      "src": "assets/screenshots/canteens-wide.png",
+      "type": "image/png",
+      "sizes": "3204x1440",
+      "form_factor": "wide"
+    },
+    {
+      "src": "assets/screenshots/map-wide.png",
+      "type": "image/png",
+      "sizes": "3204x1440",
+      "form_factor": "wide"
+    },
+    {
+      "src": "assets/screenshots/my-app-wide.png",
+      "type": "image/png",
+      "sizes": "3204x1440",
+      "form_factor": "wide"
+    }
+  ]
+}

pnpm-lock.yaml

@@ -722,6 +722,9 @@ importers:
       '@angular/router':
         specifier: 17.3.0
         version: 17.3.0(@angular/common@17.3.0)(@angular/core@17.3.0)(@angular/platform-browser@17.3.0)(rxjs@7.8.1)
+      '@angular/service-worker':
+        specifier: 17.3.0
+        version: 17.3.0(@angular/common@17.3.0)(@angular/core@17.3.0)
       '@awesome-cordova-plugins/calendar':
         specifier: 6.6.0
         version: 6.6.0(@awesome-cordova-plugins/core@6.6.0)(rxjs@7.8.1)
@@ -837,8 +840,8 @@ importers:
         specifier: 0.9.0
         version: 0.9.0(rxjs@7.8.1)
       jsonpath-plus:
-        specifier: 10.0.6
-        version: 10.0.6
+        specifier: 10.0.7
+        version: 10.0.7
       maplibre-gl:
         specifier: 4.0.2
         version: 4.0.2
@@ -887,7 +890,7 @@ importers:
         version: 0.1703.0
       '@angular-devkit/build-angular':
         specifier: 17.3.0
-        version: 17.3.0(@angular/compiler-cli@17.3.0)(@types/node@18.15.3)(karma@6.4.3)(typescript@5.4.2)
+        version: 17.3.0(@angular/compiler-cli@17.3.0)(@angular/service-worker@17.3.0)(@types/node@18.15.3)(karma@6.4.3)(typescript@5.4.2)
       '@angular-devkit/core':
         specifier: 17.3.0
         version: 17.3.0
@@ -2076,7 +2079,7 @@ packages:
       - chokidar
     dev: true
 
-  /@angular-devkit/build-angular@17.3.0(@angular/compiler-cli@17.3.0)(@types/node@18.15.3)(karma@6.4.3)(typescript@5.4.2):
+  /@angular-devkit/build-angular@17.3.0(@angular/compiler-cli@17.3.0)(@angular/service-worker@17.3.0)(@types/node@18.15.3)(karma@6.4.3)(typescript@5.4.2):
     resolution: {integrity: sha512-mC70mZK/liITM4VlGL6hmYPkVsZwAb+X3TxwodBl/g8p/sYijDhK/4QJHzmcHTxLYQQS6nS5CUcr9ARQFkGN2w==}
     engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
     peerDependencies:
@@ -2122,6 +2125,7 @@ packages:
       '@angular-devkit/build-webpack': 0.1703.0(webpack-dev-server@4.15.1)(webpack@5.90.3)
       '@angular-devkit/core': 17.3.0
       '@angular/compiler-cli': 17.3.0(@angular/compiler@17.3.0)(typescript@5.4.2)
+      '@angular/service-worker': 17.3.0(@angular/common@17.3.0)(@angular/core@17.3.0)
       '@babel/core': 7.24.0
       '@babel/generator': 7.23.6
       '@babel/helper-annotate-as-pure': 7.22.5
@@ -2602,6 +2606,18 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /@angular/service-worker@17.3.0(@angular/common@17.3.0)(@angular/core@17.3.0):
+    resolution: {integrity: sha512-kpwuK3aaUrVm1T2YS4Vq7IFBAEW3H83Xyl9KVSpRbdUOEAJjG9hgiPBVz/iu0W1j0T9JkS2GJt/3vP3OW5Tkhg==}
+    engines: {node: ^18.13.0 || >=20.9.0}
+    hasBin: true
+    peerDependencies:
+      '@angular/common': 17.3.0
+      '@angular/core': 17.3.0
+    dependencies:
+      '@angular/common': 17.3.0(@angular/core@17.3.0)(rxjs@7.8.1)
+      '@angular/core': 17.3.0(rxjs@7.8.1)(zone.js@0.14.4)
+      tslib: 2.6.2
+
   /@awesome-cordova-plugins/calendar@6.6.0(@awesome-cordova-plugins/core@6.6.0)(rxjs@7.8.1):
     resolution: {integrity: sha512-NobAl4xvmq2zBeOnLI+pqRVpC66p7OpCwd3jzrQ26h8kqhr0o5wqaNcWN6WBjmgD+/AInVnLUzsziL2QpcmD7g==}
     peerDependencies:
@@ -15039,8 +15055,8 @@ packages:
     engines: {'0': node >= 0.2.0}
     dev: true
 
-  /jsonpath-plus@10.0.6:
-    resolution: {integrity: sha512-Q0KCash90S0WQnPnE/W0uVXQSww4NkO34COfs+gbq0fk+Kv03FYpZ+uU2I7soLLaS4d/ywsm9PxplZsTMmfBmg==}
+  /jsonpath-plus@10.0.7:
+    resolution: {integrity: sha512-GDA8d8fu9+s4QzAzo5LMGiLL/9YjecAX+ytlnqdeXYpU55qME57StDgaHt9R2pA7Dr8U31nwzxNJMJiHkrkRgw==}
     engines: {node: '>=18.0.0'}
     hasBin: true
     dependencies: