Skip to content

Adds PWA configuration

What does this MR do?

When in production mode this prompts the user to Add universis to Home Screen . Then the OS handles the PWA installation. Then the user can start Universis from the homescreen. This works both in mobile and Desktop.

Operating Systems / Browsers to check

  • Android (default browser: Chrome)
  • iOS (default browser: Safari)
  • Windows (default browser: Edge)
  • Linux (default browser: Firefox)
  • macOS (default browser: Safari)
  • Firefox
  • Chrome
  • Edge
  • Safari

Note: Firefox on desktops doesn't support PWAs as of yet

~"To Do" (based on Google's Lighthouse Audit)

  • Check if / can return 200 on load: This will make our web app more reliable in unpredictable network conditions
  • Try optimizing our web app: Our web app takes more time to load on mobile networks which contributes to a bad User Experience. Our app should take approximately 10s to be interactive (Our takes anywhere from 14s to 57s) - Add gzip compression to our server
  • Write documentation for organizations to implement it if they want (created a wiki page: https://gitlab.com/universis/universis-students/-/wikis/Progressive-Web-Applications-(PWAs) )

Feature

Good things to have:

  • Push notifications on message arrival. (Opened #376 to track this)
  • Memoization and caching on all services so that users can access the app in offline mode as well. (Opened #377 to track this)

Here are some screenshots of the PWA running on my machine (Fedora 31) :

Screenshot_from_2019-12-25_14-02-34

Screenshot_from_2019-12-25_15-35-08

Related issues and links

Fix

Other relevant links

Developer Checklist

  • I have successfully run the code of this merge request locally

  • I have verified locally that my changes work for all necessary screen sizes

  • I have tried out the changes of this MR with different users to identify bugs

  • Coding is in progress, and I have marked the MR as WIP

  • Coding is completed and the MR is ready for review

  • My branch is up-to-date with the upstream master branch

  • My MR follows the contribution guidelines

  • I have added a comment with screenshots of the code running locally

Tech review Checklist

Have you verified that what is supposed to happen, actually does, and what is not supposed to happen, indeed does not?

  • The MR accurately describes the changes and has a relevant title/description
  • The MR does what it is supposed to according to its title, description and related issues/links
  • I have successfully run the changes locally, and tried the new code

Overall review Checklist

  • The MR references related issues/MRs
  • The MR provides links to screens and screenshots
  • The commits of the MR describe the changes, have proper wording, and follow the guidelines
  • I have successfully run the changes locally, and tried the new code
  • The MR is ready for merge (rebased, commit squashed if needed, etc)
Edited by Pavlos Karakalidis

Merge request reports