Working with Tauri or any other Framework that uses a Webview has one big disadvantage: Your Application still acts like a Webapp even after compiling it into a Binary.

Therefore I have compiled a list of possible optimizations to make your Tauri App seem more “Desktop” like. (I will be updating this post when I think of more things to add)

1) Remove various Key Events

There are various Key Events that we don’t want in our Desktop App. The following script will remove:

• Refreshing the page with F5
• Opening the Search Bar with CTRL + F

window.addEventListener('keydown', function (e) {
    if ((e.ctrlKey && e.code == "KeyF") || e.code =="F5") { 
          e.preventDefault();
    }
})

2) Turn off autocomplete for input fields

This point can be argued about. I personally don’t like chromium’s autocomplete so I always disable it. To turn off autocomplete, just add this as an attribute to your input fields:

<input autocomplete="none">

3) Creating a custom titlebar

This point is entirely subjective but sometimes the default titlebar of your operating system just does not look with your app's design. Tauri offers you the option to hide the default titlebar and create your own. I have created example components for both React and Vue that you can check out here.