Customizing your app shortcut for mobile phones

While Tadabase does not support native apps or PWAs (progressive web apps) as of yet, you and your users can add a shortcut to your app to the homescreens of your mobile phones and you can customize how your app's shortcut will present and behave when launched by creating a manifest file.

What is a manifest file? 

Your app's manifest is a JSON file that tells the browser about your app and how it should behave when installed on a mobile device or desktop. A typical manifest file includes the app name, the icons you wish the app to display on installed mobile devices or desktops, and the URL you wish to open when the app shortcut is launched.  (source)

Why use a manifest file?

Creating a manifest file enables you to dictate how your app's shortcut will present and behave when launched on mobile device homescreens. For instance, as seen in the image above, creating a manifest enables you to display your brand's custom logo and colors when launched on a mobile phone.

When users visit your app from the browsers of their mobile phones, they can click on "Add to home screen" and the customized settings that you created in the manifest file will be applied for the app name, icon, splash screen, display mode, etc when the app is launched from your users' mobile device homescreens. 

Creating a manifest file

To create a manifest file for your app shortcut, you may copy the sample manifest file below and customize it to your specific custom app details in Notepad or other editor. 

Sample manifest file: 

{
  "name": "My Tadabase App",
  "short_name": "Project Management",
  "theme_color": "#FF6600",
  "background_color": "#212C3B",
  "display": "minimal-ui",
  "Scope": "/",
  "start_url": "/#!/login",
  "icons": [
    {
      "src": "https://ucarecdn.com/554d3ecc-2271-462d-bbf1-c4f0a566d300/icon72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "https://ucarecdn.com/ac1d85af-c8d9-4276-ac37-e499b4eb35a4/icon96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "https://ucarecdn.com/cf61de06-9c48-4d5c-84a3-658b2c4fc7f0/icon128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "https://ucarecdn.com/d3d54d72-15a0-4836-acd2-07ac58f13486/icon144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "https://ucarecdn.com/768ffa74-cbbd-413a-bcfd-bb9db0a4b932/icon152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "https://ucarecdn.com/1addaa34-559b-414d-80f4-fc54ca30ac1a/icon192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "https://ucarecdn.com/3ace464d-febf-48b1-9ab4-08609a3a76c6/icon384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "https://ucarecdn.com/5ac2c160-c958-4f98-96f9-391aa4e839ae/icon512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Click here to view a list of properties that are available for your custom manifest file: https://web.dev/add-manifest/

Uploading your manifest file

Once you've created your manifest file, upload it to a location where CORS will not be an issue. Save the link to this JSON file as you will need it in the next step. 

Hosting this file on Tadabase AWS account will not work since we restrict the CORS. Alternatively, you can use Github Pages to store the manifest file and use the raw URL for the next step. 

In GitHub create a new repo and make sure you set it to Public. 

Next, click Create New File and call it manifest.json, paste in your json code and click Commit at the bottom: 

Browse to the file and click "Raw"

Copy the URL of the page opened when you clicked on "Raw."

Add your manifest to your app

In the Settings tab of your app navigation bar under Custom Header/Footer Code, enter your manifest link within the Custom Header Code box.

<link rel="manifest" href="https://raw.githubusercontent.com/tadabasecode/manifest/main/manifest.json">

Testing your Manifest file

To test if your browser is successfully loading your manifest file, visit your site/app in Google Chrome, right-click to open Developer Tools, click on the Application tab, and select Manifest.