PWA für ein responsives CampusWEB

Das CampusWEB kann als Progressive Web App (PWA) bereitgestellt werden.

Überblick:

1. Einführung
2. PWA-Konfiguration

1. Einführung

Mithilfe der PWA lassen sich CampusWEB Inhalte unabhängig vom Endgerät in der jeweils optimierten Ansicht bereitstellen. Hier Beispiele für die Darstellung des responsiven academyFIVE "HomeResponsiveBundle" auf Desktop-Rechner und Smartphone:

Nach erfolgter Freischaltung durch Simovative erhalten Kunden eine voreingestellte PWA mit den typischen eingebundenen CampusWEB Bundles zum Beispiel für: Startseite, Login, Passwort vergessen, Neuigkeiten, Push-Benachrichtigungen, Termine, Stundenplan und Noten.

Diese und weitere CampusWEB Bundles sind PWA-geeignet bzw. bereits PWA-optimiert. Alle CampusWEB Bundles funktionieren weiterhin in der Desktop-Ansicht, manche sind allerdings noch nicht für mobile Endgeräte und Touch-Displays optimiert. Bitte wenden Sie sich bei Fragen an Ihre Simovative Ansprechperson.

Die eingebundenen Bundles erscheinen in der Desktop-Ansicht bzw. bei einer ausreichend großen Bildschirmbreite in der Tab-Leiste sowie als Überblick in der App-Ansicht durch das Antippen der drei Punkte im Startseiten-Header rechts oben:

Die PWA wird über eine URL aufgerufen: Der CampusWEB Nutzende ruft den Link auf und kann über den Internet-Browser eine Desktop-Verknüpfung erstellen, bei einem Android-Gerät z.B. über die Aktion „Zum Startbildschirm zufügen“. Umgehend erscheint das App-Icon auf dem Startbildschirm, es ist  kein Download über einen App-Store nötig! Auch auf dem Desktop kann diese Verknüpfung mit einem Hochschul-eigenen Icon vorgenommen werden.

 

2. PWA-Konfiguration

Wurde die PWA für ein CampusWEB durch Simovative freigeschaltet, kann die Hochschule diese wie folgt selbst aktivieren und konfigurieren:

Die PWA-Konfiguration selbst erfolgt unter Internetauftritt > Domain > PWA Einstellungen, die mit "*" versehenen Felder sind Pflichtfelder:

Aktiv: Ein Haken in diesem Feld aktiviert die responsive PWA-Darstellung für die jeweilige CampusWEB Domain. Ist kein Haken gesetzt, wird die jeweilige CampusWEB Domain nicht als PWA angezeigt. "Default" ist der Haken gesetzt.

Name*: z.B. Bezeichnung der Hochschule, URL der Hochschul-Website

App Rahmenfarbe: Öffnet der Anwender die PWA, wird diese Farbe für den Rahmen und den Hintergrund beim Laden verwendet

Kurzbeschreibung: Wird aktuell noch nicht dargestellt

Logo URL*: Das Logo wird als App-Icon verwendet, dem Nutzenden beim Laden der App angezeigt und im Header eingeblendet. Einbindung des Logos unter Internetauftritt > Domain > Bildmaterial. Es muss als PNG-Datei mit einer Auflösung von mindestens 192x192 Pixel vorliegen.  

Farben: Die in den folgenden Feldern einzustellenden Farben wirken sich auf den Footer, den Header sowie alle weiteren Standard-Elemente – z.B. auf Überschriften – in der PWA-Ansicht des CampusWEB aus:

• Weißer Header: Ermöglicht die Darstellung eines Logos mit weißem Hintergrund. Es empfiehlt sich, die Primärfarbe und die Button-/Textlinkfarbe auf einen dunklen Wert zu setzen.
• Primärfarbe*: Wird im Header und Footer als Hintergrundfarbe sowie für optische Highlights verwendet. Für ein optisch ansprechendes Design sollten sich von dieser Primärfarbe sowohl die Sekundär- als auch die Tertiärfarbe ableiten.
• Sekundärfarbe*: Wird z.B. in der Menü-Leiste als Hintergrundfarbe verwendet und sollte sich deshalb an die Primärfarbe anpassen
• Tertiärfarbe*: Ist die Farbe der Linie, die die Tab-Leiste vom weiteren Seiteninhalt trennt
• Button-/Textlinkfarbe: Erfolgt hier keine individuelle Einstellung, wird die „Primärfarbe“ verwendet
• Farben auf Voreinstellungen zurücksetzen: Über diesen Button lassen sich die unter „Farben“ getroffenen Änderungen rückgängig machen und auf die default hinterlegten Bespiel-Farben zurücksetzen.

Sobald die Aktionen „Speichern“ und „Publizieren“ (unter Internetauftritt > Seitenstruktur > Button „Publizieren“) durchgeführt wurden, erscheinen die vorgenommenen Änderungen im CampusWEB.

Die allgemeinen Einstellungen zum CampusWEB sind wie bisher und wie in „Grundlegende Einstellungen zum CampusWEB“ beschrieben vorzunehmen.

Die Farb- und CSS Einstellungen im CampusWEB haben bei aktivierter PWA keine Auswirkung mehr.