How to run web apps on macOS using Chrome shortcuts


An app shortcut lets you open any website in a stand-alone window, mimicking a local app. They are particularly useful for web applications. In their own app window, web apps can be more manageable and often much prettier.

Application shortcuts are quick and easy to create. But they still rely heavily on Chrome and are tightly integrated with Google’s browser. In this article, you will learn exactly how to use this feature in Chrome on macOS.

What is an app shortcut?

An app shortcut is much like a bookmark in your browser, but with additional powers. Web apps like Gmail or Twitter are best suited for the format, rather than traditional document-focused sites. If you are using the Pinned tab functionality, or having certain sites open all the time is a good alternative.

Note that app shortcuts are not the same as extensions that you install from the Chrome Web Store. Web applications are replacing this functionality anyway.

Read more: Chrome extensions to dramatically improve your browsing experience

How to add a shortcut to a website as an app

You can add a shortcut to a website by doing the following:

  1. Open Chrome.

  2. Go to the website you want to add as an app.

  3. Open Chrome’s main menu via the three vertical dots at the top right.

  4. Open the More tools sub-menu and click on the To create a shortcut Object.

    create a chrome shortcut menu

  5. Make sure you tick Open as window to create a standalone application shortcut.

  6. Enter a name for the shortcut and click To create.

When you add a shortcut, the original tab closes and the shortcut opens in a new window. If the shortcut already exists, it will open without creating a duplicate.

Related: How To Make Chrome Your Default Browser

What influences the appearance of an app shortcut?

When you create a shortcut, its title will default to the title of the web page. But if the page includes some metadata, the shortcut will use an alternate title.

This allows page authors to provide a preferred value for the context of the application. Often this value will be shorter. Each site can configure other details, including the app icon and even some aspects of the design, such as color.

How does an app shortcut appear compared to a normal tab?

Application shortcuts are intended to mimic local applications running in a window separate from your main web browser. The most important default difference is the removal of the address bar.

A screenshot showing the Todoist web app running as a Chrome app shortcut

Because an app shortcut represents a single destination, tabs are no longer relevant. As a result, the tab bar disappears, although the app title remains.

Some navigation icons are also unnecessary, because you are viewing a site in isolation. There are no default transfer or home icons. Sites can even configure the display of their applications to hide all navigation icons.

The overall application menu is also reduced; it does not include the normal Bookmarks, People, Tongue, Where To help elements.

How does an application shortcut behave?

App links that would normally open in a separate tab (or window) will open in the main browser app, not the app’s shortcut window. Links that would normally open in the same tab will load in the application window.

Links to other domains, as well as app shortcuts for insecure sites, will show an additional bar at the top of the app window. This bar displays the domain next to an icon that displays site information. In the case of a followed link, closing this bar has the same effect as clicking the back button.

A screenshot of a Chrome app shortcut showing the info bar

Although apps open in their own dedicated window, they still need an instance of the primary Chrome app to run. If you close Chrome and then open an app shortcut, Chrome will reopen next to the app in its separate window. Closing the main Chrome window will not close the apps, but closing the Chrome app itself will.

Chrome’s main menu (the three vertical dots) looks very different in an app shortcut. The main omissions are items related to windows or tabs. Global Chrome Features such as Downloads Where Story will also not appear in the app shortcut.

How does macOS handle app shortcuts?

In many ways, app shortcuts appear as if they are separate, full-fledged apps. If you are using the Application selector to switch from one application to another using Cmd + Tab, you will see application shortcuts appear just like any other.

A screenshot of the macOS app switcher showing two app shortcuts

If you add an application shortcut to the Applications folder, you can use Launching ramp to open it like any other application.

A screenshot of the macOS dashboard showing an app shortcut icon

You can drag an app shortcut icon to the Dock and launch it like a normal application.

A screenshot of the macOS dock containing app shortcut icons

If you open Activity monitor while an app shortcut is running, you will see it displayed next to other apps. He can be inspected or forced to leave like the others.

A screenshot of the macOS Activity Monitor showing two app shortcut processes

How are shortcuts stored as files?

On macOS, Chrome stores app shortcuts in a new folder:

/Users/[username]/Applications/Chrome Apps.localized/

A screenshot showing the App Shortcut folder in macOS Finder

This is only a default. You can move the app shortcuts to any location you prefer and organize them however you want.

The shortcuts themselves are folders named with the title of the app, followed by the APP extension. In macOS terminology, each folder is a package. This is a long-standing mechanism for collecting related files and grouping them together as if they were a single file.

These bundles are quite light; an instance of the Gmail shortcut app consists of five files taking up a total of 804KB. By far the largest file, at 749K, is the executable, app_mode_loader, which launches Chrome.

This makes each app considerably larger than if it were just a simple bookmark. But unless you’re working with thousands of people, you’re unlikely to see a significant impact on storage.

Do app shortcuts look like Electron apps?

In appearance and behavior, app shortcuts are like Electron applications. Electron is a technology for building cross-platform desktop applications with web standards: HTML, CSS, and JavaScript. Common examples include Slack, Figma, and the Atom text editor.

Application shortcuts are generally faster and easier to download. They will always be as up to date as their corresponding website. But app shortcuts depend on Google Chrome and require a running instance of the browser to function.

Improve your web app experience with Chrome app shortcuts

Chrome web app shortcuts are a midpoint between standard document-centric websites and more traditional local software apps. They offer an alternative way to run web apps, such as Gmail or Todoist, outside of your standard web browser.

Running in a dedicated window can make it easier to manage a web application in your desktop environment. It also looks a bit cleaner, which can be useful when taking screenshots or including web apps in presentations.


chrome-profiles

6 custom Google Chrome profiles you should start using

What are Chrome profiles and how do you use them? Here are several useful ideas for Chrome browser profiles that you should try.

Read more


About the Author


Comments are closed.