Home Original page

sonnyp/Tangram

Tangram

Run web apps on your desktop

Download on Flathub

screenshot

Goal

The goal of the project is to improve integration of web applications into the desktop, specifically GNOME.

About

Each tab is a container so you can setup web apps with different accounts/settings.

Tangram is powered by WebKitGTK.

Reporting an issue

Before submitting a compatibility issue with a Website, please try to reproduce it with GNOME Web. If you can, report the issue to WebKitGTK, the Web engine behind Tangram and GNOME Web.

Features

  • Setup and manage web applications
  • Persistent and independent tabs
  • Custom title
  • Re-order tabs
  • Change tabs position
  • Navigation
  • Shortcuts
  • Smart notifications
  • Downloads
  • Touchpad/touchscreen gestures

Security

Both Flatpak and non-Flatpak versions of Tangram provide sandboxing for Web applications.

Roadmap

  • Custom icon (WIP)
  • Custom applications (WIP)
  • Expose WebKitGTK settings (todo)
  • SearchProvider (todo)
  • Custom CSS/JS for better integration (todo)
  • WebExtensions (todo)

In the media

addictivetips.com - How to run web apps with ease on Linux - 09/2020

ubunlog.com - Tangram, nueva opción basada en GNOME para agrupar nuestras web-apps - 09/2020

linux-magazine.com - Tangram integrates social media services in a single app - 06/2020

linux-community.de - Tangram integriert Social-Media-Dienste und Messenger in eine App - 02/2020

diolinux.com.br - Tangram, um app para gerenciar Webapps - 09/2019

Development

Install packages

Ubuntu sudo apt install npm libglib2.0-dev-bin flatpak-builder npm git
Arch Linux sudo pacman -S npm glib2 flatpak-builder npm git
Fedora sudo dnf install npm glib2-devel flatpak-builder npm git

Clone

git clone git://github.com/sonnyp/Tangram.git

Install dependencies

git submodule init
git submodule update
npm install

Run

make dev # in one terminal
./run.sh # in an other

make dev constantly watch for file changes and will rebuild automatically. ./run.sh runs the application in development mode. Hit <Ctrl><Shift>Q to restart the application.

  • data files are stored in ./var/data/ instead of $XDG_DATA_HOME/Tangram/
  • cache files are stored in ./var/cache/ instead of XDG_CACHE_HOME/Tangram/

To test desktop notifications you can add https://jhmux.codesandbox.io/.

Test

Meson

meson --reconfigure --prefix $PWD/install build
ninja -C build install
GSETTINGS_SCHEMA_DIR=./install/share/glib-2.0/schemas/ ./install/bin/re.sonny.Tangram

Flatpak

flatpak-builder --user --force-clean --install-deps-from=flathub flatpak re.sonny.Tangram.json
flatpak-builder --run flatpak re.sonny.Tangram.json re.sonny.Tangram

Flatpak sandboxed

flatpak-builder --user  --force-clean --repo=repo --install-deps-from=flathub flatpak re.sonny.Tangram.json
flatpak --user remote-add --no-gpg-verify --if-not-exists Tangram repo
flatpak --user install --reinstall --assumeyes Tangram re.sonny.Tangram

Inspect

gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true
GTK_DEBUG=interactive ./run.sh

Release

git add -f src/main.js
git tag $VERSION
git push origin $VERSION
# send PR to https://github.com/flathub/re.sonny.Tangram/blob/master/re.sonny.Tangram.json

Credits

Icon by Tobias Bernard

Igalia and contributors for the amazing work on WebKitGTK

Inspired by GNOME Web, Rambox, Station and Franz