Replace CRA SW with Vite SW and resolve PWA installation.
This commit is contained in:
Patrick Fic
@@ -1,60 +0,0 @@
|
||||
import {withApollo} from "@apollo/client/react/hoc";
|
||||
import React, {Component} from "react";
|
||||
import {connect} from "react-redux";
|
||||
import {createStructuredSelector} from "reselect";
|
||||
//import { logImEXEvent, messaging } from "../../firebase/firebase.utils";
|
||||
import {selectCurrentUser} from "../../redux/user/user.selectors";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
currentUser: selectCurrentUser,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
});
|
||||
|
||||
class FcmNotificationComponent extends Component {
|
||||
async componentDidMount() {
|
||||
//const { client, currentUser } = this.props;
|
||||
// if (!!!messaging) return; //Skip all of the notification functionality if the firebase SDK could not start.
|
||||
// messaging
|
||||
// .requestPermission()
|
||||
// .then(async function () {
|
||||
// // const token = await messaging.getToken();
|
||||
// // client.mutate({
|
||||
// // mutation: UPDATE_FCM_TOKEN,
|
||||
// // variables: { authEmail: currentUser.email, token: { [token]: true } },
|
||||
// // });
|
||||
// })
|
||||
// .catch(function (err) {
|
||||
// console.log("Unable to get permission to notify.", err);
|
||||
// logImEXEvent("fcm_permission_denied", { message: err });
|
||||
// });
|
||||
}
|
||||
|
||||
render() {
|
||||
return <span/>;
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(withApollo(FcmNotificationComponent));
|
||||
|
||||
//Firebase Service Worker Register
|
||||
// if ("serviceWorker" in navigator) {
|
||||
// navigator.serviceWorker
|
||||
// .register("/firebase-messaging-sw.js")
|
||||
// .then(function (registration) {
|
||||
// console.log(
|
||||
// "[FCM] Registration successful, scope is:",
|
||||
// registration.scope
|
||||
// );
|
||||
// navigator.serviceWorker.addEventListener("message", (event) => {
|
||||
// console.log("Handler for Navigator Service Worker.", event);
|
||||
// });
|
||||
// })
|
||||
// .catch(function (err) {
|
||||
// console.log("[FCM] Service worker registration failed, error:", err);
|
||||
// });
|
||||
// }
|
||||
@@ -1,79 +1,99 @@
|
||||
import {Alert, Button, Col, Row, Space} from "antd";
|
||||
import i18n from "i18next";
|
||||
import React from "react";
|
||||
import {connect} from "react-redux";
|
||||
import {createStructuredSelector} from "reselect";
|
||||
import {selectUpdateAvailable} from "../../redux/application/application.selectors";
|
||||
import {AlertOutlined} from "@ant-design/icons";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {setUpdateAvailable} from "../../redux/application/application.actions";
|
||||
import {store} from "../../redux/store";
|
||||
import * as serviceWorkerRegistration from "../../serviceWorkerRegistration";
|
||||
import { Alert, Button, Col, Row, Space } from 'antd';
|
||||
import i18n from 'i18next';
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createStructuredSelector } from 'reselect';
|
||||
import { selectUpdateAvailable } from '../../redux/application/application.selectors';
|
||||
import { AlertOutlined } from '@ant-design/icons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { setUpdateAvailable } from '../../redux/application/application.actions';
|
||||
import { store } from '../../redux/store';
|
||||
//import * as serviceWorkerRegistration from '../../serviceWorkerRegistration';
|
||||
import InstanceRenderManager from '../../utils/instanceRenderMgr';
|
||||
import { useRegisterSW } from 'virtual:pwa-register/react';
|
||||
|
||||
let globalRegistration;
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
updateAvailable: selectUpdateAvailable,
|
||||
updateAvailable: selectUpdateAvailable,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
});
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(UpdateAlert);
|
||||
const intervalMS = 10 * 60 * 1000;
|
||||
export function UpdateAlert({ updateAvailable }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
export function UpdateAlert({updateAvailable}) {
|
||||
const {t} = useTranslation();
|
||||
if (!updateAvailable) return null;
|
||||
return (
|
||||
<Alert
|
||||
message={t("general.messages.newversiontitle",{app: InstanceRenderManager({imex:'$t(titles.imexonline)', rome: '$t(titles.romeonline)', promanager: '$t(titles.promanager)'})})}
|
||||
showIcon
|
||||
icon={<AlertOutlined/>}
|
||||
description={
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col sm={24} md={16} lg={18}>
|
||||
{t("general.messages.newversionmessage",{app: InstanceRenderManager({imex:'$t(titles.imexonline)', rome: '$t(titles.romeonline)', promanager: '$t(titles.promanager)'})})}
|
||||
</Col>
|
||||
<Col sm={24} md={8} lg={6}>
|
||||
<Space wrap>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
window.open("https://imex-online.noticeable.news/", "_blank");
|
||||
}}
|
||||
>
|
||||
{i18n.t("general.actions.viewreleasenotes")}
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={async () => {
|
||||
if (globalRegistration && globalRegistration.waiting) {
|
||||
await globalRegistration.unregister();
|
||||
// Makes Workbox call skipWaiting()
|
||||
globalRegistration.waiting.postMessage({
|
||||
type: "SKIP_WAITING",
|
||||
});
|
||||
// Once the service worker is unregistered, we can reload the page to let
|
||||
// the browser download a fresh copy of our app (invalidating the cache)
|
||||
window.location.reload();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{i18n.t("general.actions.refresh")}
|
||||
</Button>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
}
|
||||
closable={false}
|
||||
type="warning"
|
||||
/>
|
||||
);
|
||||
const {
|
||||
offlineReady: [
|
||||
offlineReady, //setOfflineReady
|
||||
],
|
||||
needRefresh: [
|
||||
needRefresh, //setNeedRefresh
|
||||
],
|
||||
updateServiceWorker,
|
||||
} = useRegisterSW({
|
||||
onRegistered(r) {
|
||||
// eslint-disable-next-line prefer-template
|
||||
console.log('SW Registered: ' + r);
|
||||
r &&
|
||||
setInterval(() => {
|
||||
r.update();
|
||||
}, intervalMS);
|
||||
},
|
||||
onRegisterError(error) {
|
||||
console.log('SW registration error', error);
|
||||
},
|
||||
});
|
||||
console.log(`SW Status => Refresh? ${needRefresh} - offlineReady? ${offlineReady}`);
|
||||
|
||||
if (!needRefresh) return null;
|
||||
return (
|
||||
<Alert
|
||||
message={t('general.messages.newversiontitle', {
|
||||
app: InstanceRenderManager({
|
||||
imex: '$t(titles.imexonline)',
|
||||
rome: '$t(titles.romeonline)',
|
||||
promanager: '$t(titles.promanager)',
|
||||
}),
|
||||
})}
|
||||
showIcon
|
||||
icon={<AlertOutlined />}
|
||||
description={
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col sm={24} md={16} lg={18}>
|
||||
{t('general.messages.newversionmessage', {
|
||||
app: InstanceRenderManager({
|
||||
imex: '$t(titles.imexonline)',
|
||||
rome: '$t(titles.romeonline)',
|
||||
promanager: '$t(titles.promanager)',
|
||||
}),
|
||||
})}
|
||||
</Col>
|
||||
<Col sm={24} md={8} lg={6}>
|
||||
<Space wrap>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
window.open('https://imex-online.noticeable.news/', '_blank');
|
||||
}}
|
||||
>
|
||||
{i18n.t('general.actions.viewreleasenotes')}
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={async () => {
|
||||
updateServiceWorker(true);
|
||||
}}
|
||||
>
|
||||
{i18n.t('general.actions.refresh')}
|
||||
</Button>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
}
|
||||
closable={false}
|
||||
type="warning"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const onServiceWorkerUpdate = (registration) => {
|
||||
console.log("onServiceWorkerUpdate", registration);
|
||||
globalRegistration = registration;
|
||||
store.dispatch(setUpdateAvailable(true));
|
||||
};
|
||||
|
||||
serviceWorkerRegistration.register({onUpdate: onServiceWorkerUpdate});
|
||||
|
||||
Reference in New Issue
Block a user