react-workbox
Version:
Manage installation and activation of service worker
78 lines (77 loc) • 3.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = (0, tslib_1.__importStar)(require("react"));
const workbox_window_1 = require("workbox-window");
const WorkboxContext_1 = (0, tslib_1.__importDefault)(require("./WorkboxContext"));
const logger_1 = (0, tslib_1.__importDefault)(require("./logger"));
const WorkboxProvider = ({ children, serviceWorkerUrl = `/service-worker.js`, interval = 60 * 60 * 1000, // 1 hour
}) => {
const [isUpdateWaiting, setUpdateWaiting] = (0, react_1.useState)(false);
const [workbox, setWorkbox] = (0, react_1.useState)();
const [registration, setRegistration] = (0, react_1.useState)();
(0, react_1.useEffect)(() => {
logger_1.default.log('USE-EFFECT');
if (process.env.NODE_ENV !== 'production' || !('serviceWorker' in navigator)) {
return;
}
const timer = Boolean(interval) && setInterval(() => wb.update(), interval);
const wb = new workbox_window_1.Workbox(serviceWorkerUrl);
setWorkbox(wb);
const showSkipWaitingPrompt = (event) => {
logger_1.default.log('showSkipWaitingPrompt', event.wasWaitingBeforeRegister, event);
setUpdateWaiting(true);
// `event.wasWaitingBeforeRegister` will be false if this is
};
// Add an event listener to detect when the registered
// service worker has installed but is waiting to activate.
wb.addEventListener('waiting', (e) => {
logger_1.default.log('WAITING', e);
showSkipWaitingPrompt(e);
});
wb.register().then((r) => setRegistration(r));
return () => {
if (timer)
clearInterval(timer);
};
}, []);
return (react_1.default.createElement(WorkboxContext_1.default.Provider, { value: {
isUpdateWaiting,
activateUpdate: () => {
if (!workbox || !registration) {
return;
}
logger_1.default.log('ACTIVATE UPDATE', registration, workbox);
workbox.addEventListener('controlling', (e) => {
// would be called when wasWaitingBeforeRegister = true
// would be called when isExternal = false
logger_1.default.log('CONTROLLING', e, e.isExternal);
if (!e.isExternal) {
// <---- may need to be removed
// To avoid calling reload twice, needs to check isExternal
window.location.reload();
}
});
workbox.addEventListener('activated', (e) => {
// would be called when isExternal = true
// would be called when isExternal = false
logger_1.default.log('ACTIVATED', e, e.isExternal);
if (e.isExternal) {
// REF: https://developers.google.com/web/tools/workbox/modules/workbox-window#when_an_unexpected_version_of_the_service_worker_is_found
// When it is external worker, it would not trigger "controlling" event
// To avoid calling reload twice, needs to check if it is external
window.location.reload();
}
});
if (registration.waiting) {
logger_1.default.log('workbox MESSAGESKIPWAITING');
workbox.messageSkipWaiting();
setUpdateWaiting(false);
}
else {
window.location.reload();
}
},
} }, children));
};
exports.default = WorkboxProvider;