Configuring PWA

Currently Styla provides no interface to set up web app manifest for your Styla Frontend. Please just prepare the below data and pass it to your Styla Onboarding Manager. We will take care of the rest.

On this page:

1 A .json file with all the fields filled in:
2 A .zip pack with the image files referenced in your .json file.
3 Service worker

Styla needs to set up a manifest file with metadata for your website delivered with Styla Frontend. Only once this manifest is set up will your website be treated by search engines as a Progressive Web App.

Please provide the following. You can learn more about the meaning of each of the tags in a manifest on this documentation page.

A .json file with all the fields filled in:

Fill in the value fields with your data and save it as a .json file.

{
  "name": "Your Website Name",
  "orientation": "portrait",
  "display": "standalone",
  "start_url": "https://www.yourdomain.com/",
  "short_name": "Your Website Short Name",
  "description": "Your Website description",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icons/youricon-32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "icons/youricon-64.png",
      "sizes": "64x64",
      "type": "image/png"
    },
    {
      "src": "icons/youricon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "icons/youricon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

A .zip pack with the image files referenced in your .json file.

You should first create the largest 512x512px image and then scale it down all the way to the 32x32px. You should probably use your company logo. Definitely something that is still recognisable on the lowest size image.

Service worker

In addition, Styla will create a script responsible for pushing updates to a browser and provide this PWA capability. Currently we have no interface for external developers to do this.