diff options
author | Kristóf Marussy <kristof@marussy.com> | 2022-08-19 19:54:55 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2022-08-20 21:41:50 +0200 |
commit | 292546893af22f0e7652132630f1e0710765c153 (patch) | |
tree | 1b0c12e23b3211b34abdd13c4a8ca8da4d49ad8a /subprojects/frontend/src/RegisterServiceWorker.tsx | |
parent | refactor(frontend): update theme (diff) | |
download | refinery-292546893af22f0e7652132630f1e0710765c153.tar.gz refinery-292546893af22f0e7652132630f1e0710765c153.tar.zst refinery-292546893af22f0e7652132630f1e0710765c153.zip |
feat(frontend): add PWA manifest
Diffstat (limited to 'subprojects/frontend/src/RegisterServiceWorker.tsx')
-rw-r--r-- | subprojects/frontend/src/RegisterServiceWorker.tsx | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/subprojects/frontend/src/RegisterServiceWorker.tsx b/subprojects/frontend/src/RegisterServiceWorker.tsx new file mode 100644 index 00000000..c9b2e353 --- /dev/null +++ b/subprojects/frontend/src/RegisterServiceWorker.tsx | |||
@@ -0,0 +1,85 @@ | |||
1 | import Button from '@mui/material/Button'; | ||
2 | import { | ||
3 | type OptionsObject as SnackbarOptionsObject, | ||
4 | useSnackbar, | ||
5 | } from 'notistack'; | ||
6 | import React, { useEffect } from 'react'; | ||
7 | // eslint-disable-next-line import/no-unresolved -- Importing virtual module. | ||
8 | import { registerSW } from 'virtual:pwa-register'; | ||
9 | |||
10 | import { ContrastThemeProvider } from './theme/ThemeProvider'; | ||
11 | import getLogger from './utils/getLogger'; | ||
12 | |||
13 | const log = getLogger('RegisterServiceWorker'); | ||
14 | |||
15 | function UpdateSnackbarActions({ | ||
16 | closeCurrentSnackbar, | ||
17 | enqueueSnackbar, | ||
18 | updateSW, | ||
19 | }: { | ||
20 | closeCurrentSnackbar: () => void; | ||
21 | enqueueSnackbar: ( | ||
22 | message: string, | ||
23 | options?: SnackbarOptionsObject | undefined, | ||
24 | ) => void; | ||
25 | updateSW: (reloadPage: boolean) => Promise<void>; | ||
26 | }): JSX.Element { | ||
27 | return ( | ||
28 | <ContrastThemeProvider> | ||
29 | <Button | ||
30 | color="primary" | ||
31 | onClick={() => { | ||
32 | closeCurrentSnackbar(); | ||
33 | updateSW(true).catch((error) => { | ||
34 | log.error('Failed to update service worker', error); | ||
35 | enqueueSnackbar('Failed to download update', { | ||
36 | variant: 'error', | ||
37 | }); | ||
38 | }); | ||
39 | }} | ||
40 | > | ||
41 | Reload | ||
42 | </Button> | ||
43 | <Button color="inherit" onClick={closeCurrentSnackbar}> | ||
44 | Dismiss | ||
45 | </Button> | ||
46 | </ContrastThemeProvider> | ||
47 | ); | ||
48 | } | ||
49 | |||
50 | export default function RegisterServiceWorker(): null { | ||
51 | const { enqueueSnackbar, closeSnackbar } = useSnackbar(); | ||
52 | useEffect(() => { | ||
53 | if (import.meta.env.DEV) { | ||
54 | return; | ||
55 | } | ||
56 | if (!('serviceWorker' in navigator)) { | ||
57 | log.debug('No service worker support found'); | ||
58 | return; | ||
59 | } | ||
60 | const updateSW = registerSW({ | ||
61 | onNeedRefresh() { | ||
62 | const key = enqueueSnackbar('An update for Refinery is available', { | ||
63 | persist: true, | ||
64 | action: ( | ||
65 | <UpdateSnackbarActions | ||
66 | closeCurrentSnackbar={() => closeSnackbar(key)} | ||
67 | enqueueSnackbar={enqueueSnackbar} | ||
68 | updateSW={updateSW} | ||
69 | /> | ||
70 | ), | ||
71 | }); | ||
72 | }, | ||
73 | onOfflineReady() { | ||
74 | log.debug('Service worker is ready for offline use'); | ||
75 | }, | ||
76 | onRegistered() { | ||
77 | log.debug('Registered service worker'); | ||
78 | }, | ||
79 | onRegisterError(error) { | ||
80 | log.error('Failed to register service worker', error); | ||
81 | }, | ||
82 | }); | ||
83 | }, [enqueueSnackbar, closeSnackbar]); | ||
84 | return null; | ||
85 | } | ||