Starting with Plato 1.0.9 you can now install Plato as a progressive web application or PWA from any modern web browser. In this article we'll look at how to install Plato as a PWA and why this may be useful for you.

What is a PWA

A progressive web application (PWA) is a type of application delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser. Functionality includes working offline, push notifications, and device hardware access creating user experiences similar to a native application.

Browser Support

At the time of writing you will get the best experience working with PWA's within Chromium based browsers - for example Chrome or the new Microsoft Edge based on Chromium. Mozilla Firefox & the older Edge desktop browser don't support PWAs. Most modern mobile browsers support PWAs allowing you to run Plato like a native app on your mobile device.

If your using a Chromium based browser you can typically install Plato as a PWA via your browsers main menu. You can see how to install Plato as a PWA via Chrome for Desktop below...

image.png

Plato as a PWA

After allowing Chrome to install the PWA the Plato PWA will automatically pop-up. The Plato PWA works similar to a native desktop application allowing you to pin Plato to your start bar or search for Plato in your start menu. You can see below how the Plato PWA app appears on Windows 10...

platopwa.png

Customizing the Plato PWA

It's likely you will want to offer a tailored experience to your end users, for example you may want to rename the PWA or choose a different icon to represent your PWA.

Renaming the PWA

To customize the name that appears when users install your version of your Plato PWA you can customize the manifest.json file found within the wwwroot folder. You can open this within NotePad or similar text editor and update the name of the PWA.

The default manifest.json file can be seen below...

{
  "short_name": "Plato",
  "name": "Plato",
  "icons": [
    {
      "src": "images/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }  
  ],
  "start_url": "/",
  "background_color": "#ffffff",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#007BFF"
}

At a minimum you will likely wish to customize the name and shortname fields.

Customizing the Icon

To replace the default icon used for the Plato PWA you can replace the icon-512.png image found within the src/Plato/wwwroot/images folder.

Uninstalling the Plato PWA

To uninstall the Plato PWA you can search for Plato within your Apps & Features and uninstall or click the menu within the PWA and choose Uninstall as shown below...

uninstallpwa.png

That's It!

We hope you enjoy the Plato PWA support and find it useful. If we can assist with any questions of course please don't hesitate to post within our Q&A area or if you have any ideas on how we can improve the PWA support offered with Plato please let us know.