Using Progressive Web Apps

uTeach Cloud can be used as a progressive web app (PWA).

What’s a PWA?

Basically, a PWA is half-way between a web app and a mobile native / desktop app. That might not mean a lot to you, but actually the PWA functionality adds quite a bit of benefit to the typical user.

So what can you do with a PWA?

PWA Settings

Before we get into the use cases, let’s take a bit of time to talk about the settings.

If you navigate to Settings -> PWA Settings you’ll find the main settings page.

First, create PWA and then we’ll need to put in some info:

App Name: This is the name you’d like to be displayed when you install the PWA. I recommend your school name.

App Short Name: The app short name is used by some systems when the full name cannot be displayed. I recommend you school’s initials.

Start URL: This is the URL the app will open to by default. It’s best to use the base URL of your uTeach Cloud account.

Background Color: This is the browser background color. White is fine in most cases.

Theme Color: This is the color of the window which will be used. Feel free to change it, but it tends to look a bit out of place if you choose a bright color. Most windows will be grey or black.

Display Type: Standalone will be the default choice here.

Icons: You’ll need to upload some default icons that will be shown depending on the type of device the PWA is installed on. If you have an icon / logo already, you can use the PWA Image Generator to help out here.

Splashes: Splashes are the screens you will see when booting up the app. Similar to the above, there was once a site which could easily generate splash screens, but unfortunate is has gone offline, so you can use this slightly annoying site in the mean time.

Don’t forget to hit Update and if your icons are not refreshing, you might need to do a hard browser refresh to clear the image cache.

Install uTeach Cloud on Desktop

When you open a page with PWA, you’ll see a small prompt in your address bar asking you to download the PWA:

Chrome View

Clicking on this gives you a prompt to download the PWA:

Clicking install will add an icon to your desktop:

As well as reopen the page as a PWA app:

It’s as simple as that!

Install uTeach Cloud on Android

Installing on Android is even easier. When you visit the site, it will prompt you to install the PWA:

You’ll also get another confirmation prompt:

And that’s it!

Install uTeach Cloud on iOS

iOS is, to be honest, a bit more of a pain. Apple has been resisting, but slowly coming around to the concept of PWAs. It’s not impossible, just annoying.

To add the uTeach Cloud PWA to an iOS device, open the site in Safari (not Chrome, etc) and click on the share button:

You’ll want to select add to home screen. After that you’ll be prompted to edit the name if you want:

And that’s it!

Future Plans with PWA

PWA has some more features we have yet to exploit, including desktop and mobile push notifications (Android only, currently). In the future we’ll be pushing some updates to take advantage of these features to make uTeach Cloud even more convenient!

Previous Removing the Cancel Button from Daily Reminder Emails
Next Using RFID Check-in & Terminal
Table of Contents
Go to Top