Tips-&-Tricks.md

@@ -794,3 +794,29 @@ If you find that the swap file is too large or too small, you can resize it.
     ```
 
     This may already exist from creating a swap file before so don't add a duplicate entry if that's the case.
+
+### PWAs for Firefox
+
+**Warning**: Installing external software may compromise your security and privacy. Ensure you trust the software you are installing as PWAs for Firefox requires external software.
+
+**Tip**: It is recommended to use a keyboard and mouse or a [lapdock](https://shop.puri.sm/shop/lapdock-kit/). If you choose to do this from the Librem 5 screen, it is recommended to use the display scaling of 100% instead of the default of 200% as buttons may not fit or popups may flicker at 200% scaling.
+
+GNOME Web natively supports installing PWAs, though it may be lacking in features or is a bit slow for some users. PWAs with Firefox can often offer better performance and additional customization.
+
+1. Install the [Progressive Web Apps for Firefox add-on](https://addons.mozilla.org/en-US/firefox/addon/pwas-for-firefox/). Follow the instructions that appear after it is installed; the instructions have been summarized below.
+    1. Install the related package using `sudo apt install $HOME/Downloads/firefoxpwa_<VERSION>_arm64.deb` where `<VERSION>` is replaced with the one you downloaded. The file that is needed is the `firefoxpwa_<VERSION>_arm64.deb` file from the [packagecloud.io repository](https://packagecloud.io/filips/FirefoxPWA) or the [GitHub releases page](https://github.com/filips123/PWAsForFirefox/releases).
+    2. PWAs for Firefox is usually unable to detect that Firefox is installed so you will need to install a portable version of it manually. Download a [Firefox release](https://www.mozilla.org/firefox/all/) or use a Firefox fork like [LibreWolf (Download the latest `aarch64.tar.bz2` and extract it)](https://gitlab.com/librewolf-community/browser/linux/-/releases). Copy the files to `$HOME/.local/share/firefoxpwa/runtime/` and create a symlink to the main binary (such as creating a `firefox` symlink pointing to `librewolf-bin` for example).
+2. Navigate to the website you want to install a PWA for, such as <https://forums.puri.sm>. Click on the orange "PWA" extension button and then click on the "Install current site" button. Use the default values it pulled from the website's manifest metadata or fill in the fields as desired; when you are satisfied, click the "Create" button.
+3. The web app has been installed to the home screen but it may appear that it is not installed; you may find them when you toggle the "Show All Apps" filter on the home screen. This is because Phosh is treating this as a desktop application. You can edit the `.desktop` files for the sites you've installed so that it shows up in both home screen filters.
+    1. Using a text editor, open up the `.desktop` files in `$HOME/.local/share/applications/` that are prefixed with `FFPWA-` and add this line:
+    ```
+    X-Purism-FormFactor=Workstation;Mobile;
+    ```
+4. The app should now be visible from the home screen.
+
+**Tip**: When you open up the app, the forward, backward, and refresh buttons are not visible. You can add them in manually if desired.
+
+1. Select the sandwich/hamburger menu, then click "More tools", and then "Customize toolbar".
+2. Click and drag the Back, Forward, and any other buttons you want to the top of the window to add them.
+
+**Tip**: Because this is running Firefox, you can still customize how the browser runs, just like regular Firefox. This includes hardening the privacy settings and installing additional add-ons per PWA installed.
\ No newline at end of file