react-workbox - npm Package Compare versions

Comparing version 1.0.0-beta-3 to 1.0.0-beta-5

build/cjs/index.js

@@ -11,2 +11,1 @@ "use strict";
 Object.defineProperty(exports, "WorkboxProvider", { enumerable: true, get: function () { return __importDefault(WorkboxProvider_1).default; } });
-//# sourceMappingURL=index.js.map

build/cjs/UpdateWaiting.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const WorkboxContext_1 = tslib_1.__importDefault(require("./WorkboxContext"));
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const WorkboxContext_1 = (0, tslib_1.__importDefault)(require("./WorkboxContext"));
 const UpdateWaiting = ({ children }) => (react_1.default.createElement(WorkboxContext_1.default.Consumer, null, ({ isUpdateWaiting, activateUpdate }) => {
@@ -13,2 +13,1 @@ if (typeof children === 'function') {
 exports.default = UpdateWaiting;
-//# sourceMappingURL=UpdateWaiting.js.map

build/cjs/WorkboxContext.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-const WorkboxContext = react_1.createContext({ isUpdateWaiting: false });
+const WorkboxContext = (0, react_1.createContext)({ isUpdateWaiting: false });
 exports.default = WorkboxContext;
-//# sourceMappingURL=WorkboxContext.js.map

build/cjs/WorkboxProvider.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const react_1 = (0, tslib_1.__importStar)(require("react"));
 const workbox_window_1 = require("workbox-window");
-const WorkboxContext_1 = tslib_1.__importDefault(require("./WorkboxContext"));
-const WorkboxProvider = ({ children, serviceWorkerUrl = `/service-worker.js`, }) => {
-    // let timer: number | null = null;
-    const [isUpdateWaiting, setUpdateWaiting] = react_1.useState(false);
-    const [workbox, setWorkbox] = react_1.useState(undefined);
-    const [registration, setRegistration] = react_1.useState(undefined);
-    react_1.useEffect(() => {
-        console.log('USE-EFFECT');
-        if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-            const wb = new workbox_window_1.Workbox(serviceWorkerUrl);
-            setWorkbox(wb);
-            // @ts-ignore
-            const showSkipWaitingPrompt = (event) => {
-                console.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.
-            // @ts-ignore
-            wb.addEventListener('waiting', (e) => console.log('WAITING', e) || showSkipWaitingPrompt(e));
-            wb.register().then((r) => setRegistration(r));
+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);
+        };
     }, []);
@@ -36,7 +44,7 @@ return (react_1.default.createElement(WorkboxContext_1.default.Provider, { value: {
                 }
-                console.log('ACTIVATE UPDATE', registration, workbox);
+                logger_1.default.log('ACTIVATE UPDATE', registration, workbox);
                 workbox.addEventListener('controlling', (e) => {
                     // would be called when wasWaitingBeforeRegister = true
                     // would be called when isExternal = false
-                    console.log('CONTROLLING', e, e.isExternal);
+                    logger_1.default.log('CONTROLLING', e, e.isExternal);
                     if (!e.isExternal) {
@@ -51,3 +59,3 @@ // <---- may need to be removed
                     // would be called when isExternal = false
-                    console.log('ACTIVATED', e, e.isExternal);
+                    logger_1.default.log('ACTIVATED', e, e.isExternal);
                     if (e.isExternal) {
@@ -61,3 +69,3 @@ // REF: https://developers.google.com/web/tools/workbox/modules/workbox-window#when_an_unexpected_version_of_the_service_worker_is_found
                 if (registration.waiting) {
-                    console.log('workbox MESSAGESKIPWAITING');
+                    logger_1.default.log('workbox MESSAGESKIPWAITING');
                     workbox.messageSkipWaiting();
@@ -73,2 +81,1 @@ setUpdateWaiting(false);
 exports.default = WorkboxProvider;
-//# sourceMappingURL=WorkboxProvider.js.map

build/cjs/WorkboxProvider.test.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const react_test_renderer_1 = tslib_1.__importDefault(require("react-test-renderer"));
-const WorkboxProvider_1 = tslib_1.__importDefault(require("./WorkboxProvider"));
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const react_test_renderer_1 = (0, tslib_1.__importDefault)(require("react-test-renderer"));
+const WorkboxProvider_1 = (0, tslib_1.__importDefault)(require("./WorkboxProvider"));
 test('Rendering WorkboxProvider successfully', () => {
@@ -12,5 +12,5 @@ const testRenderer = react_test_renderer_1.default.create(react_1.default.createElement(WorkboxProvider_1.default, null));
 test('Rendering WorkboxProvider render exact children', () => {
-    const testRenderer = react_test_renderer_1.default.create(react_1.default.createElement(WorkboxProvider_1.default, null, "CHILD"));
-    expect(testRenderer.toJSON()).toBe('CHILD');
+    const testContent = 'CHILD';
+    const testRenderer = react_test_renderer_1.default.create(react_1.default.createElement(WorkboxProvider_1.default, null, testContent));
+    expect(testRenderer.toJSON()).toBe(testContent);
 });
-//# sourceMappingURL=WorkboxProvider.test.js.map

build/es/index.js

 export { default as UpdateWaiting } from './UpdateWaiting';
 export { default as WorkboxProvider } from './WorkboxProvider';
-//# sourceMappingURL=index.js.map

build/es/UpdateWaiting.js

@@ -10,2 +10,1 @@ import React from 'react';
 export default UpdateWaiting;
-//# sourceMappingURL=UpdateWaiting.js.map

build/es/WorkboxContext.js

 import { createContext } from 'react';
 const WorkboxContext = createContext({ isUpdateWaiting: false });
 export default WorkboxContext;
-//# sourceMappingURL=WorkboxContext.js.map

build/es/WorkboxProvider.js

 import React, { useEffect, useState } from 'react';
 import { Workbox } from 'workbox-window';
 import WorkboxContext from './WorkboxContext';
-const WorkboxProvider = ({ children, serviceWorkerUrl = `/service-worker.js`, }) => {
-    // let timer: number | null = null;
+import logger from './logger';
+const WorkboxProvider = ({ children, serviceWorkerUrl = `/service-worker.js`, interval = 60 * 60 * 1000, // 1 hour
+ }) => {
     const [isUpdateWaiting, setUpdateWaiting] = useState(false);
-    const [workbox, setWorkbox] = useState(undefined);
-    const [registration, setRegistration] = useState(undefined);
+    const [workbox, setWorkbox] = useState();
+    const [registration, setRegistration] = useState();
     useEffect(() => {
-        console.log('USE-EFFECT');
-        if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-            const wb = new Workbox(serviceWorkerUrl);
-            setWorkbox(wb);
-            // @ts-ignore
-            const showSkipWaitingPrompt = (event) => {
-                console.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.
-            // @ts-ignore
-            wb.addEventListener('waiting', (e) => console.log('WAITING', e) || showSkipWaitingPrompt(e));
-            wb.register().then((r) => setRegistration(r));
+        logger.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(serviceWorkerUrl);
+        setWorkbox(wb);
+        const showSkipWaitingPrompt = (event) => {
+            logger.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.log('WAITING', e);
+            showSkipWaitingPrompt(e);
+        });
+        wb.register().then((r) => setRegistration(r));
+        return () => {
+            if (timer)
+                clearInterval(timer);
+        };
     }, []);
@@ -33,7 +41,7 @@ return (React.createElement(WorkboxContext.Provider, { value: {
                 }
-                console.log('ACTIVATE UPDATE', registration, workbox);
+                logger.log('ACTIVATE UPDATE', registration, workbox);
                 workbox.addEventListener('controlling', (e) => {
                     // would be called when wasWaitingBeforeRegister = true
                     // would be called when isExternal = false
-                    console.log('CONTROLLING', e, e.isExternal);
+                    logger.log('CONTROLLING', e, e.isExternal);
                     if (!e.isExternal) {
@@ -48,3 +56,3 @@ // <---- may need to be removed
                     // would be called when isExternal = false
-                    console.log('ACTIVATED', e, e.isExternal);
+                    logger.log('ACTIVATED', e, e.isExternal);
                     if (e.isExternal) {
@@ -58,3 +66,3 @@ // REF: https://developers.google.com/web/tools/workbox/modules/workbox-window#when_an_unexpected_version_of_the_service_worker_is_found
                 if (registration.waiting) {
-                    console.log('workbox MESSAGESKIPWAITING');
+                    logger.log('workbox MESSAGESKIPWAITING');
                     workbox.messageSkipWaiting();
@@ -70,2 +78,1 @@ setUpdateWaiting(false);
 export default WorkboxProvider;
-//# sourceMappingURL=WorkboxProvider.js.map

build/es/WorkboxProvider.test.js

@@ -9,5 +9,5 @@ import React from 'react';
 test('Rendering WorkboxProvider render exact children', () => {
-    const testRenderer = TestRenderer.create(React.createElement(WorkboxProvider, null, "CHILD"));
-    expect(testRenderer.toJSON()).toBe('CHILD');
+    const testContent = 'CHILD';
+    const testRenderer = TestRenderer.create(React.createElement(WorkboxProvider, null, testContent));
+    expect(testRenderer.toJSON()).toBe(testContent);
 });
-//# sourceMappingURL=WorkboxProvider.test.js.map

package.json

 {
   "name": "react-workbox",
-  "version": "1.0.0-beta-3",
+  "version": "1.0.0-beta-5",
   "description": "Manage installation and activation of service worker",
@@ -32,3 +32,4 @@ "license": "MIT",
     "build": "tsc --project tsconfig.json & tsc --project tsconfig-cjs.json",
-    "format": "prettier --config ./.prettierrc --write 'src/**/*.{ts,tsx}' && module-grouping 'src/**/*.{ts,tsx}' --write"
+    "format": "prettier --config ./.prettierrc --write 'src/**/*.{ts,tsx}' && module-grouping 'src/**/*.{ts,tsx}' --write",
+    "lint": "eslint ./src"
   },
@@ -39,6 +40,13 @@ "files": [
   "devDependencies": {
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^27.0.3",
     "@types/react": "^17.0.0",
     "@types/react-test-renderer": "^17.0.0",
-    "jest": "26.6.3",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
+    "eslint": "^8.5.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "jest": "27.4.5",
     "module-grouping-cli": "^0.2.9",
@@ -48,3 +56,3 @@ "prettier": "^2.2.1",
     "rimraf": "3.0.2",
-    "ts-jest": "^26.4.4",
+    "ts-jest": "^27.1.2",
     "typescript": "^4.1.3"
@@ -51,0 +59,0 @@ },

No alert changes

Improved metrics

Lines of code

359

increased by50.21%

Worsened metrics

Total package byte prevSize

18117

decreased by-17.93%

Dev dependency count

17

increased by70%

Number of package files

27

decreased by-18.18%

No dependency changes