24

How can I make a single-page web app into a standalone desktop application, on Firefox, similar to Chrome's "Add to desktop..." option? Platform is Linux.

andrepd
  • 361

2 Answers2

11

I often do it the manual way, you might appreciate it since you are running linux. No other tools are required besides firefox :)

  1. Run firefox -p. That fires up the firefox profile editor. Create a new profile for the web app you want to use, and name it accordingly. Leave the profile folder location as the default, or choose anything you want.
  2. Launch the newly created profile. Make sure to uncheck "Use the selected profile without asking at startup", as it would otherwise be set as the default firefox profile, which you don't want.
  3. Set any firefox preferences in the newly created profile as you want (Cookie / History / Search Engine / Privacy considerations). Make sure to set the web app you want to use as the start page, and make firefox load that start page on startup.
  4. You can close the firefox window with the newly created profile now.
  5. To launch the newly created standalone web app, use the following command line arguments to firefox:
    • -P <profile name> launches the given profile name at startup instead of the default one. You'll want to enter your newly created profile's name here.
    • --no-remote makes firefox ignore remote commands. That means, you can run this firefox instance next to another (your default) firefox instance, and new commands (like clicking a link in an external application) will not get send to the new firefox instance, but to the default one instead.

For example, to create a standalone desktop app for e.g. WhatsApp Web, do the following:

  1. Create a new profile WhatsApp-Web
  2. Launch profile, customize preferences. Set startpage to web.whatsapp.com
  3. Run firefox --no-remote -P WhatsApp-Web to launch the new profile.

That way, you can run this second firefox instance next to your default one, without interfering the behaviour of the default instance. Cookies and other data is not shared between both, giving you some extra privacy. For convenient launching, you can even add a starter file for this new firefox instance if your operating system / desktop environment supports this. In linux, you might want to create a .desktop file as follows:

  1. Copy /usr/share/applications/firefox.desktop to /usr/share/applications/firefox-yourwebappname.desktop
  2. Customize the Name, Exec and Icon-fields in that new .desktop-file (e.g. set a custom icon for the web app, set some appropriate name, and put the custom firefox command line in the Exec line). Of course, you can customize other parameters as well
  3. Add the .desktop file to your task bar or your desktop (It should automatically be detected by your task menu).
Ramhound
  • 44,080
LukeLR
  • 1,561
0

For completely standalone offline use, you have to save the site contents locally.
Make a folder, open terminal (in that directory) & run:

wget -e robots=off -r -np --page-requisites --convert-links --wait=".2" "https://www.example.com"

You'll need JavaScript libraries. Install nodejs & npm to start out.

sudo apt-get install nodejs npm

The website's CDN will provide the libraries (usually). If any .js libs aren't functioning, or missing, use npm install -g to install when possible. Otherwise, download from the developers. I had to with jQuery.

UPDATE 2:
Five-Server (Maintained Fork of Live Server) Re-written in TypeScript. Up-to-date dependencies. PHP & Server Side Rendered content. (like Express.js) Install it with: npm -g i five-server

If you have "Live Server" already, to switch over, run:

npm -g rm live-server && npm -g i five-server

(If you don't need five-server's features, live-server is still fine to use.)

When wget is finished, simply run five-server --port=5000 from the folder containing index.html. Watch the terminal window for GET requests. Any missing intermediate files will show a 404.

example live-server console output

Just retrieve the file using wget with -B, to set the base URL & path.

wget -B 'https://jsoneditoronline.org' '/favicon.ico'

If you have to retrieve quite a few intermediate files: console selection Create a file 404.txt & copy the similar looking console output to it. Then, run the following from the same directory:

cat 404.txt | sed 's/[^ ]* //' | sed 's/\s.*$//' | awk '{if (++dup[$0] == 1) print $0;}' > list.txt

Now your list.txt is ready for wget. When downloading with --input-file make sure to use -x. You can just overwrite the directory structure, instead of moving them individually.

wget -x -B 'https://jsoneditoronline.org' --input-file=list.txt

If you need PHP/SQL functionality, skip "live-server" & install them from the repository. You don't have to set up Apache, PHP has a server included.

sudo apt-get install php community-mysql php-mysqlnd

From the same directory, run: php -S localhost:5000
Then open your browser & visit: http://localhost:5000

UPDATE:
The comment from gronostaj inspired me. YAD is the way to isolate it to it's own app window. Run live-server --no-browser or just include it with YAD:

live-server --no-browser --port=5000 && yad --window-icon="favicon.png" --title="JSON Example" --geometry="1190x500" --center --uri-handler="$YAD_XID" --browser --html --uri="http://127.0.0.1:5000"

Don't show on the taskbar: --skip-taskbar
If you want a tray icon: --notification --image="favicon.png"

JayCravens
  • 799