How To: WebApps The Easy Way

What Are Web Apps?

Let’s clear up some terminology that often gets confused:

• Websites: Traditional sites accessed through a browser by entering a URL. They close when your browsing session ends.
• Web apps: Websites running in their own dedicated window without browser toolbars, address bars, or tabs. They appear as native applications with their own taskbar entries.
• Progressive Web Apps (PWAs): Specially-designed websites with additional features like offline functionality, notifications, and app-like interfaces.
• Electron apps: Web content wrapped in a dedicated browser runtime (like many desktop apps including VS Code, Slack).

This guide focuses on creating web apps directly from any website using Chrome/Chromium—the most compatible and lightweight approach for Linux.

Perfect Use Cases

• Messaging: WhatsApp, Telegram, Signal
• Productivity: Gmail, Google Docs, Notion
• AI tools: ChatGPT, Claude, Bard
• Music: Spotify, YouTube Music
• Social: Twitter/X, Mastodon, Reddit

[Screenshot of ChatGPT running as a web app alongside other desktop applications]

Basic Setup: One Command Wonder

The simplest way to create a web app is with Chrome or Chromium’s --app flag:

# Launch ChatGPT as a web app
google-chrome --new-window --app="https://chatgpt.com"

# Launch WhatsApp as a web app
google-chrome --new-window --app="https://web.whatsapp.com"

Pro Tip: Always use the equals sign with --app= for proper functionality. Using --app https://site.com (with a space) will not work correctly.

You can also use other Chromium-based browsers like Brave:

brave-browser --new-window --app="https://mail.google.com"

Command Breakdown

• --new-window: Opens a fresh browser window
• --app="URL": Launches the URL in application mode (no address bar, tabs, etc.)
• --ozone-platform=wayland: Optional, for better Wayland support (used in Hyprland configs)

Advanced: Isolated Web Apps with Separate Profiles

By default, all Chrome windows share the same cookies and cache. This means logging into WhatsApp and Gmail in separate web app windows will still share the same Google account. To create truly isolated web apps:

# Create an isolated ChatGPT app
google-chrome --new-window --app="https://chatgpt.com" --user-data-dir="$HOME/.config/chrome-apps/chatgpt"

# Create an isolated WhatsApp app with additional flags
google-chrome --new-window --app="https://web.whatsapp.com" \
  --user-data-dir="$HOME/.config/chrome-apps/whatsapp" \
  --disable-features=TranslateUI \
  --no-first-run

# What these flags do:
# --disable-features=TranslateUI: Removes the translation popup that appears on foreign language websites
# --no-first-run: Skips the first-run setup screens (welcome, import bookmarks, etc.)

Benefits of Profile Isolation

This approach gives each web app its own:

• Cookies: Separate login sessions and authentication
• Cache: Independent storage for better performance
• History: Browsing history stays within the app
• Extensions: Install different extensions for different web apps
• Settings: Customize each app independently

Security Tip: For banking or sensitive apps, always use isolated profiles to prevent cross-site tracking and cookie theft.

[Screenshot showing multiple isolated web apps running simultaneously with different accounts]

Make It Permanent: Desktop Integration

Create Desktop Shortcuts

Create a dedicated application launcher that appears in your application menu:

# Create the applications directory if it doesn't exist
mkdir -p ~/.local/share/applications

Save this as ~/.local/share/applications/chatgpt.desktop:

[Desktop Entry]
Name=ChatGPT
Comment=ChatGPT AI Assistant
Exec=google-chrome --new-window --app="https://chatgpt.com" --user-data-dir="$HOME/.config/chrome-apps/chatgpt"
Icon=chrome

# You can also use system icons or theme icons:
# Icon=web-browser (uses theme icon)
# Icon=/usr/share/icons/hicolor/256x256/apps/firefox.png (absolute path)
Terminal=false
Type=Application
Categories=Network;WebApp;
StartupWMClass=chatgpt.com
StartupNotify=true

Make it executable and update your desktop database:

chmod +x ~/.local/share/applications/chatgpt.desktop
update-desktop-database ~/.local/share/applications

Pro Tip: For better visuals, download a custom icon for your app and set the path in the Icon= field.

Custom Icon Example

# Download the icon
mkdir -p ~/.local/share/icons
curl https://example.com/chatgpt-icon.png -o ~/.local/share/icons/chatgpt.png

# Update desktop file to use custom icon
# You can also use system icons or theme icons:
# Icon=~/.local/share/icons/chatgpt.png
# Icon=web-browser (uses theme icon)
# Icon=/usr/share/icons/hicolor/256x256/apps/firefox.png (absolute path)|Icon=/home/username/.local/share/icons/chatgpt.png|g' ~/.local/share/applications/chatgpt.desktop

Window Manager Keyboard Shortcuts

Hyprland Example

# ~/.config/hypr/hyprland.conf
$browser = chromium --new-window --ozone-platform=wayland
$webapp = $browser --app

# Create shortcuts for web apps
bind = SUPER, A, exec, $webapp="https://chatgpt.com"
bind = SUPER, W, exec, $webapp="https://web.whatsapp.com"
bind = SUPER, G, exec, $webapp="https://mail.google.com"

i3wm Example

# ~/.config/i3/config
# Launch web apps with keyboard shortcuts
bindsym $mod+a exec --no-startup-id google-chrome --new-window --app="https://chatgpt.com" --user-data-dir="$HOME/.config/chrome-apps/chatgpt"
bindsym $mod+w exec --no-startup-id google-chrome --new-window --app="https://web.whatsapp.com" --user-data-dir="$HOME/.config/chrome-apps/whatsapp"
bindsym $mod+g exec --no-startup-id google-chrome --new-window --app="https://mail.google.com" --user-data-dir="$HOME/.config/chrome-apps/gmail"

# Optional: Assign web apps to specific workspaces
assign [class="chatgpt.com"] $ws1
assign [class="web.whatsapp.com"] $ws2

bspwm / SXHKD Example

# ~/.config/sxhkd/sxhkdrc (bspwm uses sxhkd for keybindings)
super + a
    google-chrome --new-window --app="https://chatgpt.com" --user-data-dir="$HOME/.config/chrome-apps/chatgpt"

super + w
    google-chrome --new-window --app="https://web.whatsapp.com" --user-data-dir="$HOME/.config/chrome-apps/whatsapp"

# Add to ~/.config/bspwm/bspwmrc for automatic rules
# bspc rule -a chatgpt.com desktop='^1' follow=on
# bspc rule -a web.whatsapp.com desktop='^2' follow=on

Qtile Example

# ~/.config/qtile/config.py
from libqtile.config import Key, Group
from libqtile.lazy import lazy
from libqtile import hook

# Define web app commands
chatgpt_cmd = "google-chrome --new-window --app=https://chatgpt.com --user-data-dir=$HOME/.config/chrome-apps/chatgpt"
whatsapp_cmd = "google-chrome --new-window --app=https://web.whatsapp.com --user-data-dir=$HOME/.config/chrome-apps/whatsapp"

# Add keybindings
keys = [
    # Launch web apps
    Key([mod], "a", lazy.spawn(chatgpt_cmd), desc="Launch ChatGPT"),
    Key([mod], "w", lazy.spawn(whatsapp_cmd), desc="Launch WhatsApp"),
    # ... your other key bindings
]

# Optional: Match apps to specific groups/workspaces
groups = [Group(i) for i in "123456789"]

@hook.subscribe.client_new
def assign_app_group(client):
    if "chatgpt.com" in client.window.get_wm_class():
        client.togroup("1")
    elif "web.whatsapp.com" in client.window.get_wm_class():
        client.togroup("2")

[Screenshot of desktop application menu showing custom web app icons]

Advanced Customization

Chrome Flags for Better Web Apps

Access these experimental features by visiting chrome://flags in your browser:

1. Enable Tab Stripping in PWAs

   • Search for “tab strip”
   • Enable to hide all unnecessary toolbars and controls

2. Support Multiple Windows

   • Search for “single-window”
   • Disable to allow multiple instances of the same web app

3. Enable Desktop PWAs to run on OS login

   • Search for “run-on-os-login”
   • Enable to let web apps start automatically at boot

[Screenshot of chrome://flags page showing these options]

Additional Command-Line Flags

# App with custom window size (width x height)
google-chrome --app="https://notion.so" --window-size=1200,800

# Kiosk mode (full-screen, no exit)
google-chrome --app="https://www.amazon.com" --kiosk

# Disable GPU for low-end systems
google-chrome --app="https://example.com" --disable-gpu

Comparing with Alternatives

For most users, Chrome’s app mode provides the perfect balance of simplicity and functionality.

Nativefier Quick Setup

If you want more customization, Nativefier is an alternative:

# Install Nativefier
sudo npm install -g nativefier

# Create a web app
nativefier --name "ChatGPT" \
  --platform linux \
  --arch x64 \
  --width 1024 --height 768 \
  --tray \
  "https://chatgpt.com"

Troubleshooting

Common Issues & Fixes

1. Web App Opens in Regular Browser Window

   • Ensure you’re using --app= with the equals sign
   • Try adding --disable-extensions to prevent conflicts

2. Missing Notifications

   • Add --enable-features=EnableSystemNotifications to your command

3. Black Screen or Crashes

   • Add --disable-gpu --disable-software-rasterizer
   • Clear the app’s profile directory and recreate

4. Slow Performance

   • Limit the number of isolated web apps running simultaneously
   • Use --js-flags="--max_old_space_size=128" to reduce memory usage

FAQs

Q: Will this work with any browser?
A: This method works best with Chrome, Chromium, and derivatives like Brave or Edge. Firefox doesn’t currently support this approach natively, but you can use alternatives like Nativefier.

Q: Do web apps work offline?
A: Most web apps require an internet connection, though some (like Gmail) have offline capabilities if they implement PWA features with proper caching.

Q: How do I add an icon to my web app?
A: Create a desktop file as shown above and add an Icon= path to an image file. PNG format works best for Linux desktop integration.

Q: What’s the difference between this and Electron apps?
A: Chrome web apps use your existing browser installation, making them much lighter (often 10x less memory usage) and more efficient than Electron, which bundles an entire browser with each app.

Q: Can I sync bookmarks between my web app and main browser?
A: No, isolated profiles using --user-data-dir keep everything separate by design. This is a security feature.

Q: How do I uninstall or remove a web app?
A: Uninstalling is simple. Since the web app is just a .desktop file and a profile folder, you just need to remove them:

1. Delete the .desktop file from ~/.local/share/applications/.
2. (Optional) Delete the isolated profile folder from ~/.config/chrome-apps/ to remove all its data.

# Remove the desktop launcher
rm ~/.local/share/applications/chatgpt.desktop

# Optional: Remove the isolated profile data
rm -rf ~/.config/chrome-apps/chatgpt

Q: How do I pin a web app to my dock or taskbar?
A: Once you’ve created a .desktop file and it appears in your application menu, you can pin it just like any other native application. Simply right-click the app icon in your dock or taskbar and select “Pin”, “Add to Favorites”, or a similar option depending on your desktop environment (GNOME, KDE, etc.).

Q: What happens if I delete the profile folder in ~/.config/chrome-apps/?
A: Deleting the profile folder (e.g., ~/.config/chrome-apps/chatgpt) will permanently erase all data associated with that specific web app, including cookies, login sessions, cache, and history. The next time you launch the web app, it will start with a fresh, new profile. This can be a useful troubleshooting step.

Q: Can I use this method to stay logged into multiple Google accounts at once?
A: Absolutely! This is one of the biggest advantages of using isolated profiles. You can create one web app for your personal Gmail and another for your work Gmail. Since they have separate cookie jars, you can stay logged into both accounts simultaneously without them interfering with each other.

Q: Why use the command line instead of Chrome’s “More tools > Create shortcut” menu option?
A: While Chrome’s GUI “Create shortcut” option is convenient, it doesn’t offer the same level of control. The command-line method allows you to explicitly define the --user-data-dir for true profile isolation, add extra performance or feature flags, and easily script the creation for multiple apps. The GUI method typically creates a simpler launcher that still shares data with your main browser profile.

Now you have everything you need to create streamlined, focused web applications that integrate perfectly with your Linux desktop. Enjoy the clutter-free productivity boost!