Skip to content

Implement persistent room ids for PWAs #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
schlagmichdoch wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Implement persistent room ids for PWAs #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e457caa
fix wrong RTCPeer.config syntax
schlagmichdoch Oct 1, 2022
d575375
implement indexedDB in new class PersistentStorage to make rooms pers…
schlagmichdoch Oct 3, 2022
7721f9d
only write roomId from indexedDB to sessionStorage if roomId in sessi…
schlagmichdoch Oct 3, 2022
737f7b1
fix indexedDB error: use insert or update method instead of insert on…
schlagmichdoch Oct 3, 2022
ee183af
add error handling to IndexedDB API -> works again on Firefox Private…
schlagmichdoch Oct 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions client/scripts/network.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -570,7 +570,7 @@ class Events {

RTCPeer.config = {
'sdpSemantics': 'unified-plan',
'iceServers': [
urls: 'stun:stun.l.google.com:19302'
]
'iceServers': [{
urls: 'stun:stun.l.google.com:19302'
}]
}
105 changes: 100 additions & 5 deletions client/scripts/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,13 +332,27 @@ class JoinRoomDialog extends Dialog {
this.$text = this.$el.querySelector('#roomInput');
const button = this.$el.querySelector('form');
button.addEventListener('submit', e => this._join(e));

//retrieve roomId from db and write to sessionStorage if not null/undefined
PersistentStorage.get('roomId')
.then((roomId) => {
if (roomId && !sessionStorage.getItem('roomId')) {
sessionStorage.setItem('roomId', roomId);
location.reload()
}
})
.catch(e => console.log(e));
}

_joinExit(e) {
e.preventDefault();
if (sessionStorage.getItem("roomId")) {
sessionStorage.removeItem("roomId");
location.reload();
if (sessionStorage.getItem('roomId')) {
sessionStorage.removeItem('roomId');
PersistentStorage.delete('roomId')
.finally(() => {
location.reload();
})
.catch(e => console.log(e));
}else {
this.show();
}
Expand All @@ -350,12 +364,18 @@ class JoinRoomDialog extends Dialog {
if (inputNum.length >= 6) {
inputNum = inputNum.substring(0,6);
sessionStorage.setItem("roomId", inputNum);
location.reload();
PersistentStorage.set("roomId", inputNum)
.finally(() => {
location.reload();
})
.catch(e => console.log(e));
}
else {
inputNum = new ServerConnection()._randomNum(6);
sessionStorage.setItem("roomId", inputNum);
location.reload();
PersistentStorage.set("roomId", inputNum).finally(() => {
location.reload();
}).catch(e => console.log(e));
}
}
}
Expand Down Expand Up @@ -635,6 +655,80 @@ class WebShareTargetUI {
}
}

class PersistentStorage {
constructor() {
const DBOpenRequest = window.indexedDB.open('snapdrop_store');
DBOpenRequest.onerror = (e) => {
console.log('Error initializing database: ');
console.log(e)
};
DBOpenRequest.onsuccess = () => {
console.log('Database initialised.');
};
DBOpenRequest.onupgradeneeded = (e) => {
const db = e.target.result;
db.onerror = (e) => console.log('Error loading database: ' + e);
const objectStore = db.createObjectStore('keyval');
}
}

static set(key, value) {
return new Promise((resolve, reject) => {
const DBOpenRequest = window.indexedDB.open('snapdrop_store');
DBOpenRequest.onsuccess = (e) => {
const db = e.target.result;
const transaction = db.transaction('keyval', 'readwrite');
const objectStore = transaction.objectStore('keyval');
const objectStoreRequest = objectStore.put(value, key);
objectStoreRequest.onsuccess = (event) => {
console.log(`Request successful. Added key-pair: ${key} - ${value}`);
resolve();
};
}
DBOpenRequest.onerror = (e) => {
reject(e);
}
})
}

static get(key) {
return new Promise((resolve, reject) => {
const DBOpenRequest = window.indexedDB.open('snapdrop_store');
DBOpenRequest.onsuccess = (e) => {
const db = e.target.result;
const transaction = db.transaction('keyval', 'readwrite');
const objectStore = transaction.objectStore('keyval');
const objectStoreRequest = objectStore.get(key);
objectStoreRequest.onsuccess = (event) => {
console.log(`Request successful. Retrieved key-pair: ${key} - ${objectStoreRequest.result}`);
resolve(objectStoreRequest.result);
};
}
DBOpenRequest.onerror = (e) => {
reject(e);
}
});
}

static delete(key) {
return new Promise((resolve, reject) => {
const DBOpenRequest = window.indexedDB.open('snapdrop_store');
DBOpenRequest.onsuccess = (e) => {
const db = e.target.result;
const transaction = db.transaction('keyval', 'readwrite');
const objectStore = transaction.objectStore('keyval');
const objectStoreRequest = objectStore.delete(key);
objectStoreRequest.onsuccess = (event) => {
console.log(`Request successful. Deleted key: ${key}`);
resolve();
};
}
DBOpenRequest.onerror = (e) => {
reject(e);
}
})
}
}

class Snapdrop {
constructor() {
Expand All @@ -655,6 +749,7 @@ class Snapdrop {
}
}

const persistentStorage = new PersistentStorage();
const snapdrop = new Snapdrop();

if ('serviceWorker' in navigator) {
Expand Down