Masterplan Optimiser

PWA Installation

The web calendar can be installed as a Progressive Web App (PWA) on your phone, tablet, or computer. Once installed, it behaves like a native app - with its own icon, offline caching, and push notifications.

What is a PWA?

A Progressive Web App is a website that can be “installed” on your device. It opens in its own window (without the browser address bar), can work offline, and supports push notifications. No app store download is required - you install it directly from the browser.

Prerequisites

  • A server instance must be running and accessible over HTTPS (see Server Installation).
  • You need the server URL from your coordinator or server administrator (e.g. https://mp-opt.net).
  • An activation link or QR code from an admin to create your account.

Step 1 - Open the Web Calendar

  1. Open Safari (iOS) or Chrome (Android / Desktop) on your device.
  2. Navigate to the server URL provided by your administrator (e.g. https://mp-opt.net).
  3. If you have an activation link, open it directly - it will take you to the registration page.
Mobile browser showing the web calendar login page
The web calendar login page in a mobile browser.

Step 2a - Install on iOS (iPhone / iPad)

  1. Open the web calendar in Safari. (PWA installation only works from Safari on iOS.)
  2. Tap the Share button at the bottom of the screen (the square with an arrow pointing up).
  3. Scroll down in the share sheet and tap Add to Home Screen.
  4. Choose a name (the default is fine) and tap Add.
  5. The app icon now appears on your home screen. Tap it to open the calendar in its own window.
iOS Safari share menu showing the Add to Home Screen option
Tap Share then “Add to Home Screen” in Safari.
iOS Add to Home Screen dialogue showing the app name and Add button
Confirm the app name and tap Add.

Step 2b - Install on Android

  1. Open the web calendar in Chrome.
  2. Chrome will show an Install app banner at the bottom of the screen. Tap Install.
  3. If the banner does not appear, tap the three-dot menu in the top-right corner and select Add to Home screen or Install app.
  4. Confirm the installation. The app icon appears on your home screen and in your app drawer.
Chrome on Android showing the install app banner at the bottom of the screen
Chrome's install banner on Android.

Step 2c - Install on Desktop (Chrome / Edge)

  1. Open the web calendar in Chrome or Edge.
  2. In the address bar, look for the install icon (a monitor with a down arrow or a + icon).
  3. Click Install in the prompt.
  4. The calendar opens in its own window and appears in your taskbar / dock and app list.

Step 3 - Register Your Account

  1. Your server administrator will provide an activation link or a QR code. Open the link or scan the QR code with your phone.
  2. The activation page will ask you to register a passkey (Face ID, fingerprint, or security key). This replaces traditional passwords.
  3. Once registered, you are logged in and can view your schedule.
  4. For future logins, open the app and authenticate with your passkey - no username or password needed.
The activation page showing a passkey registration prompt
Registering a passkey during activation.

Step 4 - Enable Push Notifications (Optional)

  1. After logging in, you may see a notification bell icon or a prompt to enable notifications.
  2. Tap Allow when your browser asks for notification permissions.
  3. You will now receive push notifications for schedule changes and announcements from the Head-Organiser.

Push notifications require the server to have VAPID keys configured. If notifications are not available, your server administrator may need to enable them (see Server Installation - Web Push).

Offline Access

Once you have opened the calendar at least once, the PWA caches the application and your schedule data. You can view your tasks even without an internet connection. The next time you go online, the app will automatically sync any updates.

Uninstalling the PWA

iOS

Long-press the app icon on your home screen and tap Remove App (or Delete Bookmark).

Android

Long-press the app icon and drag it to Uninstall, or go to Settings → Apps and uninstall from there.

Desktop (Chrome / Edge)

Open the installed app, click the three-dot menu in the title bar, and select Uninstall.

Troubleshooting

“Add to Home Screen” option not visible (iOS)

Make sure you are using Safari. Other browsers on iOS (Chrome, Firefox) do not support PWA installation. Also ensure you are accessing the site over HTTPS.

Install banner not showing (Android)

Chrome only shows the install banner after you have visited the site a couple of times. Use the three-dot menu → Install app as an alternative.

Push notifications not working

Check that you have allowed notification permissions for the app in your device settings. On iOS 16.4+, push notifications are supported for PWAs added to the home screen - make sure you installed through Safari first.

Activation link expired

Ask your administrator to generate a new activation link or QR code. Links are single-use and expire after a set period.

Next Steps