fix(service-worker): service-worker add keep alive part 1 (#712)

packages/context/.gitignore

@@ -0,0 +1,2 @@
+/public/OidcServiceWorker.js
+/public/OidcKeepAliveServiceWorker.json

packages/context/README.md

@@ -50,7 +50,7 @@ The only file you should edit is "OidcTrustedDomains.js" which will never be era
 #package.json
 {
     "scripts": {
-        "copy": "copyfiles -f ./node_modules/@axa-fr/react-oidc-context/dist/OidcServiceWorker.js ./public && copyfiles -f -s ./node_modules/@axa-fr/react-oidc-context/dist/OidcTrustedDomains.js ./public",
+        "copy": "copyfiles -f ./node_modules/@axa-fr/react-oidc-context/dist/OidcServiceWorker.js ./public && copyfiles -f -s ./node_modules/@axa-fr/react-oidc-context/dist/OidcTrustedDomains.js ./public && copyfiles -f ./node_modules/@axa-fr/react-oidc-context/dist/OidcKeepAliveServiceWorker.json ./public",
         "start:server": "react-scripts start",
         "build:server": "npm run copy && react-scripts build",
         "prepare": "npm run copy"

packages/context/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/react-oidc-context",
-  "version": "4.0.3",
+  "version": "4.2.3-alpha.0",
   "private": false,
   "main": "dist/index.js",
   "jsnext:main": "dist/index.js",
@@ -22,13 +22,13 @@
     "react-component"
   ],
   "scripts": {
-    "copy": "copyfiles -f ./src/oidc/vanilla/OidcServiceWorker.js ./public && copyfiles -f -soft ./src/oidc/vanilla/OidcTrustedDomains.js ./public",
+    "copy": "copyfiles -f ./src/oidc/vanilla/OidcServiceWorker.js ./public && copyfiles -f -soft ./src/oidc/vanilla/OidcTrustedDomains.js ./public && copyfiles -f -soft ./src/oidc/vanilla/OidcKeepAliveServiceWorker.json ./public",
     "start": "npm run copy && set PORT=4200 && react-scripts start",
     "build": "npm i react react-dom && npm run copy && react-scripts build",
     "test": "react-scripts test --coverage",
     "eject": "react-scripts eject",
     "clean": "rimraf dist",
-    "prepare": "npm run clean && tsc --build \"./tsconfig.json\" && copyfiles -f ./src/oidc/vanilla/OidcServiceWorker.js ./dist && copyfiles -f ./src/oidc/vanilla/OidcTrustedDomains.js ./dist"
+    "prepare": "npm run clean && tsc --build \"./tsconfig.json\" && copyfiles -f ./src/oidc/vanilla/OidcServiceWorker.js ./dist && copyfiles -f ./src/oidc/vanilla/OidcTrustedDomains.js ./dist && copyfiles -f ./src/oidc/vanilla/OidcKeepAliveServiceWorker.json ./dist"
   },
   "peerDependencies": {
     "react": ">=16.8.6",

packages/context/src/configurations.ts

@@ -1,5 +1,5 @@
 export const configurationIdentityServer = {
-    client_id: 'interactive.public.short',
+    client_id: 'interactive.public.short', //  interactive.public
     redirect_uri: window.location.origin+'/authentication/callback', // http://localhost:4200/authentication/callback
     scope: 'openid profile email api offline_access',
     authority: 'https://demo.identityserver.io',

packages/context/src/oidc/vanilla/OidcKeepAliveServiceWorker.json

@@ -0,0 +1 @@
+{}

packages/context/src/oidc/vanilla/OidcServiceWorker.js

@@ -2,8 +2,17 @@
 
 const id = Math.round(new Date().getTime() / 1000).toString();
 
-const handleInstall = () => {
+const assetCacheName = "asset";
+const keepAliveJsonFilename = "OidcKeepAliveServiceWorker.json";
+const handleInstall = (event) => {
     console.log('[OidcServiceWorker] service worker installed ' + id);
+    event.waitUntil(
+        caches.open(assetCacheName).then(cache => {
+            return cache.addAll(
+                [
+                    keepAliveJsonFilename
+                ]);
+        }));
 };
 
 const handleActivate = () => {
@@ -103,6 +112,21 @@ const ACCESS_TOKEN = 'ACCESS_TOKEN_SECURED_BY_OIDC_SERVICE_WORKER';
 
 const handleFetch = async (event) => {
     const originalRequest = event.request;
+
+    if(originalRequest.url.includes(keepAliveJsonFilename) ){
+        event.respondWith(
+            caches.open(assetCacheName).then(function(cache) {
+                return cache.match(event.request).then(function (response) {
+                    return response || fetch(event.request).then(function(response) {
+                        cache.put(event.request, response.clone());
+                        return response;
+                    });
+                });
+            })
+        );
+        return;
+    }
+
     const currentDatabaseForRequestAccessToken = getCurrentDatabaseDomain(database, originalRequest.url);
     if(currentDatabaseForRequestAccessToken && currentDatabaseForRequestAccessToken.tokens) {
         const newRequest = new Request(originalRequest, {
@@ -122,7 +146,7 @@ const handleFetch = async (event) => {
     const numberDatabase = currentDatabases.length;
     if(numberDatabase > 0) {
         const maPromesse = new Promise((resolve, reject) => {
-            const response =originalRequest.text().then(actualBody => {
+            const response = originalRequest.text().then(actualBody => {
                 if(actualBody.includes(REFRESH_TOKEN)) {
                     let newBody = actualBody;
                     for(let i= 0;i<numberDatabase;i++){

packages/context/src/oidc/vanilla/initWorker.ts

@@ -9,7 +9,7 @@
     if(M[1]==='Chrome'){
         tem=ua.match(/\bOPR|Edge\/(\d+)/);
 
-        if(tem!=null)   {
+        if(tem!=null) {
             let version = tem[1];
             if(!version){
                 const splits = ua.split(tem[0]+"/");
@@ -29,6 +29,16 @@
     };
 }
 
+let keepAliveServiceWorkerTimeoutId = null;
+const keepAliveServiceWorker = () => {
+    if(keepAliveServiceWorkerTimeoutId == null) {
+        keepAliveServiceWorkerTimeoutId = setInterval(() => {
+            console.log('/OidcKeepAliveServiceWorker.json');
+            fetch('OidcKeepAliveServiceWorker.json')
+        }, 20000);
+    }
+}
+
 const sendMessageAsync = (registration) => (data) =>{
     return new Promise(function(resolve, reject) {
         const messageChannel = new MessageChannel();
@@ -127,17 +137,17 @@ export const initWorkerAsync = async(serviceWorkerRelativeUrl, configurationName
     const clearAsync=() =>{
         return sendMessageAsync(registration)({type: "clear", data: null, configurationName});
     }
-
-    const initAsync=async (oidcServerConfiguration, where) => {
+    const initAsync= async (oidcServerConfiguration, where) => {
+        
         const result = await sendMessageAsync(registration)({
             type: "init",
             data: {oidcServerConfiguration, where},
             configurationName
         });
         // @ts-ignore
         return { tokens : result.tokens, isUpdateDetected };
-    }    
-
+    }
+    keepAliveServiceWorker();
 
     return { saveItemsAsync, loadItemsAsync, clearAsync, initAsync, getAccessTokenPayloadAsync, updateAsync };
 }