PWA service workers (#1319)
* PWA services worker - [x] Register service worker of PWA to install WorkAdventure application on desktop and mobile - [x] Create webpage specifique for PWA - [ ] Add register service to save and redirect on a card - [ ] Add possibilities to install PWA for one World (with register token if existing) * Finish PWA strategy to load last map visited * Fix feedback @Kharhamel * Fix feedback @Kharhamel
This commit is contained in:
parent
4b4356e7ff
commit
2a1af2a131
8 changed files with 156 additions and 58 deletions
|
@ -6,6 +6,7 @@ import { GameConnexionTypes, urlManager } from "../Url/UrlManager";
|
|||
import { localUserStore } from "./LocalUserStore";
|
||||
import { CharacterTexture, LocalUser } from "./LocalUser";
|
||||
import { Room } from "./Room";
|
||||
import { _ServiceWorker } from "../Network/ServiceWorker";
|
||||
|
||||
class ConnectionManager {
|
||||
private localUser!: LocalUser;
|
||||
|
@ -14,6 +15,8 @@ class ConnectionManager {
|
|||
private reconnectingTimeout: NodeJS.Timeout | null = null;
|
||||
private _unloading: boolean = false;
|
||||
|
||||
private serviceWorker?: _ServiceWorker;
|
||||
|
||||
get unloading() {
|
||||
return this._unloading;
|
||||
}
|
||||
|
@ -30,6 +33,8 @@ class ConnectionManager {
|
|||
public async initGameConnexion(): Promise<Room> {
|
||||
const connexionType = urlManager.getGameConnexionType();
|
||||
this.connexionType = connexionType;
|
||||
|
||||
let room: Room | null = null;
|
||||
if (connexionType === GameConnexionTypes.register) {
|
||||
const organizationMemberToken = urlManager.getOrganizationToken();
|
||||
const data = await Axios.post(`${PUSHER_URL}/register`, { organizationMemberToken }).then(
|
||||
|
@ -40,7 +45,7 @@ class ConnectionManager {
|
|||
|
||||
const roomUrl = data.roomUrl;
|
||||
|
||||
const room = await Room.createRoom(
|
||||
room = await Room.createRoom(
|
||||
new URL(
|
||||
window.location.protocol +
|
||||
"//" +
|
||||
|
@ -51,7 +56,6 @@ class ConnectionManager {
|
|||
)
|
||||
);
|
||||
urlManager.pushRoomIdToUrl(room);
|
||||
return Promise.resolve(room);
|
||||
} else if (
|
||||
connexionType === GameConnexionTypes.organization ||
|
||||
connexionType === GameConnexionTypes.anonymous ||
|
||||
|
@ -90,7 +94,7 @@ class ConnectionManager {
|
|||
}
|
||||
|
||||
//get detail map for anonymous login and set texture in local storage
|
||||
const room = await Room.createRoom(new URL(roomPath));
|
||||
room = await Room.createRoom(new URL(roomPath));
|
||||
if (room.textures != undefined && room.textures.length > 0) {
|
||||
//check if texture was changed
|
||||
if (localUser.textures.length === 0) {
|
||||
|
@ -107,10 +111,13 @@ class ConnectionManager {
|
|||
this.localUser = localUser;
|
||||
localUserStore.saveUser(localUser);
|
||||
}
|
||||
return Promise.resolve(room);
|
||||
}
|
||||
if (room == undefined) {
|
||||
return Promise.reject(new Error("Invalid URL"));
|
||||
}
|
||||
|
||||
return Promise.reject(new Error("Invalid URL"));
|
||||
this.serviceWorker = new _ServiceWorker();
|
||||
return Promise.resolve(room);
|
||||
}
|
||||
|
||||
private async verifyToken(token: string): Promise<void> {
|
||||
|
@ -148,6 +155,7 @@ class ConnectionManager {
|
|||
viewport,
|
||||
companion
|
||||
);
|
||||
|
||||
connection.onConnectError((error: object) => {
|
||||
console.log("An error occurred while connecting to socket server. Retrying");
|
||||
reject(error);
|
||||
|
@ -166,6 +174,9 @@ class ConnectionManager {
|
|||
});
|
||||
|
||||
connection.onConnect((connect: OnConnectInterface) => {
|
||||
//save last room url connected
|
||||
localUserStore.setLastRoomUrl(roomUrl);
|
||||
|
||||
resolve(connect);
|
||||
});
|
||||
}).catch((err) => {
|
||||
|
|
|
@ -1,60 +1,61 @@
|
|||
import {areCharacterLayersValid, isUserNameValid, LocalUser} from "./LocalUser";
|
||||
import { areCharacterLayersValid, isUserNameValid, LocalUser } from "./LocalUser";
|
||||
|
||||
const playerNameKey = 'playerName';
|
||||
const selectedPlayerKey = 'selectedPlayer';
|
||||
const customCursorPositionKey = 'customCursorPosition';
|
||||
const characterLayersKey = 'characterLayers';
|
||||
const companionKey = 'companion';
|
||||
const gameQualityKey = 'gameQuality';
|
||||
const videoQualityKey = 'videoQuality';
|
||||
const audioPlayerVolumeKey = 'audioVolume';
|
||||
const audioPlayerMuteKey = 'audioMute';
|
||||
const helpCameraSettingsShown = 'helpCameraSettingsShown';
|
||||
const fullscreenKey = 'fullscreen';
|
||||
const playerNameKey = "playerName";
|
||||
const selectedPlayerKey = "selectedPlayer";
|
||||
const customCursorPositionKey = "customCursorPosition";
|
||||
const characterLayersKey = "characterLayers";
|
||||
const companionKey = "companion";
|
||||
const gameQualityKey = "gameQuality";
|
||||
const videoQualityKey = "videoQuality";
|
||||
const audioPlayerVolumeKey = "audioVolume";
|
||||
const audioPlayerMuteKey = "audioMute";
|
||||
const helpCameraSettingsShown = "helpCameraSettingsShown";
|
||||
const fullscreenKey = "fullscreen";
|
||||
const lastRoomUrl = "lastRoomUrl";
|
||||
|
||||
class LocalUserStore {
|
||||
saveUser(localUser: LocalUser) {
|
||||
localStorage.setItem('localUser', JSON.stringify(localUser));
|
||||
localStorage.setItem("localUser", JSON.stringify(localUser));
|
||||
}
|
||||
getLocalUser(): LocalUser|null {
|
||||
const data = localStorage.getItem('localUser');
|
||||
getLocalUser(): LocalUser | null {
|
||||
const data = localStorage.getItem("localUser");
|
||||
return data ? JSON.parse(data) : null;
|
||||
}
|
||||
|
||||
setName(name:string): void {
|
||||
setName(name: string): void {
|
||||
localStorage.setItem(playerNameKey, name);
|
||||
}
|
||||
getName(): string|null {
|
||||
const value = localStorage.getItem(playerNameKey) || '';
|
||||
getName(): string | null {
|
||||
const value = localStorage.getItem(playerNameKey) || "";
|
||||
return isUserNameValid(value) ? value : null;
|
||||
}
|
||||
|
||||
setPlayerCharacterIndex(playerCharacterIndex: number): void {
|
||||
localStorage.setItem(selectedPlayerKey, ''+playerCharacterIndex);
|
||||
localStorage.setItem(selectedPlayerKey, "" + playerCharacterIndex);
|
||||
}
|
||||
getPlayerCharacterIndex(): number {
|
||||
return parseInt(localStorage.getItem(selectedPlayerKey) || '');
|
||||
return parseInt(localStorage.getItem(selectedPlayerKey) || "");
|
||||
}
|
||||
|
||||
setCustomCursorPosition(activeRow:number, selectedLayers: number[]): void {
|
||||
localStorage.setItem(customCursorPositionKey, JSON.stringify({activeRow, selectedLayers}));
|
||||
setCustomCursorPosition(activeRow: number, selectedLayers: number[]): void {
|
||||
localStorage.setItem(customCursorPositionKey, JSON.stringify({ activeRow, selectedLayers }));
|
||||
}
|
||||
getCustomCursorPosition(): {activeRow:number, selectedLayers:number[]}|null {
|
||||
getCustomCursorPosition(): { activeRow: number; selectedLayers: number[] } | null {
|
||||
return JSON.parse(localStorage.getItem(customCursorPositionKey) || "null");
|
||||
}
|
||||
|
||||
setCharacterLayers(layers: string[]): void {
|
||||
localStorage.setItem(characterLayersKey, JSON.stringify(layers));
|
||||
}
|
||||
getCharacterLayers(): string[]|null {
|
||||
getCharacterLayers(): string[] | null {
|
||||
const value = JSON.parse(localStorage.getItem(characterLayersKey) || "null");
|
||||
return areCharacterLayersValid(value) ? value : null;
|
||||
}
|
||||
|
||||
setCompanion(companion: string|null): void {
|
||||
setCompanion(companion: string | null): void {
|
||||
return localStorage.setItem(companionKey, JSON.stringify(companion));
|
||||
}
|
||||
getCompanion(): string|null {
|
||||
getCompanion(): string | null {
|
||||
const companion = JSON.parse(localStorage.getItem(companionKey) || "null");
|
||||
|
||||
if (typeof companion !== "string" || companion === "") {
|
||||
|
@ -68,45 +69,52 @@ class LocalUserStore {
|
|||
}
|
||||
|
||||
setGameQualityValue(value: number): void {
|
||||
localStorage.setItem(gameQualityKey, '' + value);
|
||||
localStorage.setItem(gameQualityKey, "" + value);
|
||||
}
|
||||
getGameQualityValue(): number {
|
||||
return parseInt(localStorage.getItem(gameQualityKey) || '60');
|
||||
return parseInt(localStorage.getItem(gameQualityKey) || "60");
|
||||
}
|
||||
|
||||
setVideoQualityValue(value: number): void {
|
||||
localStorage.setItem(videoQualityKey, '' + value);
|
||||
localStorage.setItem(videoQualityKey, "" + value);
|
||||
}
|
||||
getVideoQualityValue(): number {
|
||||
return parseInt(localStorage.getItem(videoQualityKey) || '20');
|
||||
return parseInt(localStorage.getItem(videoQualityKey) || "20");
|
||||
}
|
||||
|
||||
setAudioPlayerVolume(value: number): void {
|
||||
localStorage.setItem(audioPlayerVolumeKey, '' + value);
|
||||
localStorage.setItem(audioPlayerVolumeKey, "" + value);
|
||||
}
|
||||
getAudioPlayerVolume(): number {
|
||||
return parseFloat(localStorage.getItem(audioPlayerVolumeKey) || '1');
|
||||
return parseFloat(localStorage.getItem(audioPlayerVolumeKey) || "1");
|
||||
}
|
||||
|
||||
setAudioPlayerMuted(value: boolean): void {
|
||||
localStorage.setItem(audioPlayerMuteKey, value.toString());
|
||||
}
|
||||
getAudioPlayerMuted(): boolean {
|
||||
return localStorage.getItem(audioPlayerMuteKey) === 'true';
|
||||
return localStorage.getItem(audioPlayerMuteKey) === "true";
|
||||
}
|
||||
|
||||
setHelpCameraSettingsShown(): void {
|
||||
localStorage.setItem(helpCameraSettingsShown, '1');
|
||||
localStorage.setItem(helpCameraSettingsShown, "1");
|
||||
}
|
||||
getHelpCameraSettingsShown(): boolean {
|
||||
return localStorage.getItem(helpCameraSettingsShown) === '1';
|
||||
return localStorage.getItem(helpCameraSettingsShown) === "1";
|
||||
}
|
||||
|
||||
setFullscreen(value: boolean): void {
|
||||
localStorage.setItem(fullscreenKey, value.toString());
|
||||
}
|
||||
getFullscreen(): boolean {
|
||||
return localStorage.getItem(fullscreenKey) === 'true';
|
||||
return localStorage.getItem(fullscreenKey) === "true";
|
||||
}
|
||||
|
||||
setLastRoomUrl(roomUrl: string): void {
|
||||
localStorage.setItem(lastRoomUrl, roomUrl.toString());
|
||||
}
|
||||
getLastRoomUrl(): string {
|
||||
return localStorage.getItem(lastRoomUrl) ?? "";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
20
front/src/Network/ServiceWorker.ts
Normal file
20
front/src/Network/ServiceWorker.ts
Normal file
|
@ -0,0 +1,20 @@
|
|||
export class _ServiceWorker {
|
||||
constructor() {
|
||||
if ("serviceWorker" in navigator) {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
|
||||
init() {
|
||||
window.addEventListener("load", () => {
|
||||
navigator.serviceWorker
|
||||
.register("/resources/service-worker.js")
|
||||
.then((serviceWorker) => {
|
||||
console.info("Service Worker registered: ", serviceWorker);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error registering the Service Worker: ", error);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
|
@ -162,16 +162,3 @@ const app = new App({
|
|||
});
|
||||
|
||||
export default app;
|
||||
|
||||
if ("serviceWorker" in navigator) {
|
||||
window.addEventListener("load", function () {
|
||||
navigator.serviceWorker
|
||||
.register("/resources/service-worker.js")
|
||||
.then((serviceWorker) => {
|
||||
console.log("Service Worker registered: ", serviceWorker);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error registering the Service Worker: ", error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue