Skip to main content

Progressive web apps (PWA)

Progressive Web Apps, or PWAs, offer a way to turn app-like websites into website-like apps.

Check PWAs Turn Websites Into Apps: Here's How for the PWA introduction.

Browsers that support PWA (installation instructions):

  • Chrome on all platforms
  • Edge on all platforms
  • Firefox on Android
  • Safari on iOS and iPadOS

Customizing PWA​

info

The information in this section is based on the following sources (check them out for more details):

Manifest​

You can change PWA's name, description, colors and other information in manifest.json that must be put in the root of assets directory.

Here are the links to the most common manifest items that you'd like to customize:

  • name - the name of the web application as it is usually displayed to the user.
  • short_name - the name of the web application displayed to the user if there is not enough space to display name.
  • description - explains what the application does.
  • theme_color - defines the default theme color for the application.
  • background_color - defines a placeholder background color for the application page to display before its stylesheet is loaded.

Icons​

Custom icons are placed in icons directory in the root of assets directory:

  • icon-192.png, icon-512.png - app icons displayed in Windows taskbar.
  • icon-maskable-192.png, icon-maskable-512.png - app icons displayed in Android.
  • apple-touch-icon-192.png - app icon displayed in iOS.

PWA installation instructions​

Below is the list of browsers that allow installing Flet web app as PWA on desktop or home screen and the instructions on how to do that. You are allowed to use these instructions along with images to educate the users of your application.

Safari​

To install PWA to a home screen on iOS and iPadOS:

  • Tap at the bottom of the screen.
  • Tap Add to home screen to open install app dialog.

Chrome​

Chrome supports PWA on all platforms where it's available.

Desktop​

Chrome for desktop displays a button in the address bar to open "Install app" dialog:

Mobile​

To install app on mobile version of Chrome:

  • Tap menu button to open Chrome main menu.
  • Tap Install app to open app installation dialog.

Edge​

Edge supports PWA on all platforms where it's available. Similar to Chrome there is a button in the address bar to open "Install app" dialog:

Firefox on Android​

  • Tap menu button to open Firefox main menu.
  • Tap Install to open app installation dialog.