I talk a lot about turning any website on your Chromebook into an icon so it can be easily accessed via your shelf or launcher with the ‘Everything button‘, and have even written a full tutorial on doing so, including the benefits that process offers. However, some of you may work a lot like I do – always trying to find the best way to maximize productivity on your device all whilst staying organized.
Having many icons on your shelf for each experience you’re running – be it Youtube, Gmail, etc. – can unlock a new level of excitement as it truly feels as though you’re running ‘software’ or ‘programs’ like back when you used a Windows machine as your daily driver as opposed to a bunch of disorganized, less visual browser tabs on your Chromebook. Even still, having multiple instances of one web application running means you’re forced to click on it and select which one you’d like to bring to the forefront at any given time.
Chrome’s Tab Strips have been a thing for a while now in the operating system’s developer mode, but for those running their Chromebooks in the Stable out-of-the-box mode who may not yet know, you also have the ability to use them. By toggling a few developer flags on our device, Tab Strips let you open multiple instances of a web application in one window. The benefit here is that you can swap between several sessions of a website all in one window. Let me show you what I mean.
First, visit chrome://flags and enable the ‘Desktop PWA tab strips settings’ flag. Then, restart your device. Right-click any web app icon on your shelf or in your launcher and hover over the arrow next to ‘New window’. Then, instead of seeing only ‘New tab’ and ‘New window’, a ‘New tabbed window’ option will appear. Once you’ve selected it, just click on the web app icon and launch it.
Desktop PWA tab strips settings
Experimental UI for selecting whether a PWA should open in tabbed mode. – Mac, Windows, Linux, Chrome OS#enable-desktop-pwas-tab-strip-settings
Now, you’ll have a beautiful tab strip up top. Normally, you’d have only one instance of the web app to work with unless you launched the icon again (let’s say Youtube in this example), and clicking the icon on your shelf would reveal a pop up asking you to choose between them which is both messy and less informative, but now, the top of the window should resemble something more like the standard Chrome browser. This time, however, everything found here is specific to that web app you’ve opened!
What are some use cases for Tab Strips within PWAs though? Well, Youtube is definitely one. I often find myself clicking multiple videos to watch later when I find time, and I don’t necessarily want to add them to my Watch Later list (since it’s full!). Another use is if you’re editing multiple Google Keep notes and you don’t want to continue jumping back and forth between them. Google Docs, Sheets, Slides, and so on work great for tab strips too. Really, anything where you’re consuming or creating with a multitasking mindset.
Here’s a bonus tip – You can use Desktop PWA Tab Strips in conjunction with Google’s new Tab Groups for maximum productivity! Just right-click any tab in your PWA and add it to a group. You can then color-code them, name them and so on. All of these tools work great in conjunction with one another, and you can navigate between projects right in their respective shelf icon instead of having a bajillion Chrome tabs open and all housed under the generic browser logo. Let me know if this interests you, and have fun!