fix persistent peerId -> displayName if PWA

This commit is contained in:
schlagmichdoch 2023-01-23 00:03:26 +01:00
parent 67273bc418
commit d424a0294a
3 changed files with 30 additions and 34 deletions

View file

@ -25,10 +25,10 @@ class ServerConnection {
Events.on('online', _ => this._connect()); Events.on('online', _ => this._connect());
} }
_connect() { async _connect() {
clearTimeout(this._reconnectTimer); clearTimeout(this._reconnectTimer);
if (this._isConnected() || this._isConnecting()) return; if (this._isConnected() || this._isConnecting()) return;
const ws = new WebSocket(this._endpoint()); const ws = new WebSocket(await this._endpoint());
ws.binaryType = 'arraybuffer'; ws.binaryType = 'arraybuffer';
ws.onopen = _ => this._onOpen(); ws.onopen = _ => this._onOpen();
ws.onmessage = e => this._onMessage(e.data); ws.onmessage = e => this._onMessage(e.data);
@ -114,29 +114,32 @@ class ServerConnection {
_onDisplayName(msg) { _onDisplayName(msg) {
sessionStorage.setItem("peerId", msg.message.peerId); sessionStorage.setItem("peerId", msg.message.peerId);
if (window.matchMedia('(display-mode: minimal-ui)').matches) { PersistentStorage.get('peerId').then(peerId => {
// make peerId persistent when pwa installed if (!peerId) {
PersistentStorage.set('peerId', msg.message.peerId).then(peerId => { // save peerId to indexedDB to retrieve after PWA is installed
console.log(`peerId saved to indexedDB: ${peerId}`); PersistentStorage.set('peerId', msg.message.peerId).then(peerId => {
}).catch(_ => _ => PersistentStorage.logBrowserNotCapable()); console.log(`peerId saved to indexedDB: ${peerId}`);
} });
}
}).catch(_ => _ => PersistentStorage.logBrowserNotCapable())
Events.fire('display-name', msg); Events.fire('display-name', msg);
} }
_endpoint() { async _endpoint() {
// hack to detect if deployment or development environment // hack to detect if deployment or development environment
const protocol = location.protocol.startsWith('https') ? 'wss' : 'ws'; const protocol = location.protocol.startsWith('https') ? 'wss' : 'ws';
const webrtc = window.isRtcSupported ? '/webrtc' : '/fallback'; const webrtc = window.isRtcSupported ? '/webrtc' : '/fallback';
let ws_url = new URL(protocol + '://' + location.host + location.pathname + 'server' + webrtc); let ws_url = new URL(protocol + '://' + location.host + location.pathname + 'server' + webrtc);
const peerId = this._peerId(); const peerId = await this._peerId();
if (peerId) { if (peerId) ws_url.searchParams.append('peer_id', peerId)
ws_url.searchParams.append('peer_id', peerId)
}
return ws_url.toString(); return ws_url.toString();
} }
_peerId() { async _peerId() {
return sessionStorage.getItem("peerId"); // make peerId persistent when pwa is installed
return window.matchMedia('(display-mode: minimal-ui)').matches
? await PersistentStorage.get('peerId')
: sessionStorage.getItem("peerId");
} }
_disconnect() { _disconnect() {

View file

@ -1376,7 +1376,7 @@ class PersistentStorage {
const objectStoreRequest = objectStore.put(value, key); const objectStoreRequest = objectStore.put(value, key);
objectStoreRequest.onsuccess = _ => { objectStoreRequest.onsuccess = _ => {
console.log(`Request successful. Added key-pair: ${key} - ${value}`); console.log(`Request successful. Added key-pair: ${key} - ${value}`);
resolve(); resolve(value);
}; };
} }
DBOpenRequest.onerror = (e) => { DBOpenRequest.onerror = (e) => {
@ -1551,20 +1551,13 @@ if ('serviceWorker' in navigator) {
} }
window.addEventListener('beforeinstallprompt', e => { window.addEventListener('beforeinstallprompt', e => {
if (window.matchMedia('(display-mode: standalone)').matches) { if (!window.matchMedia('(display-mode: minimal-ui)').matches) {
// make peerId persistent when pwa installed // only display install btn when installed
PersistentStorage.get('peerId').then(peerId => {
sessionStorage.setItem("peerId", peerId);
}).catch(e => console.error(e));
// don't display install banner when installed
return e.preventDefault();
} else {
const btn = document.querySelector('#install') const btn = document.querySelector('#install')
btn.hidden = false; btn.hidden = false;
btn.onclick = _ => e.prompt(); btn.onclick = _ => e.prompt();
return e.preventDefault();
} }
return e.preventDefault();
}); });
// Background Animation // Background Animation

View file

@ -1,4 +1,4 @@
var CACHE_NAME = 'pairdrop-cache-v3'; var CACHE_NAME = 'pairdrop-cache-v4';
var urlsToCache = [ var urlsToCache = [
'index.html', 'index.html',
'./', './',
@ -16,13 +16,13 @@ var urlsToCache = [
self.addEventListener('install', function(event) { self.addEventListener('install', function(event) {
// Perform install steps // Perform install steps
event.waitUntil( event.waitUntil(
caches.open(CACHE_NAME) caches.open(CACHE_NAME)
.then(function(cache) { .then(function(cache) {
console.log('Opened cache'); console.log('Opened cache');
return cache.addAll(urlsToCache); return cache.addAll(urlsToCache);
}) })
); );
}); });