implement persistent storage request and add notification for users on Google Chrome

Add debug mode to enable debugging auto discovery

README.md

@@ -33,13 +33,13 @@ Developed based on [Snapdrop](https://github.com/RobinLinus/snapdrop)
 
 ## Differences to Snapdrop
 
-### Device Pairing
+### Device Pairing / Internet Transfer
 * Pair devices via 6-digit code or QR-Code
 * Pair devices outside your local network or in complex network environment (public Wi-Fi, company network, Apple Private Relay, VPN etc.).
 * Connect to devices on your mobile hotspot.
 * Paired devices will always find each other via shared secrets even after reopening the browser or the Progressive Web App
 * You will always discover devices on your local network. Paired devices are shown additionally.
-* Paired devices outside your local network that are behind a NAT are connected automatically via [Open Relay: Free WebRTC TURN Server](https://www.metered.ca/tools/openrelay/)
+* Paired devices outside your local network that are behind a NAT are connected automatically via the PairDrop TURN server.
 
 ### [Improved UI for sending/receiving files](https://github.com/RobinLinus/snapdrop/issues/560)
 * Files are transferred only after a request is accepted first. On transfer completion files are downloaded automatically if possible.
@@ -89,9 +89,9 @@ You can [host your own instance with Docker](/docs/host-your-own.md).
 
 
 ## Support the Community
-PairDrop is free and always will be. Still, we have to pay for the domain.
+PairDrop is free and always will be. Still, we have to pay for the domain and the server.
 
-To contribute and support me:<br>
+To contribute and support:<br>
 <a href="https://www.buymeacoffee.com/pairdrop" target="_blank">
 <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" >
 </a>

docker-compose-coturn.yml

@@ -0,0 +1,19 @@
+version: "3"
+services:
+  node:
+    image: "node:lts-alpine"
+    user: "node"
+    working_dir: /home/node/app
+    volumes:
+      - ./:/home/node/app
+    command: ash -c "npm i && npm run start:prod"
+    restart: unless-stopped
+    ports:
+      - "3000:3000"
+  coturn_server:
+    image: "coturn/coturn"
+    restart: always
+    network_mode: "host"
+    volumes:
+      - ./turnserver.conf:/etc/coturn/turnserver.conf
+    #you need to copy turnserver_example.conf to turnserver.conf and specify domain, IP address, user and password

docs/faq.md

@@ -104,10 +104,13 @@ Here's a list of some third-party apps compatible with PairDrop:
     What about the connection? Is it a P2P-connection directly from device to device or is there any third-party-server?
 </summary>
 
-It uses a P2P connection if WebRTC is supported by the browser. WebRTC needs a Signaling Server, but it is only used to establish a connection and is not involved in the file transfer.
+It uses a WebRTC peer to peer connection. WebRTC needs a Signaling Server that is only used to establish a connection. The server is not involved in the file transfer.
 
-If your devices are paired and behind a NAT, the public TURN Server from [Open Relay](https://www.metered.ca/tools/openrelay/) is used to route your files and messages.
+If devices are on the same network, none of your files are ever sent to any server.
 
+If your devices are paired and behind a NAT, the PairDrop TURN Server is used to route your files and messages. See the [Technical Documentation](technical-documentation.md#encryption-webrtc-stun-and-turn) to learn more about STUN, TURN and WebRTC.
+
+If you host your own instance and want to support devices that do not support WebRTC, you can [start the PairDrop instance with an activated Websocket fallback](https://github.com/schlagmichdoch/PairDrop/blob/master/docs/host-your-own.md#websocket-fallback-for-vpn).
 
 <br>
 
@@ -118,11 +121,12 @@ If your devices are paired and behind a NAT, the public TURN Server from [Open R
     What about privacy? Will files be saved on third-party-servers?
 </summary>
 
-None of your files are ever sent to any server. Files are sent only between peers. PairDrop doesn't even use a database. If you are curious have a look [at the Server](https://github.com/schlagmichdoch/pairdrop/blob/master/index.js).
+Files are sent directly between peers. PairDrop doesn't even use a database. If you are curious, have a look [at the Server](https://github.com/schlagmichdoch/pairdrop/blob/master/index.js).
 WebRTC encrypts the files on transit.
 
-If your devices are paired and behind a NAT, the public TURN Server from [Open Relay](https://www.metered.ca/tools/openrelay/) is used to route your files and messages.
+If devices are on the same network, none of your files are ever sent to any server.
 
+If your devices are paired and behind a NAT, the PairDrop TURN Server is used to route your files and messages. See the [Technical Documentation](technical-documentation.md#encryption-webrtc-stun-and-turn) to learn more about STUN, TURN and WebRTC.
 
 <br>
 
@@ -147,9 +151,7 @@ Yes. Your files are sent using WebRTC, which encrypts them on transit. To ensure
 
 Naturally, if traffic needs to be routed through the turn server because your devices are behind different NATs, transfer speed decreases.
 
-As the public TURN server used is not super fast, you can easily [specify to use your own TURN server](https://github.com/schlagmichdoch/PairDrop/blob/master/docs/host-your-own.md#specify-stunturn-servers) if you host your own instance.
-
-Alternatively, you can open a hotspot on one of your devices to bridge the connection which makes transfers much faster as no TURN server is needed.
+You can open a hotspot on one of your devices to bridge the connection which omits the need of the TURN server.
 
 - [How to open a hotspot on Windows](https://support.microsoft.com/en-us/windows/use-your-windows-pc-as-a-mobile-hotspot-c89b0fad-72d5-41e8-f7ea-406ad9036b85#WindowsVersion=Windows_11)
 - [How to open a hotspot on Mac](https://support.apple.com/guide/mac-help/share-internet-connection-mac-network-users-mchlp1540/mac)
@@ -171,7 +173,7 @@ Then, all data should be sent directly between devices and your data plan should
 Snapdrop and PairDrop are a study in radical simplicity. The user interface is insanely simple. Features are chosen very carefully because complexity grows quadratically since every feature potentially interferes with each other feature. We focus very narrowly on a single use case: instant file transfer. 
 We are not trying to optimize for some edge-cases. We are optimizing the user flow of the average users. Don't be sad if we decline your feature request for the sake of simplicity. 
 
-If you want to learn more about simplicity you can read [Insanely Simple: The Obsession that Drives Apple's Success](https://www.amazon.com/Insanely-Simple-Ken-Segall-audiobook/dp/B007Z9686O) or [Thinking, Fast and Slow](https://www.amazon.com/Thinking-Fast-Slow-Daniel-Kahneman/dp/0374533555).
+If you want to learn more about simplicity you can read *Insanely Simple: The Obsession that Drives Apple's Success* or *Thinking, Fast and Slow*.
 
 
 <br>
@@ -183,7 +185,7 @@ If you want to learn more about simplicity you can read [Insanely Simple: The Ob
     Snapdrop and PairDrop are awesome! How can I support them? 
 </summary>
 
-* [Buy me a coffee to support open source software](https://www.buymeacoffee.com/pairdrop)
+* [Buy me a coffee](https://www.buymeacoffee.com/pairdrop) to pay for the domain and the server, and support open source software
 * [File bugs, give feedback, submit suggestions](https://github.com/schlagmichdoch/pairdrop/issues)
 * Share PairDrop on social media.
 * Fix bugs and make a pull request. 

docs/host-your-own.md

@@ -1,6 +1,12 @@
 # Deployment Notes
 The easiest way to get PairDrop up and running is by using Docker.
 
+> <b>TURN server for Internet Transfer</b>
+> 
+> Beware that you have to host your own TURN server in order to enable transfers between different networks.
+>
+> You can follow [this guide](https://gabrieltanner.org/blog/turn-server/) to either install coturn directly on your system (Step 1) or deploy it via docker-compose (Step 5).
+
 ## Deployment with Docker
 
 ### Docker Image from Docker Hub
@@ -24,7 +30,7 @@ Set options by using the following flags in the `docker run` command:
 > - 3000 -> `-p 127.0.0.1:3000:3000`
 > - 8080 -> `-p 127.0.0.1:8080:3000`
 ##### Rate limiting requests
-```
+```bash
 -e RATE_LIMIT=true
 ```
 > Limits clients to 1000 requests per 5 min
@@ -50,6 +56,8 @@ Set options by using the following flags in the `docker run` command:
 > Specify the STUN/TURN servers PairDrop clients use by setting `RTC_CONFIG` to a JSON file including the configuration.
 > You can use `pairdrop/rtc_config_example.json` as a starting point.
 >
+> To host your own TURN server you can follow this guide: https://gabrieltanner.org/blog/turn-server/
+>
 > Default configuration:
 > ```json
 > {
@@ -57,19 +65,36 @@ Set options by using the following flags in the `docker run` command:
 >   "iceServers": [
 >     {
 >       "urls": "stun:stun.l.google.com:19302"
->     },
->     {
->       "urls": "stun:openrelay.metered.ca:80"
->     },
->     {
->       "urls": "turn:openrelay.metered.ca:443",
->       "username": "openrelayproject",
->       "credential": "openrelayproject"
 >     }
 >   ]
 > }
 > ```
 
+##### Debug Mode
+```bash
+-e DEBUG_MODE="true"
+```
+
+> Use this flag to enable debugging information about the connecting peers IP addresses. This is quite useful to check whether the [#HTTP-Server](#http-server) 
+> is configured correctly, so the auto discovery feature works correctly. Otherwise, all clients discover each other mutually, independently of their network status.
+> 
+> If this flag is set to `"true"` each peer that connects to the PairDrop server will produce a log to STDOUT like this:
+> ```
+> ----DEBUGGING-PEER-IP-START----
+> remoteAddress: ::ffff:172.17.0.1
+> x-forwarded-for: 19.117.63.126
+> cf-connecting-ip: undefined
+> PairDrop uses: 19.117.63.126
+> IP is private: false
+> if IP is private, '127.0.0.1' is used instead
+> ----DEBUGGING-PEER-IP-END----
+> ```
+> If the IP PairDrop uses is the public IP of your device everything is correctly setup. 
+>To find out your devices public IP visit https://www.whatismyip.com/.
+> 
+> To preserve your clients' privacy, **never use this flag in production!** 
+
+
 <br>
 
 ### Docker Image from GHCR
@@ -82,7 +107,7 @@ docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 gh
 >
 > To specify options replace `npm run start:prod` according to [the documentation below.](#options--flags-1)
 
-> The Docker Image includes a Healthcheck. To learn more see [Docker Swarm Usage](./docker-swarm-usage.md#docker-swarm-usage)
+> The Docker Image includes a Healthcheck. To learn more see [Docker Swarm Usage](docker-swarm-usage.md#docker-swarm-usage)
 
 ### Docker Image self-built
 #### Build the image
@@ -103,7 +128,7 @@ docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 -i
 >
 > To specify options replace `npm run start:prod` according to [the documentation below.](#options--flags-1)
 
-> The Docker Image includes a Healthcheck. To learn more see [Docker Swarm Usage](./docker-swarm-usage.md#docker-swarm-usage)
+> The Docker Image includes a Healthcheck. To learn more see [Docker Swarm Usage](docker-swarm-usage.md#docker-swarm-usage)
 
 <br>
 
@@ -186,6 +211,8 @@ $env:RTC_CONFIG="rtc_config.json"; npm start
 ```
 > Specify the STUN/TURN servers PairDrop clients use by setting `RTC_CONFIG` to a JSON file including the configuration.
 > You can use `pairdrop/rtc_config_example.json` as a starting point.
+> 
+> To host your own TURN server you can follow this guide: https://gabrieltanner.org/blog/turn-server/ 
 >
 > Default configuration:
 > ```json
@@ -194,19 +221,41 @@ $env:RTC_CONFIG="rtc_config.json"; npm start
 >   "iceServers": [
 >     {
 >       "urls": "stun:stun.l.google.com:19302"
->     },
->     {
->       "urls": "stun:openrelay.metered.ca:80"
->     },
->     {
->       "urls": "turn:openrelay.metered.ca:443",
->       "username": "openrelayproject",
->       "credential": "openrelayproject"
 >     }
 >   ]
 > }
 > ```
 
+#### Debug Mode
+On Unix based systems
+```bash
+DEBUG_MODE="true" npm start
+```
+On Windows
+```bash
+$env:DEBUG_MODE="true"; npm start 
+```
+
+> Use this flag to enable debugging information about the connecting peers IP addresses. This is quite useful to check whether the [#HTTP-Server](#http-server)
+> is configured correctly, so the auto discovery feature works correctly. Otherwise, all clients discover each other mutually, independently of their network status.
+>
+> If this flag is set to `"true"` each peer that connects to the PairDrop server will produce a log to STDOUT like this:
+> ```
+> ----DEBUGGING-PEER-IP-START----
+> remoteAddress: ::ffff:172.17.0.1
+> x-forwarded-for: 19.117.63.126
+> cf-connecting-ip: undefined
+> PairDrop uses: 19.117.63.126
+> IP is private: false
+> if IP is private, '127.0.0.1' is used instead
+> ----DEBUGGING-PEER-IP-END----
+> ```
+> If the IP PairDrop uses is the public IP of your device everything is correctly setup.
+>To find out your devices public IP visit https://www.whatismyip.com/.
+>
+> To preserve your clients' privacy, **never use this flag in production!**
+
+
 ### Options / Flags
 #### Local Run
 ```bash
@@ -263,6 +312,8 @@ npm run start:prod -- --localhost-only --include-ws-fallback
 ## HTTP-Server
 When running PairDrop, the `X-Forwarded-For` header has to be set by a proxy. Otherwise, all clients will be mutually visible.
 
+To check if your setup is configured correctly [use the environment variable `DEBUG_MODE="true"`](#debug-mode).
+
 ### Using nginx
 #### Allow http and https requests
 ```

index.js

@@ -90,6 +90,12 @@ if (process.argv.includes('--include-ws-fallback')) {
     app.use(express.static('public'));
 }
 
+const debugMode = process.env.DEBUG_MODE === "true";
+
+if (debugMode) {
+    console.log("DEBUG_MODE is active. To protect privacy, do not use in production.")
+}
+
 app.use(function(req, res) {
     res.redirect('/');
 });
@@ -502,6 +508,17 @@ class Peer {
         if (this.ip.substring(0,7) === "::ffff:")
             this.ip = this.ip.substring(7);
 
+        if (debugMode) {
+            console.debug("----DEBUGGING-PEER-IP-START----");
+            console.debug("remoteAddress:", request.connection.remoteAddress);
+            console.debug("x-forwarded-for:", request.headers['x-forwarded-for']);
+            console.debug("cf-connecting-ip:", request.headers['cf-connecting-ip']);
+            console.debug("PairDrop uses:", this.ip);
+            console.debug("IP is private:", this.ipIsPrivate(this.ip));
+            console.debug("if IP is private, '127.0.0.1' is used instead");
+            console.debug("----DEBUGGING-PEER-IP-END----");
+        }
+
         // IPv4 and IPv6 use different values to refer to localhost
         // put all peers on the same network as the server into the same room as well
         if (this.ip === '::1' || this.ipIsPrivate(this.ip)) {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pairdrop",
-  "version": "1.6.0",
+  "version": "1.6.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pairdrop",
-      "version": "1.6.0",
+      "version": "1.6.3",
       "license": "ISC",
       "dependencies": {
         "express": "^4.18.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pairdrop",
-  "version": "1.6.0",
+  "version": "1.6.3",
   "description": "",
   "main": "index.js",
   "scripts": {

public/index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <!-- Web App Config -->
     <title>PairDrop</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="theme-color" content="#3367d6">
     <meta name="color-scheme" content="dark light">
     <meta name="apple-mobile-web-app-capable" content="no">
@@ -39,24 +39,24 @@
 
 <body translate="no">
     <header class="row-reverse">
-        <a href="#about" class="icon-button" title="About PairDrop">
+        <a href="#about" class="icon-button" title="About PairDrop" aria-label="Open About PairDrop">
             <svg class="icon">
                 <use xlink:href="#info-outline" />
             </svg>
         </a>
         <div id="theme-wrapper">
-            <div id="theme-auto" class="icon-button selected" title="Adapt to System" >
+            <div id="theme-auto" class="icon-button selected" title="Adapt Theme to System" >
                 <svg class="icon">
                     <use xlink:href="#icon-theme-auto" />
                 </svg>
             </div>
             <div>
-                <div id="theme-light" class="icon-button" title="Always Light" >
+                <div id="theme-light" class="icon-button" title="Always Use Light-Theme" >
                     <svg class="icon">
                         <use xlink:href="#icon-theme-light" />
                     </svg>
                 </div>
-                <div id="theme-dark" class="icon-button" title="Always Dark" >
+                <div id="theme-dark" class="icon-button" title="Always Use Dark-Theme" >
                     <svg class="icon">
                         <use xlink:href="#icon-theme-dark" />
                     </svg>
@@ -264,7 +264,7 @@
     <!-- About Page -->
     <x-about id="about" class="full center column">
         <header class="row-reverse fade-in">
-            <a href="#" class="close icon-button">
+            <a href="#" class="close icon-button" aria-label="Close About PairDrop">
                 <svg class="icon">
                     <use xlink:href="#close-icon" />
                 </svg>

public/scripts/ui.js

@@ -57,6 +57,12 @@ class PeersUI {
             console.log("Retrieved edited display name:", displayName)
             if (displayName) Events.fire('self-display-name-changed', displayName);
         });
+
+
+        /* prevent animation on load */
+        setTimeout(_ => {
+            this.$xNoPeers.style.animationIterationCount = "1";
+        }, 300);
     }
 
     _insertDisplayName(displayName) {
@@ -81,12 +87,16 @@ class PeersUI {
         if (newDisplayName === savedDisplayName) return;
 
         if (newDisplayName) {
-            PersistentStorage.set('editedDisplayName', newDisplayName).then(_ => {
+            PersistentStorage.set('editedDisplayName', newDisplayName).then(async _ => {
+                const persistent = await PersistentStorage.isStoragePersistent();
+                if (!persistent) {
+                    throw ErrorEvent("Storage not persistent.")
+                }
                 Events.fire('notify-user', 'Device name is changed permanently.');
             }).catch(_ => {
                 console.log("This browser does not support IndexedDB. Use localStorage instead.");
                 localStorage.setItem('editedDisplayName', newDisplayName);
-                Events.fire('notify-user', 'Device name is changed only for this session.');
+                Events.fire('notify-user', 'Device name is changed for this session only.\n\nGoogle Chrome:\nSave page as bookmark or enable notifications to enable persistence.');
             }).finally(_ => {
                 Events.fire('self-display-name-changed', newDisplayName);
                 Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: newDisplayName});
@@ -95,7 +105,6 @@ class PeersUI {
             PersistentStorage.delete('editedDisplayName').catch(_ => {
                 console.log("This browser does not support IndexedDB. Use localStorage instead.")
                 localStorage.removeItem('editedDisplayName');
-                Events.fire('notify-user', 'Random Display name is used again.');
             }).finally(_ => {
                 Events.fire('notify-user', 'Device name is randomly generated again.');
                 Events.fire('self-display-name-changed', '');
@@ -175,7 +184,6 @@ class PeersUI {
         if (!$peer) return;
         $peer.remove();
         this.evaluateOverflowing();
-        if ($$('x-peers:empty')) setTimeout(_ => window.animateBackground(true), 1750); // Start animation again
     }
 
     _onSecretRoomDeleted(roomSecret) {
@@ -315,7 +323,6 @@ class PeerUI {
         $$('x-peers').appendChild(this.$el)
         Events.fire('peer-added');
         this.$xInstructions = $$('x-instructions');
-        setTimeout(_ => window.animateBackground(false), 1750); // Stop animation
     }
 
     html() {
@@ -1023,17 +1030,21 @@ class PairDeviceDialog extends Dialog {
 
     _pairDeviceJoined(peerId, roomSecret) {
         this.hide();
-        PersistentStorage.addRoomSecret(roomSecret).then(_ => {
+        PersistentStorage.addRoomSecret(roomSecret).then(async addedRoomSecret => {
+            const persistent = await PersistentStorage.isStoragePersistent();
+            if (!persistent) {
+                throw ErrorEvent("Storage not persistent.")
+            }
             Events.fire('notify-user', 'Devices paired successfully.');
             const oldRoomSecret = $(peerId).ui.roomSecret;
-            if (oldRoomSecret) PersistentStorage.deleteRoomSecret(oldRoomSecret);
-            $(peerId).ui.roomSecret = roomSecret;
-            this._evaluateNumberRoomSecrets();
+            if (oldRoomSecret) await PersistentStorage.deleteRoomSecret(oldRoomSecret);
+            $(peerId).ui.roomSecret = addedRoomSecret;
         }).finally(_ => {
+            this._evaluateNumberRoomSecrets();
             this._cleanUp();
         })
         .catch(_ => {
-            Events.fire('notify-user', 'Paired devices are not persistent.');
+            Events.fire('notify-user', 'Paired device is saved for this session only.\n\nGoogle Chrome:\nSave page as bookmark or enable notifications to enable persistence.');
             PersistentStorage.logBrowserNotCapable();
         });
     }
@@ -1456,6 +1467,15 @@ class Notifications {
                 return;
             }
             Events.fire('notify-user', 'Notifications enabled.');
+            PersistentStorage.isStoragePersistent().then(persistent => {
+                if (!persistent) {
+                    PersistentStorage.requestPersistentStorage().then(updatedPersistence => {
+                        if (updatedPersistence) {
+                            Events.fire('notify-user', 'Successfully enabled persistent storage.')
+                        }
+                    })
+                }
+            })
             this.$button.setAttribute('hidden', 1);
         });
     }
@@ -1571,27 +1591,15 @@ class NetworkStatusUI {
     constructor() {
         Events.on('offline', _ => this._showOfflineMessage());
         Events.on('online', _ => this._showOnlineMessage());
-        Events.on('ws-connected', _ => this._onWsConnected());
-        Events.on('ws-disconnected', _ => this._onWsDisconnected());
         if (!navigator.onLine) this._showOfflineMessage();
     }
 
     _showOfflineMessage() {
         Events.fire('notify-user', 'You are offline');
-        window.animateBackground(false);
     }
 
     _showOnlineMessage() {
         Events.fire('notify-user', 'You are back online');
-        window.animateBackground(true);
-    }
-
-    _onWsConnected() {
-        window.animateBackground(true);
-    }
-
-    _onWsDisconnected() {
-        window.animateBackground(false);
     }
 }
 
@@ -1730,8 +1738,27 @@ class PersistentStorage {
         console.log("This browser does not support IndexedDB. Paired devices will be gone after the browser is closed.");
     }
 
+    static async isStoragePersistent() {
+        return await navigator.storage.persisted();
+    }
+
+    static async requestPersistentStorage() {
+        if (!navigator.storage || !navigator.storage.persist) return false;
+        if (await this.isStoragePersistent()) return true;
+
+        const persistent = await navigator.storage.persist()
+        if (persistent) {
+            console.log("Storage will not be cleared except by explicit user action");
+        } else {
+            console.warn("Storage may be cleared by the UA under storage pressure.");
+        }
+        return persistent;
+    }
+
     static set(key, value) {
-        return new Promise((resolve, reject) => {
+        return new Promise(async (resolve, reject) => {
+            await this.requestPersistentStorage();
+
             const DBOpenRequest = window.indexedDB.open('pairdrop_store');
             DBOpenRequest.onsuccess = (e) => {
                 const db = e.target.result;
@@ -1788,7 +1815,9 @@ class PersistentStorage {
     }
 
     static addRoomSecret(roomSecret) {
-        return new Promise((resolve, reject) => {
+        return new Promise(async (resolve, reject) => {
+            await this.requestPersistentStorage();
+
             const DBOpenRequest = window.indexedDB.open('pairdrop_store');
             DBOpenRequest.onsuccess = (e) => {
                 const db = e.target.result;
@@ -1797,7 +1826,7 @@ class PersistentStorage {
                 const objectStoreRequest = objectStore.add({'secret': roomSecret});
                 objectStoreRequest.onsuccess = _ => {
                     console.log(`Request successful. RoomSecret added: ${roomSecret}`);
-                    resolve();
+                    resolve(roomSecret);
                 }
             }
             DBOpenRequest.onerror = (e) => {
@@ -1942,28 +1971,26 @@ window.addEventListener('beforeinstallprompt', e => {
     return e.preventDefault();
 });
 
-// Background Animation
+// Background Circles
 Events.on('load', () => {
     let c = document.createElement('canvas');
-    document.body.appendChild(c);
     let style = c.style;
     style.width = '100%';
     style.position = 'absolute';
     style.zIndex = -1;
     style.top = 0;
     style.left = 0;
+    style.animation = "fade-in 800ms";
     let cCtx = c.getContext('2d');
     let x0, y0, w, h, dw, offset;
 
-    let offscreenCanvases = [];
-
     function init() {
         let oldW = w;
         let oldH = h;
         let oldOffset = offset
         w = document.documentElement.clientWidth;
         h = document.documentElement.clientHeight;
-        offset = $$('footer').offsetHeight - 32;
+        offset = $$('footer').offsetHeight - 33;
         if (h > 800) offset += 16;
 
         if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
@@ -1973,63 +2000,33 @@ Events.on('load', () => {
         x0 = w / 2;
         y0 = h - offset;
         dw = Math.round(Math.max(w, h, 1000) / 13);
-        drawCircles(cCtx, 0);
 
-        // enforce redrawing of frames
-        offscreenCanvases = [];
+        if (document.body.contains(c)) {
+            document.body.removeChild(c);
+        }
+        drawCircles(cCtx, dw);
+        document.body.appendChild(c);
     }
+
     Events.on('bg-resize', _ => init());
     window.onresize = _ => Events.fire('bg-resize');
 
     function drawCircle(ctx, radius) {
         ctx.beginPath();
         ctx.lineWidth = 2;
-        let opacity = 0.2 * (1 - 1.2 * radius / Math.max(w, h));
-        ctx.strokeStyle = `rgb(128, 128, 128, ${opacity})`;
+        let opacity = 0.3 * (1 - 1.2 * radius / Math.max(w, h));
+        ctx.strokeStyle = `rgba(128, 128, 128, ${opacity})`;
         ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
         ctx.stroke();
     }
 
     function drawCircles(ctx, frame) {
         for (let i = 0; i < 13; i++) {
-            drawCircle(ctx, dw * i + frame);
+            drawCircle(ctx, dw * i + frame + 33);
         }
     }
 
-    function createOffscreenCanvas(frame) {
-        let canvas = document.createElement("canvas");
-        canvas.width = c.width;
-        canvas.height = c.height;
-        offscreenCanvases[frame] = canvas;
-        let ctx = canvas.getContext('2d');
-        drawCircles(ctx, frame);
-    }
-
-    function drawFrame(frame) {
-        cCtx.clearRect(0, 0, w, h);
-        if (!offscreenCanvases[frame]) {
-            createOffscreenCanvas(frame);
-        }
-        cCtx.drawImage(offscreenCanvases[frame], 0, 0);
-    }
-
-    let animate = true;
-    let currentFrame = 0;
-
-    function animateBg() {
-        if (currentFrame + 1 < dw || animate) {
-            currentFrame = (currentFrame + 1) % dw;
-            drawFrame(currentFrame);
-        }
-        setTimeout(_ => animateBg(), 3000 / dw);
-    }
-
-    window.animateBackground = function(l) {
-        animate = l;
-    };
-
     init();
-    animateBg();
 });
 
 document.changeFavicon = function (src) {

public/service-worker.js

@@ -1,4 +1,4 @@
-const cacheVersion = 'v1.6.0';
+const cacheVersion = 'v1.6.3';
 const cacheTitle = `pairdrop-cache-${cacheVersion}`;
 const urlsToCache = [
     'index.html',

public/styles.css

@@ -112,7 +112,7 @@ header > div:not(:hover) .icon-button:not(.selected) {
     opacity: 0;
 }
 
-header > div:hover::before {
+#theme-wrapper:hover::before {
     border-radius: 20px;
     background: currentColor;
     opacity: 0.1;
@@ -204,7 +204,8 @@ body {
     line-height: 18px;
 }
 
-a {
+a,
+.icon-button {
     text-decoration: none;
     color: currentColor;
     cursor: pointer;
@@ -404,10 +405,10 @@ x-no-peers {
     flex-direction: column;
     padding: 8px;
     text-align: center;
-    /* prevent flickering on load */
     animation: fade-in 300ms;
-    animation-delay: 500ms;
     animation-fill-mode: backwards;
+    /* prevent flickering on load */
+    animation-iteration-count: 0;
 }
 
 x-no-peers h2,
@@ -1127,6 +1128,7 @@ x-toast {
     line-height: 24px;
     border-radius: 8px;
     pointer-events: all;
+    white-space: pre-wrap;
 }
 
 x-toast:not([show]):not(:hover) {

public_included_ws_fallback/index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <!-- Web App Config -->
     <title>PairDrop</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="theme-color" content="#3367d6">
     <meta name="color-scheme" content="dark light">
     <meta name="apple-mobile-web-app-capable" content="no">
@@ -39,24 +39,24 @@
 
 <body translate="no">
     <header class="row-reverse">
-        <a href="#about" class="icon-button" title="About PairDrop">
+        <a href="#about" class="icon-button" title="About PairDrop" aria-label="Open About PairDrop">
             <svg class="icon">
                 <use xlink:href="#info-outline" />
             </svg>
         </a>
         <div id="theme-wrapper">
-            <div id="theme-auto" class="icon-button selected" title="Adapt to System" >
+            <div id="theme-auto" class="icon-button selected" title="Adapt Theme to System" >
                 <svg class="icon">
                     <use xlink:href="#icon-theme-auto" />
                 </svg>
             </div>
             <div>
-                <div id="theme-light" class="icon-button" title="Always Light" >
+                <div id="theme-light" class="icon-button" title="Always Use Light-Theme" >
                     <svg class="icon">
                         <use xlink:href="#icon-theme-light" />
                     </svg>
                 </div>
-                <div id="theme-dark" class="icon-button" title="Always Dark" >
+                <div id="theme-dark" class="icon-button" title="Always Use Dark-Theme" >
                     <svg class="icon">
                         <use xlink:href="#icon-theme-dark" />
                     </svg>
@@ -267,7 +267,7 @@
     <!-- About Page -->
     <x-about id="about" class="full center column">
         <header class="row-reverse fade-in">
-            <a href="#" class="close icon-button">
+            <a href="#" class="close icon-button" aria-label="Close About PairDrop">
                 <svg class="icon">
                     <use xlink:href="#close-icon" />
                 </svg>

public_included_ws_fallback/scripts/ui.js

@@ -57,6 +57,12 @@ class PeersUI {
             console.log("Retrieved edited display name:", displayName)
             if (displayName) Events.fire('self-display-name-changed', displayName);
         });
+
+
+        /* prevent animation on load */
+        setTimeout(_ => {
+            this.$xNoPeers.style.animationIterationCount = "1";
+        }, 300);
     }
 
     _insertDisplayName(displayName) {
@@ -81,12 +87,16 @@ class PeersUI {
         if (newDisplayName === savedDisplayName) return;
 
         if (newDisplayName) {
-            PersistentStorage.set('editedDisplayName', newDisplayName).then(_ => {
+            PersistentStorage.set('editedDisplayName', newDisplayName).then(async _ => {
+                const persistent = await PersistentStorage.isStoragePersistent();
+                if (!persistent) {
+                    throw ErrorEvent("Storage not persistent.")
+                }
                 Events.fire('notify-user', 'Device name is changed permanently.');
             }).catch(_ => {
                 console.log("This browser does not support IndexedDB. Use localStorage instead.");
                 localStorage.setItem('editedDisplayName', newDisplayName);
-                Events.fire('notify-user', 'Device name is changed only for this session.');
+                Events.fire('notify-user', 'Device name is changed for this session only.\n\nGoogle Chrome:\nSave page as bookmark or enable notifications to enable persistence.');
             }).finally(_ => {
                 Events.fire('self-display-name-changed', newDisplayName);
                 Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: newDisplayName});
@@ -95,7 +105,6 @@ class PeersUI {
             PersistentStorage.delete('editedDisplayName').catch(_ => {
                 console.log("This browser does not support IndexedDB. Use localStorage instead.")
                 localStorage.removeItem('editedDisplayName');
-                Events.fire('notify-user', 'Random Display name is used again.');
             }).finally(_ => {
                 Events.fire('notify-user', 'Device name is randomly generated again.');
                 Events.fire('self-display-name-changed', '');
@@ -175,7 +184,6 @@ class PeersUI {
         if (!$peer) return;
         $peer.remove();
         this.evaluateOverflowing();
-        if ($$('x-peers:empty')) setTimeout(_ => window.animateBackground(true), 1750); // Start animation again
     }
 
     _onSecretRoomDeleted(roomSecret) {
@@ -315,7 +323,6 @@ class PeerUI {
         $$('x-peers').appendChild(this.$el)
         Events.fire('peer-added');
         this.$xInstructions = $$('x-instructions');
-        setTimeout(_ => window.animateBackground(false), 1750); // Stop animation
     }
 
     html() {
@@ -362,7 +369,6 @@ class PeerUI {
         this.$el.ui = this;
         this._peer.roomTypes.forEach(roomType => this.$el.classList.add(`type-${roomType}`));
         this.$el.classList.add('center');
-        if (!this._peer.rtcSupported || !window.isRtcSupported) this.$el.classList.add('ws-peer')
         this.html();
 
         this._callbackInput = e => this._onFilesSelected(e)
@@ -1024,17 +1030,21 @@ class PairDeviceDialog extends Dialog {
 
     _pairDeviceJoined(peerId, roomSecret) {
         this.hide();
-        PersistentStorage.addRoomSecret(roomSecret).then(_ => {
+        PersistentStorage.addRoomSecret(roomSecret).then(async addedRoomSecret => {
+            const persistent = await PersistentStorage.isStoragePersistent();
+            if (!persistent) {
+                throw ErrorEvent("Storage not persistent.")
+            }
             Events.fire('notify-user', 'Devices paired successfully.');
             const oldRoomSecret = $(peerId).ui.roomSecret;
-            if (oldRoomSecret) PersistentStorage.deleteRoomSecret(oldRoomSecret);
-            $(peerId).ui.roomSecret = roomSecret;
-            this._evaluateNumberRoomSecrets();
+            if (oldRoomSecret) await PersistentStorage.deleteRoomSecret(oldRoomSecret);
+            $(peerId).ui.roomSecret = addedRoomSecret;
         }).finally(_ => {
+            this._evaluateNumberRoomSecrets();
             this._cleanUp();
         })
         .catch(_ => {
-            Events.fire('notify-user', 'Paired devices are not persistent.');
+            Events.fire('notify-user', 'Paired device is saved for this session only.\n\nGoogle Chrome:\nSave page as bookmark or enable notifications to enable persistence.');
             PersistentStorage.logBrowserNotCapable();
         });
     }
@@ -1457,6 +1467,15 @@ class Notifications {
                 return;
             }
             Events.fire('notify-user', 'Notifications enabled.');
+            PersistentStorage.isStoragePersistent().then(persistent => {
+                if (!persistent) {
+                    PersistentStorage.requestPersistentStorage().then(updatedPersistence => {
+                        if (updatedPersistence) {
+                            Events.fire('notify-user', 'Successfully enabled persistent storage.')
+                        }
+                    })
+                }
+            })
             this.$button.setAttribute('hidden', 1);
         });
     }
@@ -1572,27 +1591,15 @@ class NetworkStatusUI {
     constructor() {
         Events.on('offline', _ => this._showOfflineMessage());
         Events.on('online', _ => this._showOnlineMessage());
-        Events.on('ws-connected', _ => this._onWsConnected());
-        Events.on('ws-disconnected', _ => this._onWsDisconnected());
         if (!navigator.onLine) this._showOfflineMessage();
     }
 
     _showOfflineMessage() {
         Events.fire('notify-user', 'You are offline');
-        window.animateBackground(false);
     }
 
     _showOnlineMessage() {
         Events.fire('notify-user', 'You are back online');
-        window.animateBackground(true);
-    }
-
-    _onWsConnected() {
-        window.animateBackground(true);
-    }
-
-    _onWsDisconnected() {
-        window.animateBackground(false);
     }
 }
 
@@ -1731,8 +1738,27 @@ class PersistentStorage {
         console.log("This browser does not support IndexedDB. Paired devices will be gone after the browser is closed.");
     }
 
+    static async isStoragePersistent() {
+        return await navigator.storage.persisted();
+    }
+
+    static async requestPersistentStorage() {
+        if (!navigator.storage || !navigator.storage.persist) return false;
+        if (await this.isStoragePersistent()) return true;
+
+        const persistent = await navigator.storage.persist()
+        if (persistent) {
+            console.log("Storage will not be cleared except by explicit user action");
+        } else {
+            console.warn("Storage may be cleared by the UA under storage pressure.");
+        }
+        return persistent;
+    }
+
     static set(key, value) {
-        return new Promise((resolve, reject) => {
+        return new Promise(async (resolve, reject) => {
+            await this.requestPersistentStorage();
+
             const DBOpenRequest = window.indexedDB.open('pairdrop_store');
             DBOpenRequest.onsuccess = (e) => {
                 const db = e.target.result;
@@ -1789,7 +1815,9 @@ class PersistentStorage {
     }
 
     static addRoomSecret(roomSecret) {
-        return new Promise((resolve, reject) => {
+        return new Promise(async (resolve, reject) => {
+            await this.requestPersistentStorage();
+
             const DBOpenRequest = window.indexedDB.open('pairdrop_store');
             DBOpenRequest.onsuccess = (e) => {
                 const db = e.target.result;
@@ -1798,7 +1826,7 @@ class PersistentStorage {
                 const objectStoreRequest = objectStore.add({'secret': roomSecret});
                 objectStoreRequest.onsuccess = _ => {
                     console.log(`Request successful. RoomSecret added: ${roomSecret}`);
-                    resolve();
+                    resolve(roomSecret);
                 }
             }
             DBOpenRequest.onerror = (e) => {
@@ -1943,28 +1971,26 @@ window.addEventListener('beforeinstallprompt', e => {
     return e.preventDefault();
 });
 
-// Background Animation
+// Background Circles
 Events.on('load', () => {
     let c = document.createElement('canvas');
-    document.body.appendChild(c);
     let style = c.style;
     style.width = '100%';
     style.position = 'absolute';
     style.zIndex = -1;
     style.top = 0;
     style.left = 0;
+    style.animation = "fade-in 800ms";
     let cCtx = c.getContext('2d');
     let x0, y0, w, h, dw, offset;
 
-    let offscreenCanvases = [];
-
     function init() {
         let oldW = w;
         let oldH = h;
         let oldOffset = offset
         w = document.documentElement.clientWidth;
         h = document.documentElement.clientHeight;
-        offset = $$('footer').offsetHeight - 32;
+        offset = $$('footer').offsetHeight - 33;
         if (h > 800) offset += 16;
 
         if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
@@ -1974,63 +2000,33 @@ Events.on('load', () => {
         x0 = w / 2;
         y0 = h - offset;
         dw = Math.round(Math.max(w, h, 1000) / 13);
-        drawCircles(cCtx, 0);
 
-        // enforce redrawing of frames
-        offscreenCanvases = [];
+        if (document.body.contains(c)) {
+            document.body.removeChild(c);
+        }
+        drawCircles(cCtx, dw);
+        document.body.appendChild(c);
     }
+
     Events.on('bg-resize', _ => init());
     window.onresize = _ => Events.fire('bg-resize');
 
     function drawCircle(ctx, radius) {
         ctx.beginPath();
         ctx.lineWidth = 2;
-        let opacity = 0.2 * (1 - 1.2 * radius / Math.max(w, h));
-        ctx.strokeStyle = `rgb(128, 128, 128, ${opacity})`;
+        let opacity = 0.3 * (1 - 1.2 * radius / Math.max(w, h));
+        ctx.strokeStyle = `rgba(128, 128, 128, ${opacity})`;
         ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
         ctx.stroke();
     }
 
     function drawCircles(ctx, frame) {
         for (let i = 0; i < 13; i++) {
-            drawCircle(ctx, dw * i + frame);
+            drawCircle(ctx, dw * i + frame + 33);
         }
     }
 
-    function createOffscreenCanvas(frame) {
-        let canvas = document.createElement("canvas");
-        canvas.width = c.width;
-        canvas.height = c.height;
-        offscreenCanvases[frame] = canvas;
-        let ctx = canvas.getContext('2d');
-        drawCircles(ctx, frame);
-    }
-
-    function drawFrame(frame) {
-        cCtx.clearRect(0, 0, w, h);
-        if (!offscreenCanvases[frame]) {
-            createOffscreenCanvas(frame);
-        }
-        cCtx.drawImage(offscreenCanvases[frame], 0, 0);
-    }
-
-    let animate = true;
-    let currentFrame = 0;
-
-    function animateBg() {
-        if (currentFrame + 1 < dw || animate) {
-            currentFrame = (currentFrame + 1) % dw;
-            drawFrame(currentFrame);
-        }
-        setTimeout(_ => animateBg(), 3000 / dw);
-    }
-
-    window.animateBackground = function(l) {
-        animate = l;
-    };
-
     init();
-    animateBg();
 });
 
 document.changeFavicon = function (src) {

public_included_ws_fallback/service-worker.js

@@ -1,4 +1,4 @@
-const cacheVersion = 'v1.6.0';
+const cacheVersion = 'v1.6.3';
 const cacheTitle = `pairdrop-included-ws-fallback-cache-${cacheVersion}`;
 const urlsToCache = [
     'index.html',

public_included_ws_fallback/styles.css

@@ -113,7 +113,7 @@ header > div:not(:hover) .icon-button:not(.selected) {
     opacity: 0;
 }
 
-header > div:hover::before {
+#theme-wrapper:hover::before {
     border-radius: 20px;
     background: currentColor;
     opacity: 0.1;
@@ -205,7 +205,8 @@ body {
     line-height: 18px;
 }
 
-a {
+a,
+.icon-button {
     text-decoration: none;
     color: currentColor;
     cursor: pointer;
@@ -414,10 +415,10 @@ x-no-peers {
     flex-direction: column;
     padding: 8px;
     text-align: center;
-    /* prevent flickering on load */
     animation: fade-in 300ms;
-    animation-delay: 500ms;
     animation-fill-mode: backwards;
+    /* prevent flickering on load */
+    animation-iteration-count: 0;
 }
 
 x-no-peers h2,
@@ -1153,6 +1154,7 @@ x-toast {
     line-height: 24px;
     border-radius: 8px;
     pointer-events: all;
+    white-space: pre-wrap;
 }
 
 x-toast:not([show]):not(:hover) {

rtc_config_example.json

@@ -3,6 +3,11 @@
   "iceServers": [
     {
       "urls": "stun:stun.l.google.com:19302"
+    },
+    {
+      "urls": "turn:example.com:3478",
+      "username": "username",
+      "credential": "password"
     }
   ]
 }

turnserver_example.conf

@@ -0,0 +1,38 @@
+# TURN server name and realm
+realm=<DOMAIN>
+server-name=pairdrop
+
+# IPs the TURN server listens to
+listening-ip=0.0.0.0
+
+# External IP-Address of the TURN server
+external-ip=<IP_ADDRESS>
+
+# Main listening port
+listening-port=3478
+
+# Further ports that are open for communication
+min-port=10000
+max-port=20000
+
+# Use fingerprint in TURN message
+fingerprint
+
+# Log file path
+log-file=/var/log/turnserver.log
+
+# Enable verbose logging
+verbose
+
+# Specify the user for the TURN authentification
+user=user:password
+
+# Enable long-term credential mechanism
+lt-cred-mech
+
+# SSL certificates
+cert=/etc/letsencrypt/live/<DOMAIN>/cert.pem
+pkey=/etc/letsencrypt/live/<DOMAIN>/privkey.pem
+
+# 443 for TURN over TLS, which can bypass firewalls
+tls-listening-port=443