feat: pwa

frontend/app/angular.json

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

frontend/app/cypress/integration/app.spec.ts

@@ -26,7 +26,7 @@ describe('App', () => {
   it('should have a proper title', () => {
     cy.visit('/overview');
 
-    cy.title().should('equal', 'StApps');
+    cy.title().should('equal', 'Goethe-Uni');
   });
 
   it('should have a proper working navigation', () => {

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

@@ -55,6 +55,7 @@
     "@angular/forms": "17.3.12",
     "@angular/platform-browser": "17.3.12",
     "@angular/router": "17.3.12",
+    "@angular/service-worker": "17.3.12",
     "@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 @@
     "ionicons": "7.4.0",
     "jsonpath-plus": "10.3.0",
     "maplibre-gl": "4.0.2",
-    "material-symbols": "0.17.1",
+    "material-symbols": "0.27.2",
     "moment": "2.30.1",
     "ngx-date-fns": "11.0.0",
     "ngx-logger": "5.0.12",

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, provideHttpClient, withInterceptorsFromDi} 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 {IonicRouteStrategy, Platform, provideIonicAngular, IonApp} from '@ionic/angular/standalone';
@@ -70,6 +70,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);
 
@@ -182,6 +183,12 @@ export function createTranslateLoader(http: HttpClient) {
       level: environment.production ? NgxLoggerLevel.FATAL : NgxLoggerLevel.TRACE,
     }),
     IonApp,
+    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/app/modules/data/data-icon.config.ts

@@ -33,7 +33,7 @@ export const DataIcons = {
   'id card': SCIcon.badge,
   'message': SCIcon.newspaper,
   'organization': SCIcon.business_center,
-  'periodical': SCIcon.feed,
+  'periodical': SCIcon.news,
   'person': SCIcon.person,
   'point of interest': SCIcon.pin_drop,
   'publication event': SCIcon.campaign,

frontend/app/src/app/modules/data/elements/favorite-button.component.html

@@ -19,6 +19,6 @@
     [size]="24"
     [fill]="(isFavorite$ | async) || false"
     [class.selected]="isFavorite$ | async"
-    name="grade"
+    name="star"
   ></ion-icon>
 </ion-button>

frontend/app/src/app/modules/data/elements/rating.html

@@ -31,7 +31,7 @@
         slot="icon-only"
         [size]="32"
         color="medium"
-        name="grade"
+        name="star"
       ></ion-icon>
     }
     <label class="thank-you">{{ 'ratings.thank_you' | translate }}</label>

frontend/app/src/app/modules/data/elements/title-card.component.html

@@ -42,9 +42,11 @@
     }
     <!-- TODO see above -->
     @if (item.description && item.type !== 'job posting' && buttonShown) {
-      <ion-button expand="full" fill="clear" (click)="toggleDescriptionAccordion()">
-        <ion-icon [name]="buttonState" size="large"></ion-icon>
-      </ion-button>
+      <div class="read-more-container">
+        <ion-button shape="round" size="small" (click)="toggleDescriptionAccordion()">
+          READ_MORE...
+        </ion-button>
+      </div>
     }
   </ion-card-content>
 </ion-card>

frontend/app/src/app/modules/data/elements/title-card.component.scss

@@ -52,3 +52,21 @@ ion-card {
     --color: var(--ion-color-primary-contrast);
   }
 }
+
+.read-more-container {
+  position: relative;
+
+  display: flex;
+  justify-content: flex-end;
+
+  margin-top: -24px;
+
+  background: linear-gradient(to bottom, transparent, var(--ion-color-primary));
+
+  ion-button {
+    --background: var(--ion-color-primary-contrast);
+    --color: var(--ion-color-primary);
+
+    height: 8px;
+  }
+}

frontend/app/src/app/modules/data/elements/title-card.component.ts

@@ -18,8 +18,8 @@ import {SCThings} from '@openstapps/core';
 import {SCIcon} from '../../../util/ion-icon/icon';
 
 const AccordionButtonState = {
-  collapsed: SCIcon.expand_more,
-  expanded: SCIcon.expand_less,
+  collapsed: SCIcon.unfold_more,
+  expanded: SCIcon.unfold_less,
 };
 
 @Component({
@@ -44,7 +44,7 @@ export class TitleCardComponent implements OnInit, OnChanges {
 
   descriptionLinesTotal: number;
 
-  descriptionPreviewLines = 3;
+  descriptionPreviewLines = 4;
 
   descriptionLinesToDisplay = 0;
 

frontend/app/src/app/modules/profile/page/my-courses.html

@@ -26,7 +26,7 @@
                 '_EVENT' | translate: {count: myCoursesDay[1].length}
             }}</ion-label
           >
-          <ion-icon class="ion-accordion-toggle-icon" name="expand_more"></ion-icon>
+          <ion-icon class="ion-accordion-toggle-icon" name="keyboard_arrow_down"></ion-icon>
         </ion-item>
         <ion-list class="ion-padding" slot="content">
           @if (myCoursesDay[1].length === 0) {

frontend/app/src/app/modules/schedule/page/calendar-view.html

@@ -14,10 +14,10 @@
 -->
 <div class="header">
   <ion-button fill="clear" class="left-button" (click)="mainSwiper.pageBackwards()">
-    <ion-icon slot="icon-only" name="chevron_left"></ion-icon>
+    <ion-icon slot="icon-only" name="chevron_backward"></ion-icon>
   </ion-button>
   <ion-button fill="clear" class="right-button" (click)="mainSwiper.pageForward()">
-    <ion-icon slot="icon-only" name="chevron_right"></ion-icon>
+    <ion-icon slot="icon-only" name="chevron_forward"></ion-icon>
   </ion-button>
   <infinite-swiper
     class="header-swiper"

frontend/app/src/app/modules/schedule/page/schedule-view.html

@@ -14,10 +14,10 @@
 -->
 <div class="header">
   <ion-button fill="clear" class="left-button" (click)="mainSwiper.swiperRef.slidePrev()">
-    <ion-icon slot="icon-only" name="chevron_left"></ion-icon>
+    <ion-icon slot="icon-only" name="chevron_backward"></ion-icon>
   </ion-button>
   <ion-button fill="clear" class="right-button" (click)="mainSwiper.swiperRef.slideNext()">
-    <ion-icon slot="icon-only" name="chevron_right"></ion-icon>
+    <ion-icon slot="icon-only" name="chevron_forward"></ion-icon>
   </ion-button>
   <swiper
     class="header-swiper"

frontend/app/src/app/modules/settings/page/settings-page.html

@@ -54,7 +54,7 @@
 
     <ion-button expand="block" (click)="presentResetAlert()" fill="outline">
       {{ 'settings.resetSettings' | translate }}
-      <ion-icon slot="start" name="device_reset"></ion-icon>
+      <ion-icon slot="start" name="history"></ion-icon>
     </ion-button>
   </div>
 </ion-content>

frontend/app/src/app/modules/storage/encrypted-storage.provider.ts

@@ -14,10 +14,12 @@ export class EncryptedStorageProvider {
    * @returns The value of the resource, if found
    */
   async get<T>(key: string): Promise<T | undefined> {
-    if (!Capacitor.isNativePlatform()) return undefined;
-
     try {
-      const jwt = JSON.parse((await SecureStoragePlugin.get({key: `stapps:key:${key}`})).value);
+      const jwt = JSON.parse(
+        await (Capacitor.isNativePlatform()
+          ? SecureStoragePlugin.get({key: `stapps:key:${key}`}).then(it => it.value)
+          : this.storageProvider.get<string>(`stapps:key:${key}`)),
+      );
       const aesKey = await crypto.subtle.importKey('jwk', jwt, {name: 'AES-GCM'}, true, [
         'encrypt',
         'decrypt',
@@ -48,8 +50,6 @@ export class EncryptedStorageProvider {
    * @returns A promise that resolves when the value is stored
    */
   async set<T>(key: string, value: T): Promise<void> {
-    if (!Capacitor.isNativePlatform()) return undefined;
-
     try {
       const compressionStream = new CompressionStream('gzip');
       const writer = compressionStream.writable.getWriter();
@@ -63,11 +63,14 @@ export class EncryptedStorageProvider {
         'decrypt',
       ]);
 
+      const exportedKey = JSON.stringify(await crypto.subtle.exportKey('jwk', aesKey));
       await Promise.all([
-        SecureStoragePlugin.set({
-          key: `stapps:key:${key}`,
-          value: JSON.stringify(await crypto.subtle.exportKey('jwk', aesKey)),
-        }),
+        Capacitor.isNativePlatform()
+          ? SecureStoragePlugin.set({
+              key: `stapps:key:${key}`,
+              value: exportedKey,
+            })
+          : this.storageProvider.put(`stapps:key:${key}`, exportedKey),
         this.storageProvider.put(`encrypted:${key}:iv`, iv),
       ]);
 
@@ -81,10 +84,10 @@ export class EncryptedStorageProvider {
   }
 
   async delete(key: string): Promise<void> {
-    if (!Capacitor.isNativePlatform()) return;
-
     await Promise.all([
-      SecureStoragePlugin.remove({key: `stapps:key:${key}`}),
+      Capacitor.isNativePlatform()
+        ? SecureStoragePlugin.remove({key: `stapps:key:${key}`})
+        : this.storageProvider.delete(`stapps:key:${key}`),
       this.storageProvider.delete(`encrypted:${key}:iv`),
       this.storageProvider.delete(`encrypted:${key}`),
     ]);

frontend/app/src/app/util/ion-icon/ion-icon-custom-component.ts

@@ -150,12 +150,12 @@ const iconMap = new Map<string, MaterialSymbol>([
   [menuSharp, SCIcon.menu],
   [searchOutline, SCIcon.search],
   [searchSharp, SCIcon.search],
-  [chevronExpand, SCIcon.expand_more],
-  [caretDownSharp, SCIcon.expand_more],
+  [chevronExpand, SCIcon.keyboard_arrow_down],
+  [caretDownSharp, SCIcon.keyboard_arrow_down],
   [close, SCIcon.close],
   [closeSharp, SCIcon.close],
   [closeCircle, SCIcon.cancel],
   [ellipsisHorizontal, SCIcon.more_horiz],
-  ['chevron-down-outline', SCIcon.expand_more],
+  ['chevron-down-outline', SCIcon.keyboard_arrow_down],
   ['arrow_back', SCIcon.arrow_back],
 ]);

frontend/app/src/config/profile-page-sections.ts

@@ -62,7 +62,7 @@ export const profilePageSections: SCSection[] = [
     links: [
       {
         name: 'Favorites',
-        icon: SCIcon.grade,
+        icon: SCIcon.star,
         link: ['/favorites'],
         translations: {
           de: {

frontend/app/src/index.html

@@ -1,9 +1,9 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" style="background: var(--ion-background-color)">
   <head>
     <meta charset="utf-8" />
     <meta name="color-scheme" content="light dark" />
-    <title>StApps</title>
+    <title>Goethe-Uni</title>
 
     <base href="/" />
     <meta
@@ -18,13 +18,228 @@
     <meta name="format-detection" content="telephone=no" />
     <meta name="msapplication-tap-highlight" content="no" />
 
-    <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
+    <link rel="icon" type="image/png" href="assets/icons/icon_x96.png" />
 
     <!-- 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="#00618F" />
+
+    <link rel="apple-touch-icon" href="assets/icons/apple-touch-icon.png" />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="assets/splash_screens/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash_screens/4__iPhone_SE__iPod_touch_5th_generation_and_later_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="assets/splash_screens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="assets/splash_screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash_screens/10.5__iPad_Air_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="assets/splash_screens/iPhone_16__iPhone_15_Pro__iPhone_15__iPhone_14_Pro_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="assets/splash_screens/4__iPhone_SE__iPod_touch_5th_generation_and_later_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="assets/splash_screens/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="assets/splash_screens/12.9__iPad_Pro_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash_screens/10.2__iPad_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="assets/splash_screens/iPhone_11__iPhone_XR_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 1032px) and (device-height: 1376px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash_screens/13__iPad_Pro_M4_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      href="assets/splash_screens/iPhone_16__iPhone_15_Pro__iPhone_15__iPhone_14_Pro_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      href="assets/splash_screens/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 834px) and (device-height: 1210px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash_screens/11__iPad_Pro_M4_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      href="assets/splash_screens/iPhone_16_Pro_Max_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 834px) and (device-height: 1210px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="assets/splash_screens/11__iPad_Pro_M4_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash_screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="assets/splash_screens/10.5__iPad_Air_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash_screens/12.9__iPad_Pro_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      href="assets/splash_screens/iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="assets/splash_screens/iPhone_11_Pro_Max__iPhone_XS_Max_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      href="assets/splash_screens/iPhone_11_Pro_Max__iPhone_XS_Max_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      href="assets/splash_screens/iPhone_16_Pro_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="assets/splash_screens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      href="assets/splash_screens/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash_screens/11__iPad_Pro__10.5__iPad_Pro_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash_screens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="assets/splash_screens/10.9__iPad_Air_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash_screens/8.3__iPad_Mini_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="assets/splash_screens/iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash_screens/iPhone_11__iPhone_XR_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="assets/splash_screens/8.3__iPad_Mini_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="assets/splash_screens/iPhone_16_Plus__iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      href="assets/splash_screens/iPhone_16_Plus__iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="assets/splash_screens/10.2__iPad_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="assets/splash_screens/iPhone_16_Pro_Max_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 1032px) and (device-height: 1376px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="assets/splash_screens/13__iPad_Pro_M4_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="assets/splash_screens/11__iPad_Pro__10.5__iPad_Pro_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash_screens/10.9__iPad_Air_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      href="assets/splash_screens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="assets/splash_screens/iPhone_16_Pro_portrait.png"
+    />
   </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,214 @@
+{
+  "name": "Goethe-Uni",
+  "short_name": "Goethe-Uni",
+  "description": "Mit 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.",
+  "theme_color": "#00618F",
+  "background_color": "#00618F",
+  "display": "standalone",
+  "display_override": ["standalone"],
+  "orientation": "portrait-primary",
+  "scope": "./",
+  "start_url": "./",
+  "categories": ["education"],
+  "prefer_related_applications": false,
+  "related_applications": [
+    {
+      "platform": "play",
+      "id": "de.goetheuni"
+    }
+  ],
+  "shortcuts": [
+    {
+      "name": "Suche",
+      "url": "/search",
+      "icons": [
+        {
+          "src": "assets/icons/search_x192.png",
+          "sizes": "192x192",
+          "type": "image/png",
+          "purpose": "any"
+        }
+      ]
+    },
+    {
+      "name": "Mensa",
+      "url": "/canteen",
+      "icons": [
+        {
+          "src": "assets/icons/local_cafe_x192.png",
+          "sizes": "192x192",
+          "type": "image/png",
+          "purpose": "any"
+        }
+      ]
+    },
+    {
+      "name": "Karte",
+      "url": "/map",
+      "icons": [
+        {
+          "src": "assets/icons/map_x192.png",
+          "sizes": "192x192",
+          "type": "image/png",
+          "purpose": "any"
+        }
+      ]
+    },
+    {
+      "name": "Meine App",
+      "url": "/profile",
+      "icons": [
+        {
+          "src": "assets/icons/school_x192.png",
+          "sizes": "192x192",
+          "type": "image/png",
+          "purpose": "monochrome any"
+        }
+      ]
+    }
+  ],
+  "icons": [
+    {
+      "src": "assets/icons/maskable_icon_x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "assets/icons/maskable_icon_x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "assets/icons/maskable_icon_x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "assets/icons/maskable_icon_x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "assets/icons/maskable_icon_x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "assets/icons/maskable_icon_x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "assets/icons/maskable_icon_x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "assets/icons/icon_x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "assets/icons/icon_x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "assets/icons/icon_x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "assets/icons/icon_x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "assets/icons/icon_x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "assets/icons/icon_x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "assets/icons/icon_x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "/assets/screenshots/overview.png",
+      "type": "image/png",
+      "sizes": "664x1440",
+      "form_factor": "narrow",
+      "label": "Übersicht"
+    },
+    {
+      "src": "/assets/screenshots/canteens.png",
+      "type": "image/png",
+      "sizes": "664x1440",
+      "form_factor": "narrow",
+      "label": "Mensen"
+    },
+    {
+      "src": "/assets/screenshots/map.png",
+      "type": "image/png",
+      "sizes": "664x1440",
+      "form_factor": "narrow",
+      "label": "Karte"
+    },
+    {
+      "src": "/assets/screenshots/my-app.png",
+      "type": "image/png",
+      "sizes": "664x1440",
+      "form_factor": "narrow",
+      "label": "Meine App"
+    },
+    {
+      "src": "/assets/screenshots/overview-wide.png",
+      "type": "image/png",
+      "sizes": "2304x1440",
+      "form_factor": "wide",
+      "label": "Übersicht"
+    },
+    {
+      "src": "/assets/screenshots/canteens-wide.png",
+      "type": "image/png",
+      "sizes": "2304x1440",
+      "form_factor": "wide",
+      "label": "Mensen"
+    },
+    {
+      "src": "/assets/screenshots/map-wide.png",
+      "type": "image/png",
+      "sizes": "2304x1440",
+      "form_factor": "wide",
+      "label": "Karte"
+    },
+    {
+      "src": "/assets/screenshots/my-app-wide.png",
+      "type": "image/png",
+      "sizes": "2304x1440",
+      "form_factor": "wide",
+      "label": "Meine App"
+    }
+  ]
+}