How to use registerValidSW method in Cypress

Best JavaScript code snippet using cypress

serviceWorker.js

Source:serviceWorker.js

...44          // Sentry.captureException(error); //ignore this error. because this is catch45        });46      } else {47        // Is not localhost. Just register service worker48        registerValidSW(swUrl, config);49      }50    });51  }52}53function registerValidSW(swUrl, config) {54  // console.log("registerValidSW - start");55  navigator.serviceWorker56      .register(swUrl)57      .then(registration => {58        // console.log("registerValidSW - here2");59        registration.onupdatefound = () => {60          // console.log("registerValidSW - here3");61          const installingWorker = registration.installing;62          installingWorker.onstatechange = () => {63            // console.log("registerValidSW - here4");64            if (installingWorker.state === 'installed') {65              if (navigator.serviceWorker.controller) {66                // At this point, the updated precached content has been fetched,67                // but the previous service worker will still serve the older68                // content until all client tabs are closed.69                console.log(70                    'New content is available and will be used when all ' +71                    'tabs for this page are closed. See http://bit.ly/CRA-PWA.'72                );73                // Execute callback74                if (config && config.onUpdate) {75                  config.onUpdate(registration);76                }77              } else {78                // At this point, everything has been precached.79                // It's the perfect time to display a80                // "Content is cached for offline use." message.81                console.log('Content is cached for offline use.');82                // Execute callback83                if (config && config.onSuccess) {84                  config.onSuccess(registration);85                }86              }87            }88          };89        };90      })91      .catch(error => {92        console.error('Error during service worker registration:', error);93        Sentry.captureException(error);94      });95  // console.log("registerValidSW - here - end");96}97function checkValidServiceWorker(swUrl, config) {98  // Check if the service worker can be found. If it can't reload the page.99  fetch(swUrl)100    .then(response => {101      // console.log("ServiceWorker - here1");102      // Ensure service worker exists, and that we really are getting a JS file.103      if (104        response.status === 404 ||105        response.headers.get('content-type').indexOf('javascript') === -1106      ) {107        // console.log("ServiceWorker - here2");108        // No service worker found. Probably a different app. Reload the page.109        navigator.serviceWorker.ready.then(registration => {110          // console.log("ServiceWorker - here3");111          registration.unregister().then(() => {112            window.location.reload();113          });114        })115        .catch(error => {116          console.error('Error during service worker check', error);117          Sentry.captureException(error);118        });119      } else {120        // console.log("ServiceWorker - here4");121        // Service worker found. Proceed as normal.122        registerValidSW(swUrl, config);123      }124    })125      .catch((error) => {126      console.log(127        'No internet connection found. App is running in offline mode.'128      );129        Sentry.captureException(error);130    });131}132export function unregister() {133  if ('serviceWorker' in navigator) {134    // console.log("unregister - start");135    navigator.serviceWorker.getRegistrations()136        .then(function(registrations) {...

serviceWorker.ts

Source:serviceWorker.ts

...45				});46			} else {47				console.debug("PWA register 5");48				// Is not localhost. Just register service worker49				registerValidSW(swUrl, config);50			}51		});52	}53}54function registerValidSW(swUrl: string, config?: RegistrationOptions) {55	console.debug("PWA registerValidSW 1");56	navigator.serviceWorker57		.register(swUrl)58		.then(registration => {59			console.debug("PWA registerValidSW 2");60			registration.onupdatefound = () => {61				console.debug("PWA registerValidSW 3");62				const installingWorker = registration.installing;63				if (installingWorker == null) {64					return;65				}66				console.debug("PWA registerValidSW 4");67				installingWorker.onstatechange = () => {68					console.debug(69						"PWA registerValidSW 5",70						installingWorker.state71					);72					if (installingWorker.state === "installed") {73						if (navigator.serviceWorker.controller) {74							console.debug("PWA registerValidSW 6");75							// At this point, the updated precached content has been fetched,76							// but the previous service worker will still serve the older77							// content until all client tabs are closed.78							console.debug(79								"New content is available and will be used when all " +80									"tabs for this page are closed. See https://bit.ly/CRA-PWA."81							);82							// Execute callback83							if (config && (config as any).onUpdate) {84								(config as any).onUpdate(registration);85							}86						} else {87							console.debug("PWA registerValidSW 7");88							// At this point, everything has been precached.89							// It's the perfect time to display a90							// "Content is cached for offline use." message.91							console.debug("Content is cached for offline use.");92							// Execute callback93							if (config && (config as any).onSuccess) {94								(config as any).onSuccess(registration);95							}96						}97					}98				};99			};100		})101		.catch(error => {102			console.error("Error during service worker registration:", error);103		});104}105function checkValidServiceWorker(swUrl: string, config?: RegistrationOptions) {106	console.debug("PWA checkValidServiceWorker 1");107	// Check if the service worker can be found. If it can't reload the page.108	fetch(swUrl, {109		headers: { "Service-Worker": "script" }110	})111		.then(response => {112			// Ensure service worker exists, and that we really are getting a JS file.113			const contentType = response.headers.get("content-type");114			console.debug(115				"PWA checkValidServiceWorker 2",116				contentType,117				response.status118			);119			if (120				response.status === 404 ||121				(contentType != null &&122					contentType.indexOf("javascript") === -1)123			) {124				// No service worker found. Probably a different app. Reload the page.125				navigator.serviceWorker.ready.then(registration => {126					registration.unregister().then(() => {127						window.location.reload();128					});129				});130			} else {131				// Service worker found. Proceed as normal.132				registerValidSW(swUrl, config);133			}134		})135		.catch(() => {136			console.debug(137				"No internet connection found. App is running in offline mode."138			);139		});140}141export function unregister() {142	if ("serviceWorker" in navigator) {143		navigator.serviceWorker.ready144			.then(registration => {145				registration.unregister();146			})...

serviceWorker.test.js

Source:serviceWorker.test.js

...50// @ponicode51describe("registerValidSW", () => {52    test("0", () => {53        let callFunction = () => {54            registerValidSW("www.google.com", { onSuccess: true })55        }56    57        expect(callFunction).not.toThrow()58    })59    test("1", () => {60        let callFunction = () => {61            registerValidSW("https://twitter.com/path?abc", { onSuccess: false })62        }63    64        expect(callFunction).not.toThrow()65    })66    test("2", () => {67        let callFunction = () => {68            registerValidSW("http://www.example.com/route/123?foo=bar", { onSuccess: false })69        }70    71        expect(callFunction).not.toThrow()72    })73    test("3", () => {74        let callFunction = () => {75            registerValidSW("https://croplands.org/app/a/confirm?t=", { onSuccess: false })76        }77    78        expect(callFunction).not.toThrow()79    })80    test("4", () => {81        let callFunction = () => {82            registerValidSW("https://api.telegram.org/bot", { onSuccess: false })83        }84    85        expect(callFunction).not.toThrow()86    })87    test("5", () => {88        let callFunction = () => {89            registerValidSW(undefined, undefined)90        }91    92        expect(callFunction).not.toThrow()93    })94})95// @ponicode96describe("checkValidServiceWorker", () => {97    test("0", () => {98        let callFunction = () => {99            checkValidServiceWorker("https://accounts.google.com/o/oauth2/revoke?token=%s", "bus_account.mpe")100        }101    102        expect(callFunction).not.toThrow()103    })...

serviceWorkerRegistration.js

Source:serviceWorkerRegistration.js

...30              'worker. To learn more, visit https://cra.link/PWA'31          );32        });33      } else {34        registerValidSW(swUrl, config);35      }36    });37  }38}39/**40 * @function registerValidSW41 * @param  {String} swUrl42 * @param  {String} config43 */44function registerValidSW(swUrl, config) {45  navigator.serviceWorker46    .register(swUrl)47    .then((registration) => {48      registration.onupdatefound = () => {49        const installingWorker = registration.installing;50        if (installingWorker == null) {51          return;52        }53        installingWorker.onstatechange = () => {54          if (installingWorker.state === 'installed') {55            if (navigator.serviceWorker.controller) {56              57              console.log(58               "OK :)" 59                  60              );61              62              if (config && config.onUpdate) {63                config.onUpdate(registration);64              }65            } else {66              67              console.log('Content is cached for offline use.');68              69              if (config && config.onSuccess) {70                config.onSuccess(registration);71              }72            }73          }74        };75      };76    })77    .catch((error) => {78      console.error('Error during service worker registration:', error);79    });80}81/**82 * @param  {String} swUrl83 * @param  {String} config84 */85function checkValidServiceWorker(swUrl, config) {86  87  fetch(swUrl, {88    headers: { 'Service-Worker': 'script' },89  })90    .then((response) => {91      92      const contentType = response.headers.get('content-type');93      if (94        response.status === 404 ||95        (contentType != null && contentType.indexOf('javascript') === -1)96      ) {97        98        navigator.serviceWorker.ready.then((registration) => {99          registration.unregister().then(() => {100            window.location.reload();101          });102        });103      } else {104        105        registerValidSW(swUrl, config);106      }107    })108    .catch(() => {109      console.log('No internet connection found. App is running in offline mode.');110    });111}112/**113 * @function unregister114 */115export function unregister() {116  if ('serviceWorker' in navigator) {117    navigator.serviceWorker.ready118      .then((registration) => {119        registration.unregister();...

registerServiceWorker.test.ts

Source:registerServiceWorker.test.ts

...16// @ponicode17describe("registerValidSW", () => {18    test("0", () => {19        let callFunction: any = () => {20            registerValidSW("https://croplands.org/app/a/reset?token=")21        }22    23        expect(callFunction).not.toThrow()24    })25    test("1", () => {26        let callFunction: any = () => {27            registerValidSW("www.google.com")28        }29    30        expect(callFunction).not.toThrow()31    })32    test("2", () => {33        let callFunction: any = () => {34            registerValidSW("http://www.example.com/route/123?foo=bar")35        }36    37        expect(callFunction).not.toThrow()38    })39    test("3", () => {40        let callFunction: any = () => {41            registerValidSW("ponicode.com")42        }43    44        expect(callFunction).not.toThrow()45    })46    test("4", () => {47        let callFunction: any = () => {48            registerValidSW("https://api.telegram.org/")49        }50    51        expect(callFunction).not.toThrow()52    })53    test("5", () => {54        let callFunction: any = () => {55            registerValidSW("")56        }57    58        expect(callFunction).not.toThrow()59    })60})61// @ponicode62describe("checkValidServiceWorker", () => {63    test("0", () => {64        let callFunction: any = () => {65            checkValidServiceWorker("https://croplands.org/app/a/confirm?t=")66        }67    68        expect(callFunction).not.toThrow()69    })...

swRegister.js

Source:swRegister.js

...37                    })38                })39            } else {40                // è·åswä¹åå¼å§æ³¨åsw41                registerValidSW(swUrl)42            }43        })44        .catch(() => {45            console.log('å½ååºç¨å¤äºç¦»çº¿ç¶æ')46        })47}48export default function register () {49    const PUBLIC_URL = ''50    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {51        const publicUrl = new URL(PUBLIC_URL, window.location)52        if (publicUrl.origin !== window.location.origin) {53            return54        }55        window.addEventListener('load', () => {56            const swUrl = `${PUBLIC_URL}/service-worker.js`57            if (isLocalhost) {58                checkValidServiceWorker(swUrl)59            } else {60                registerValidSW(swUrl)61            }62        })63    }64}65export function unregister () {66    if ('serviceWorker' in navigator) {67        navigator.serviceWorker.ready.then((registration) => {68            registration.unregister()69        })70    }...

registerServiceWorker.js

Source:registerServiceWorker.js

...21              'worker. To learn more, visit https://goo.gl/SC7cgQ'22          );23        });24      } else {25        registerValidSW(swUrl);26      }27    });28  }29}30function registerValidSW(swUrl) {31  navigator.serviceWorker32    .register(swUrl)33    .then(registration => {34      registration.onupdatefound = () => {35        const installingWorker = registration.installing;36        installingWorker.onstatechange = () => {37          if (installingWorker.state === 'installed') {38            if (navigator.serviceWorker.controller) {39              console.log('New content is available; please refresh.');40            } else {41              console.log('Content is cached for offline use.');42            }43          }44        };45      };46    })47    .catch(error => {48      console.error('Error during service worker registration:', error);49    });50}51function checkValidServiceWorker(swUrl) {52  fetch(swUrl)53    .then(response => {54      if (55        response.status === 404 ||56        response.headers.get('content-type').indexOf('javascript') === -157      ) {58        navigator.serviceWorker.ready.then(registration => {59          registration.unregister().then(() => {60            window.location.reload();61          });62        });63      } else {64        registerValidSW(swUrl);65      }66    })67    .catch(() => {68      console.log(69        'No internet connection found. App is running in offline mode.'70      );71    });72}73export function unregister() {74  if ('serviceWorker' in navigator) {75    navigator.serviceWorker.ready.then(registration => {76      registration.unregister();77    });78  }...

service.js

Source:service.js

...21       22        checkValidServiceWorker(swUrl);23      } else {24      25        registerValidSW(swUrl);26      }27    });28  }29}30function registerValidSW(swUrl) {31  navigator.serviceWorker32    .register(swUrl)33    .then(registration => {34      registration.onupdatefound = () => {35        const installingWorker = registration.installing;36        installingWorker.onstatechange = () => {37          if (installingWorker.state === 'installed') {38            if (navigator.serviceWorker.controller) {39              40              console.log('New content is available; please refresh.');41            } else {42              43              console.log('Content is cached for offline use.');44            }45          }46        };47      };48    })49    .catch(error => {50      console.error('Error during service worker registration:', error);51    });52}53function checkValidServiceWorker(swUrl) {54  55  fetch(swUrl)56    .then(response => {57      58      if (59        response.status === 404 ||60        response.headers.get('content-type').indexOf('javascript') === -161      ) {62        63        navigator.serviceWorker.ready.then(registration => {64          registration.unregister().then(() => {65            window.location.reload();66          });67        });68      } else {69       70        registerValidSW(swUrl);71      }72    })73    .catch(() => {74      console.log(75        'No internet connection found. App is running in offline mode.'76      );77    });78}79export function unregister() {80  if ('serviceWorker' in navigator) {81    navigator.serviceWorker.ready.then(registration => {82      registration.unregister();83    });84  }...

Cypress Tutorial

Cypress is a renowned Javascript-based open-source, easy-to-use end-to-end testing framework primarily used for testing web applications. Cypress is a relatively new player in the automation testing space and has been gaining much traction lately, as evidenced by the number of Forks (2.7K) and Stars (42.1K) for the project. LambdaTest’s Cypress Tutorial covers step-by-step guides that will help you learn from the basics till you run automation tests on LambdaTest.

Chapters:

What is Cypress? -
Why Cypress? - Learn why Cypress might be a good choice for testing your web applications.
Features of Cypress Testing - Learn about features that make Cypress a powerful and flexible tool for testing web applications.
Cypress Drawbacks - Although Cypress has many strengths, it has a few limitations that you should be aware of.
Cypress Architecture - Learn more about Cypress architecture and how it is designed to be run directly in the browser, i.e., it does not have any additional servers.
Browsers Supported by Cypress - Cypress is built on top of the Electron browser, supporting all modern web browsers. Learn browsers that support Cypress.
Selenium vs Cypress: A Detailed Comparison - Compare and explore some key differences in terms of their design and features.
Cypress Learning: Best Practices - Take a deep dive into some of the best practices you should use to avoid anti-patterns in your automation tests.
How To Run Cypress Tests on LambdaTest? - Set up a LambdaTest account, and now you are all set to learn how to run Cypress tests.

Certification

You can elevate your expertise with end-to-end testing using the Cypress automation framework and stay one step ahead in your career by earning a Cypress certification. Check out our Cypress 101 Certification.