1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
import React from "react";
import { useTranslation } from "react-i18next";
import { Button } from "react-bootstrap";
import { pushAlert } from "./services/alert";
if ("serviceWorker" in navigator) {
let isThisTriggerUpgrade = false;
const upgradeSuccessLocalStorageKey = "TIMELINE_UPGRADE_SUCCESS";
if (window.localStorage.getItem(upgradeSuccessLocalStorageKey)) {
pushAlert({
message: {
type: "i18n",
key: "serviceWorker.upgradeSuccess",
},
type: "success",
});
window.localStorage.removeItem(upgradeSuccessLocalStorageKey);
}
void import("workbox-window").then(({ Workbox, messageSW }) => {
const wb = new Workbox("/sw.js");
let registration: ServiceWorkerRegistration | undefined;
// externalactivated is not usable but I still use its name.
wb.addEventListener("controlling", () => {
const upgradeReload = (): void => {
window.localStorage.setItem(upgradeSuccessLocalStorageKey, "true");
window.location.reload();
};
if (isThisTriggerUpgrade) {
upgradeReload();
} else {
const Message: React.FC = () => {
const { t } = useTranslation();
return (
<>
{t("serviceWorker.externalActivatedPrompt")}
<Button
variant="outline-success"
size="sm"
onClick={upgradeReload}
>
{t("serviceWorker.reloadNow")}
</Button>
</>
);
};
pushAlert({
message: Message,
dismissTime: "never",
type: "warning",
});
}
});
wb.addEventListener("activated", (event) => {
if (!event.isUpdate) {
pushAlert({
message: {
type: "i18n",
key: "serviceWorker.availableOffline",
},
type: "success",
});
}
});
// Add an event listener to detect when the registered
// service worker has installed but is waiting to activate.
wb.addEventListener("waiting", (): void => {
const upgrade = (): void => {
isThisTriggerUpgrade = true;
if (registration && registration.waiting) {
// Send a message to the waiting service worker,
// instructing it to activate.
// Note: for this to work, you have to add a message
// listener in your service worker. See below.
void messageSW(registration.waiting, { type: "SKIP_WAITING" });
}
};
const UpgradeMessage: React.FC = () => {
const { t } = useTranslation();
return (
<>
{t("serviceWorker.upgradePrompt")}
<Button variant="outline-success" size="sm" onClick={upgrade}>
{t("serviceWorker.upgradeNow")}
</Button>
</>
);
};
pushAlert({
message: UpgradeMessage,
dismissTime: "never",
type: "success",
});
});
void wb.register().then((reg) => {
registration = reg;
});
});
}
|
