2021-07-22 11:24:09 +00:00
import React from "react" ;
import ReactDOM from "react-dom" ;
2021-04-07 12:27:51 +00:00
import { Workbox } from "workbox-window" ;
2021-07-21 04:23:56 +00:00
import SnackBar from "@appserver/components/snackbar" ;
2021-07-22 11:24:09 +00:00
import i18n from "i18next" ;
import { useTranslation , initReactI18next } from "react-i18next" ;
import Backend from "i18next-http-backend" ;
import { LANGUAGE } from "../constants" ;
import { loadLanguagePath } from "./" ;
i18n
. use ( Backend )
. use ( initReactI18next )
. init ( {
lng : localStorage . getItem ( LANGUAGE ) || "en" ,
fallbackLng : "en" ,
load : "all" ,
//debug: true,
interpolation : {
escapeValue : false , // not needed for react as it escapes by default
format : function ( value , format ) {
if ( format === "lowercase" ) return value . toLowerCase ( ) ;
return value ;
} ,
} ,
backend : {
loadPath : loadLanguagePath ( "" ) ,
} ,
react : {
useSuspense : false ,
} ,
} ) ;
const SnackBarWrapper = ( props ) => {
const { t , ready } = useTranslation ( "Common" , { i18n } ) ;
if ( ready ) {
const barConfig = {
parentElementId : "snackbar" ,
text : t ( "NewVersionAvailable" ) ,
2021-07-22 12:09:42 +00:00
btnText : t ( "Load" ) ,
2021-07-22 11:24:09 +00:00
onAction : ( ) => props . onButtonClick ( ) ,
opacity : 1 ,
} ;
return < SnackBar { ... barConfig } / > ;
}
return < > < / > ;
} ;
2021-04-07 12:27:51 +00:00
2021-07-22 11:24:09 +00:00
const registerSW = ( ) => {
2021-04-07 12:27:51 +00:00
if ( process . env . NODE _ENV === "production" && "serviceWorker" in navigator ) {
2021-07-20 09:32:27 +00:00
const wb = new Workbox ( ` /sw.js ` ) ;
2021-04-07 12:27:51 +00:00
//TODO: watch https://developers.google.com/web/tools/workbox/guides/advanced-recipes and https://github.com/webmaxru/prog-web-news/blob/5ff94b45c9d317409c21c0fbb7d76e92f064471b/src/app/app-shell/app-shell.component.ts
const showSkipWaitingPrompt = ( event ) => {
console . log (
` A new service worker has installed, but it can't activate ` +
` until all tabs running the current version have fully unloaded. `
) ;
2021-08-11 19:04:22 +00:00
function refresh ( ) {
wb . addEventListener ( "controlling" , ( ) => {
localStorage . removeItem ( "sw_need_activation" ) ;
window . location . reload ( ) ;
} ) ;
// This will postMessage() to the waiting service worker.
wb . messageSkipWaiting ( ) ;
}
2021-07-22 11:24:09 +00:00
try {
2021-08-11 19:04:22 +00:00
if ( localStorage . getItem ( "sw_need_activation" ) ) {
refresh ( ) ;
return ;
}
2021-07-22 11:24:09 +00:00
const snackbarNode = document . createElement ( "div" ) ;
snackbarNode . id = "snackbar" ;
document . body . appendChild ( snackbarNode ) ;
ReactDOM . render (
< SnackBarWrapper
onButtonClick = { ( ) => {
snackbarNode . remove ( ) ;
2021-08-11 19:04:22 +00:00
refresh ( ) ;
2021-07-22 11:24:09 +00:00
} }
/ > ,
document . getElementById ( "snackbar" )
) ;
2021-08-11 19:04:22 +00:00
localStorage . setItem ( "sw_need_activation" , true ) ;
2021-07-22 11:24:09 +00:00
} catch ( e ) {
console . error ( "showSkipWaitingPrompt" , e ) ;
2021-08-11 19:04:22 +00:00
refresh ( ) ;
2021-07-22 11:24:09 +00:00
}
2021-04-07 12:27:51 +00:00
} ;
// Add an event listener to detect when the registered
// service worker has installed but is waiting to activate.
wb . addEventListener ( "waiting" , showSkipWaitingPrompt ) ;
wb . register ( )
. then ( ( reg ) => {
console . log ( "Successful service worker registration" , reg ) ;
} )
. catch ( ( err ) => console . error ( "Service worker registration failed" , err ) ) ;
} else {
console . log ( "SKIP registerSW because of DEV mode" ) ;
}
2021-07-22 11:24:09 +00:00
} ;
window . SW = {
registerSW : registerSW ,
} ;
export { registerSW } ;