Skip to Content

PWA and Trellis

What is a PWA, the PWA settings available with Trellis, and how to add your site as a PWA on your device.

What is a PWA?

PWA stands for Progressive Web App. The PWA feature in Trellis will allow you or your readers to add your site to a desktop or mobile device as a standalone application. In other words, you will be able to add an app icon that will launch your Trellis site directly from your desktop/home screen.


Launching your site as a PWA will slightly improve performance because the CSS and JavaScript assets are stored on your local device. When your site is viewed with the PWA, it will load even faster for your readers, leading to a better user experience.

PWA Settings in Trellis

When Trellis is the active theme, you can find these settings by logging into your WordPress site and navigating to Appearance → Mediavine Trellis → PWA

Enable PWA

This setting enables PWA support for your site. If you’re using a different PWA solution, you can disable this.

You can also use this setting to disable the PWA feature if you’re experiencing an issue. If this is the case, please reach out to [email protected] as well.

PWA Short Name

This is the site name displayed when your site is installed as an App to desktop or mobile devices. Just add the name of your site here. No need to get fancy.

❗ Note: The PWA Short Name AND the PWA Site Icon are required in order for the PWA feature to work.

Theme Color

This will set the color of the URL bar on some devices. All you need to add is a 6 digit hex code. This likely would be a good place to use your brand color.

Site Icon

Select a square image to use as your PWA icon. We recommend using a 512×512 pixel icon for best display performance. This image will also serve as your site icon, or favicon.

❗ Note: The PWA short name AND the PWA Site Icon are required in order for the PWA feature to work.

Also note: If you do not use a square image here, the PWA icon might not look great and you might see some console errors.

Adding Your Site as a PWA on Desktop

If you’re using the Chrome browser, you’ll see a small plus sign in the right corner of the address bar. Click on the plus sign in the address bar, then follow the prompts to install the app to your desktop device.
​

Adding the PWA to your device with Chrome

Adding Your Site as a PWA on an iPhone or iOS Device

Use the Safari browser and follow these steps:

  • Launch Safari and navigate to the site.
  • Tap the Bookmark icon at the bottom of the screen (it resembles a box with an upward-pointing arrow).
  • Tap Add to Home Screen.
  • Accept the suggested name for the shortcut, or enter one you like better.
  • At the top of the screen, tap Add to save the new shortcut icon to the home screen

Adding Your Site as a PWA on an Android Device:

Launch the Chrome app and follow these steps:

  • Open the website or web page you want to pin to your home screen.
  • Tap the menu icon (3 dots in upper right-hand corner) and tap Add to Homescreen.