diff --git a/content/posts/creating-a-firefox-pwa-for-discord.md b/content/posts/creating-a-firefox-pwa-for-discord.md index 1e43413..ba77e37 100644 --- a/content/posts/creating-a-firefox-pwa-for-discord.md +++ b/content/posts/creating-a-firefox-pwa-for-discord.md @@ -28,11 +28,13 @@ Luckily, **Progressive Web Apps for Firefox** ([filips123/PWAsForFirefox](https: ## Installation -First, install the PWAs for Firefox extension from the Firefox add-ons store. Once you open it up, it will guide you through the installation process, including installing the companion application. If you’re on Arch Linux, it’s available on the AUR under `firefox-pwa` and `firefox-pwa-bin`. (`bin` for the binary precompiled version, go for this one if you don’t want to compile it yourself.) +First, install the [PWAs for Firefox extension from the Firefox add-ons store](https://addons.mozilla.org/en-US/firefox/addon/pwas-for-firefox/). Once you open it up, it will guide you through the installation process, including installing the companion application. If you’re on Arch Linux, it’s available on the AUR under `firefox-pwa` and `firefox-pwa-bin`. (`bin` for the binary precompiled version, go for this one if you don’t want to compile it yourself.) + +**If you are on Ubuntu or one of its derivatives,** the snap version of Firefox that came with your system will not be able to communicate with the companion application, I’m assuming due to snaps’ containerization, at least in my testing on Xubuntu 22.04. See [this Stack Overflow answer](https://askubuntu.com/a/1404401) for a guide on switching to the standard Debian package version of Firefox. ## Create the Discord PWA -Navigate to Discord [https://discord.com/channels/@me](https://discord.com/channels/@me) and click on *Install current site* in the extension. And... you’re done! You’ve created a PWA for Firefox, it’s as simple as that. You can now open it from within the extension by clicking on the external link button. +Navigate to Discord [https://discord.com](https://discord.com/channels/@me) (**not the app**, we need the root of the PWA to be the index page so all pages under the Discord domain are considered part of the PWA) and click on *Install current site* in the extension. Change the *Start URL* to [https://discord.com/app](https://discord.com/app) so the PWA opens to the app page, not the landing page. And... you’re done! You’ve created a PWA for Firefox, it’s as simple as that. You can now open it from within the extension by clicking on the external link button. However, there’s more configuration to be done. `firefox-pwa` creates a Firefox profile for the PWAs that’s completely separate from your main profile, so we’re going to have to do some configuration there. (By default, all of your PWAs share a single *Default* profile under the *Profiles* tab of the extension, but if you want to have different PWAs have different profiles you can configure it there.) @@ -46,3 +48,54 @@ It’s up to you how want to configure the profile, but here’s what I did and - !!! force links into new window? - Under :jigsaw: *Extensions & Themes*, you You might also want to [choose a theme that matches Discord’s theming](https://addons.mozilla.org/en-US/firefox/addon/discord-dark-rebrand/). - Under :lock: *Privacy & Security* / *History*, set that history to *Use custom settings* for history and uncheck all the boxes. This will make it so the profile won’t keep any history (which is unnecessary in a PWA), but still will remember cookies so you don’t have to log in again each time you reopen it. +- If you shut down your computer with the PWA open, Firefox will think that your previous session didn’t close properly and will prompt your previous session. Since we’re only going to be the PWA profile for single websites (i.e. Discord), this is unnecessary. To disable this behavior, we’re going to need to change a couple options under the advanced configuration preferences. Within the PWA, we don’t have access to the URL bar, so to enter the preferences, press Ctrl + Shift + I to enter the developer tools. Enter the console and type in the following: + + ```JS + document.location.href = "about:config" + ``` + + Firefox may make you type `allow pasting` beforehand. + + After this, you will enter the advanced settings page. Press *Accept the Risk and Continue*, search up `browser.sessionstore.max_tabs_undo` and `browser.sessionstore.max_windows_undo` and set both to 0. + +## Launching the PWA from the command line + +I have uninstalled the desktop Discord application `discord`, and I want to replace it with a shell script that launches the PWA. This will enable you to launch the PWA from the command line simply by typing `discord`, and also from an application launcher like [rofi](https://github.com/davatorium/rofi). This way, we don’t have to rely on launching Discord from the PWAsForFirefox extension. + +Luckily, PWAs for Firefox provides a CLI. First, we need to find the ID of the Discord PWA: + +```SH +firefoxpwa profile list +``` + +This will output the following. After the entry for *Discord*, the string of letters and numbers is the site ID. Your ID will be different. + +``` +========================= Default ========================== +Description: Default profile for all sites +ID: 00000000000000000000000000 + +Sites: +- Discord: https://discord.com/ (01G705MTCT1Q1HHFM7DVDFAPCY) +``` + +You can now launch the PWA using the following command. + +```SH +firefoxpwa site launch 01G705MTCT1Q1HHFM7DVDFAPCY +``` + +Let’s create the launch script. Open `/usr/bin/discord` (if this exists already, uninstall the desktop Discord application) with your favorite text editor. You’ll need to use `sudo`. Add the following to the file, replacing the site ID with the one you found earlier: + +```SH +#!/usr/bin/env bash +firefoxpwa site launch 01G705MTCT1Q1HHFM7DVDFAPCY +``` + +Finally, make it an executable: + +```SH +sudo chmod +x /usr/bin/discord +``` + +You’re done! You’ve created a PWA for Discord that looks and behaves like a desktop application, but without a lot of the hassle involved with the actual desktop app.