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
|
import React from 'react';
import { WorkboxLifecycleEvent } from 'workbox-window/utils/WorkboxEvent';
import { Button } from 'reactstrap';
import { useTranslation } from 'react-i18next';
import { pushAlert } from './common/alert-service';
if ('serviceWorker' in navigator) {
void import('workbox-window').then(({ Workbox, messageSW }) => {
const wb = new Workbox('/sw.js');
let registration: ServiceWorkerRegistration | undefined;
const showFirstPrompt = (event: WorkboxLifecycleEvent): void => {
if (!event.isUpdate) {
pushAlert({
message: {
type: 'i18n',
key: 'serviceWorker.availableOffline',
},
type: 'success',
});
}
};
wb.addEventListener('activated', showFirstPrompt);
wb.addEventListener('externalactivated', showFirstPrompt);
const showSkipWaitingPrompt = (): void => {
const upgrade = (): void => {
// Assuming the user accepted the update, set up a listener
// that will reload the page as soon as the previously waiting
// service worker has taken control.
wb.addEventListener('controlling', () => {
window.location.reload();
});
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.upgradeTitle')}
<Button color="success" size="sm" onClick={upgrade} outline>
{t('serviceWorker.upgradeNow')}
</Button>
</>
);
};
pushAlert({
message: UpgradeMessage,
dismissTime: 'never',
type: 'success',
});
};
// Add an event listener to detect when the registered
// service worker has installed but is waiting to activate.
wb.addEventListener('waiting', showSkipWaitingPrompt);
wb.addEventListener('externalwaiting', showSkipWaitingPrompt);
void wb.register().then((reg) => {
registration = reg;
});
});
}
|
