Add Browser Controls to your Desktop App

# Your desktop app is not a web browser

A web browser has buttons to control page navigation such as back, forward and reload. Your desktop app's navigation buttons are up to you.

You may decide that you don't need page navigation because the design of your app doesn't require it. Sometimes, however, it's useful to be able to have back and forward buttons in your desktop app.

This guide will show you how to add browser navigation to your desktop app.

# Use your web apps codebase

A common question is “Where do I put the code for my desktop app”. The answer is that you put it in the same place that you put your web app code. You don't need to maintain a separate codebase.

Before you start you might want to read how to use ToDesktop's CSS hooks and Javascript hooks. You can also read about how to separate desktop logic from web app logic.

# HTML

First up let's add some simple HTML (or JSX) for our app buttons. You can put this snippet wherever you wish your navigation buttons to appear.

        <div class="browser-navigation">
  <button class="history-back-button">◀</button>
  <button class="history-forward-button">▶</button>
</div>

      

# Styles

Next up, we want to add some styles so that the buttons are hidden from our web app.

        .browser-navigation {
  /* HIDE navigation when in WEB app */
  display: none;
}

html.todesktop .browser-navigation {
  /* Overrides above style when in desktop mode */
  /* SHOW navigation when in DESKTOP app */
  display: block;
}

      

We can add some more styles to make our buttons look how we want them to look.

        .browser-navigation button {
  height: 26px;
  width: 26px;
  font-size: 13px;
  background: #ddd;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  line-height: 20px;
  text-align: center;
  outline: none;
}

.browser-navigation button:hover {
  background: #ccc;
}

      

# Making it work

Now let's make our buttons actually work. We can use ToDesktop's goBack() and goForward() methods to go back or forward through our navigation history.

        if (window.todesktop) {
  // This block is only executed when running as a desktop app

  const backBtn = document.querySelector('.history-back-button');
  const forwardBtn = document.querySelector('.history-forward-button');

  backBtn.addEventListener('click', () => {
    // Go back when back button is clicked
    window.todesktop.contents.goBack();
  });

  forwardBtn.addEventListener('click', () => {
    // Go Forward when forward button is clicked
    window.todesktop.contents.goForward();
  });
}

      

# Make buttons disabled when they are not navigable

Everything works exactly as it should 🎉. However, what if we are at the most recent position in history and we can't go forward? We should communicate that to our users and make the button disabled.

# Listen for navigation changes

We use the "navigate" event to make sure that the code below runs every-time that we navigate to a new page in our desktop app.

We then check if we can canGoForward() and if we canGoBack(). Based on the return boolean of these methods we make the button disabled or not.

        import { webContents, platform } from '@todesktop/client-core';

if (platform.todesktop.isDesktopApp()) {
  // This block is only executed when running as a desktop app

  webContents.on('navigate', async () => {
    // This block is executed everytime that the desktop app navigates to a new page

    const btnForward = document.querySelector('.history-forward-button');

    if (await webContents.canGoForward()) {
      btnForward.disabled = false;
    } else {
      btnForward.disabled = true;
    }

    const btnBack = document.querySelector('.history-back-button');

    if (await webContents.canGoBack()) {
      btnBack.disabled = false;
    } else {
      btnBack.disabled = true;
    }
  });
}

      

# Disabled button styles

Finally, let's add some more styles to our buttons so that they are faded when disabled.

        .browser-navigation button:disabled {
  opacity: 0.5;
  cursor: default;
}

.browser-navigation button:disabled:hover {
  background: #ddd;
}