Progressive Web App

The Direbox web app can be installed as a PWA (Progressive Web App) for those who want a native app-like experience on Android, Windows, Linux, and macOS.

PWA support is best on Chrome-based browsers, so make sure you're using Chrome, Chromium, Bromite, or another Chrome-based browser for the best experience.

Because Direbox is self-hosted, some additional steps are required to enable it as a PWA. There are a few options for doing so:

PWA in HTTP Mode

  1. Open up Chrome's developer flags dashboard and navigate to chrome://flags/#unsafely-treat-insecure-origin-as-secure
  2. Enter http://direbox:8097,http://10.0.0.5:8097 in this field
  3. Restart your browser
  4. Re-open Direbox in your browser. You should now be able to access the "Add to Home Screen" prompt.

This is the preferred way to enable Direbox as a PWA as it removes the ugly navbar in fullscreen mode and also allows Direbox to access permissions required for position beaconing and push notifications.

For those concerned about the security of this method, bear in mind that Direbox is entirely self-hosted and is not accessible from the Internet. So long as your home network or Direbox hotspot is secure, the security risk of enabling this flag in Chrome is minimal, as your WiFi connection is already encrypted provided you have a password.

PWA in HTTPS Mode

Direbox can also be installed using self-signed certificates to meet PWA requirements:

  1. Navigate to Settings > System on the Direbox Settings tab
  2. Change your transfer mode from HTTP to HTTPS
  3. Reboot your Direbox
  4. Re-open Direbox in your browser. You should now be able to access the "Add to Home Screen" prompt.

The disadvantage to this method is that your PWA will may include an ugly browser bar depending on your browser version. And since position beaconing and push notification permissions require an SSL certificate that is not self-signed, these features will still not work with Direbox in some browsers.

Some browsers may still consider self-signed certificates as "insecure" because they are not issued by a third-party certificate authority. If this is the case, follow the instructions for PWA in HTTP mode and add the URL string https://direbox:8097,https://10.0.0.5:8097 to your developer flags.

With Direbox and other self-hosted software, you are your own certificate authority. Your public/private keypair is generated via OpenSSL once Direbox is launched for the first time. Technical users may consider adding their Direbox keypair to a root certificate store, but this is beyond the scope of this tutorial.