How to add quick action functionality to installed PWA

Anvil Q&A
3

I managed to implement this in my anvil app. However, for that, I had to remove the default manifest.json and add a new one. Here is how I did

Add this to Native Libraries

<script>
  document.querySelectorAll('[rel="manifest"]')[0].remove()
</script>
<link rel="manifest" href="_/theme/manifest.json">

Create a new file

Next, you will have to create a new file in your app assets and rename it to manifest.json.

Modify the contents of that file

It is best to use your existing manifest.json as the starting point. To view your existing manifest.json, go to <your anvil app link>/_/manifest.json (Ex. example.anvil.app/_/manifest.json)

Now, you can add the code for shortcuts to your manifest.json file. Learn more at shortcuts - Web app manifests | MDN
Here is an example:

"shortcuts": [
    {
      "name": "Action 1",
      "description": "Action 1",
      "url": "example.com/#Action1",
      "icons": [
        {
          "src": "icon_src_url",
          "sizes": "100x100",
          "type": "image/jpeg"
        }
      ]
    },
    {
      "name": "Action 2",
      "description": "Action 2",
      "url": "example.com/#Action2",
      "icons": [
        {
          "src": "icon_src_url",
          "sizes": "100x100",
          "type": "image/jpeg"
        }
      ]
    },
  ],
8 Likes