mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 17:40:23 +03:00
Added logic to allow refreshing the PWA without closing the tabs
This commit is contained in:
parent
08694d7693
commit
69905c4b38
3 changed files with 43 additions and 8 deletions
|
@ -5,6 +5,7 @@ import { ServersMap } from './servers/data';
|
|||
import { Settings } from './settings/reducers/settings';
|
||||
import { changeThemeInMarkup } from './utils/theme';
|
||||
import { AppUpdateBanner } from './common/AppUpdateBanner';
|
||||
import { forceUpdate } from './utils/helpers/sw';
|
||||
import './App.scss';
|
||||
|
||||
interface AppProps {
|
||||
|
@ -54,7 +55,7 @@ const App = (
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppUpdateBanner isOpen={appUpdated} toggle={resetAppUpdate} />
|
||||
<AppUpdateBanner isOpen={appUpdated} toggle={resetAppUpdate} forceUpdate={forceUpdate} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -1,16 +1,34 @@
|
|||
import { FC, MouseEventHandler } from 'react';
|
||||
import { Alert } from 'reactstrap';
|
||||
import { Alert, Button } from 'reactstrap';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faSyncAlt as reloadIcon } from '@fortawesome/free-solid-svg-icons';
|
||||
import { SimpleCard } from '../utils/SimpleCard';
|
||||
import { useToggle } from '../utils/helpers/hooks';
|
||||
import './AppUpdateBanner.scss';
|
||||
|
||||
interface AppUpdateBannerProps {
|
||||
isOpen: boolean;
|
||||
toggle: MouseEventHandler<any>;
|
||||
forceUpdate: Function;
|
||||
}
|
||||
|
||||
export const AppUpdateBanner: FC<AppUpdateBannerProps> = (props) => (
|
||||
<Alert className="app-update-banner" {...props} tag={SimpleCard} color="secondary">
|
||||
export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, toggle, forceUpdate }) => {
|
||||
const [ isUpdating,, setUpdating ] = useToggle();
|
||||
const update = () => {
|
||||
setUpdating();
|
||||
forceUpdate();
|
||||
};
|
||||
|
||||
return (
|
||||
<Alert className="app-update-banner" isOpen={isOpen} toggle={toggle} tag={SimpleCard} color="secondary">
|
||||
<h4 className="mb-4">This app has just been updated!</h4>
|
||||
<p className="mb-0">Restart it to enjoy the new features.</p>
|
||||
<p className="mb-0">
|
||||
Restart it to enjoy the new features.
|
||||
<Button disabled={isUpdating} className="ml-2" color="secondary" size="sm" onClick={update}>
|
||||
{!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ml-1" /></>}
|
||||
{isUpdating && <>Restarting...</>}
|
||||
</Button>
|
||||
</p>
|
||||
</Alert>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
|
16
src/utils/helpers/sw.ts
Normal file
16
src/utils/helpers/sw.ts
Normal file
|
@ -0,0 +1,16 @@
|
|||
export const forceUpdate = async () => {
|
||||
const registrations = await navigator.serviceWorker?.getRegistrations() ?? [];
|
||||
|
||||
for (const registration of registrations) {
|
||||
const { waiting } = registration;
|
||||
|
||||
waiting?.addEventListener('statechange', (event) => {
|
||||
if ((event.target as any)?.state === 'activated') {
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
|
||||
// The logic that makes skipWaiting to be called when this message is posted is in service-worker.ts
|
||||
waiting?.postMessage({ type: 'SKIP_WAITING' });
|
||||
}
|
||||
};
|
Loading…
Reference in a new issue