prof3ssorSt3v3 · March 8, 2021 18:13 · Goshishah · Aug 23, 2024
diff --git a/app.js b/app.js
 const APP = {
  SW: null,
  init() {
    //called after DOMContentLoaded
    if ('serviceWorker' in navigator) {
      // 1. Register a service worker hosted at the root of the
      // site using the default scope.
      navigator.serviceWorker
        .register('/sw.js', {
          scope: '/',
        })
        .then((registration) => {
          APP.SW =
            registration.installing ||
            registration.waiting ||
            registration.active;
          console.log('service worker registered');
        });
      // 2. See if the page is currently has a service worker.
      if (navigator.serviceWorker.controller) {
        console.log('we have a service worker installed');
      }

      // 3. Register a handler to detect when a new or
      // updated service worker is installed & activate.
      navigator.serviceWorker.oncontrollerchange = (ev) => {
        console.log('New service worker activated');
      };

      // 4. remove/unregister service workers
      // navigator.serviceWorker.getRegistrations().then((regs) => {
      //   for (let reg of regs) {
      //     reg.unregister().then((isUnreg) => console.log(isUnreg));
      //   }
      // });
      // 5. Listen for messages from the service worker
    } else {
      console.log('Service workers are not supported.');
    }
  },
 };

 document.addEventListener('DOMContentLoaded', APP.init);
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Intro to Service Workers</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <header>
      <h1>Intro to Service Workers</h1>
      <h2>Registration, Lifecycle, Dev Tools, &amp; Events</h2>
    </header>

    <main>
      <output></output>
    </main>
    <script defer src="./js/app.js"></script>
  </body>
 </html>
diff --git a/main.css b/main.css
 html {
  font-size: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  background-color: #222;
  color: #eee;
 }
 body {
  min-height: 100vh;
  background-color: inherit;
  color: inherit;
 }
 header,
 main {
  padding: 1rem 2rem;
 }
 h1 {
  color: orangered;
 }
 h2 {
  color: orange;
 }
diff --git a/sw.js b/sw.js
 //our service worker
 // console.log('sw running');
 //new

 //console.log({ self });
 self.addEventListener('install', (ev) => {
  //service worker is installed.
  console.log('installed');
 });
 self.addEventListener('activate', (ev) => {
  //service worker is activated
  console.log('activated');
 });

 self.addEventListener('fetch', (ev) => {
  //service worker intercepted a fetch call
  console.log('intercepted a http request', ev.request);
 });

 self.addEventListener('message', (ev) => {
  //message from webpage
 });
	const APP = {
	SW: null,
	init() {
	//called after DOMContentLoaded
	if ('serviceWorker' in navigator) {
	// 1. Register a service worker hosted at the root of the
	// site using the default scope.
	navigator.serviceWorker
	.register('/sw.js', {
	scope: '/',
	})
	.then((registration) => {
	APP.SW =
	registration.installing \|\|
	registration.waiting \|\|
	registration.active;
	console.log('service worker registered');
	});
	// 2. See if the page is currently has a service worker.
	if (navigator.serviceWorker.controller) {
	console.log('we have a service worker installed');
	}

	// 3. Register a handler to detect when a new or
	// updated service worker is installed & activate.
	navigator.serviceWorker.oncontrollerchange = (ev) => {
	console.log('New service worker activated');
	};

	// 4. remove/unregister service workers
	// navigator.serviceWorker.getRegistrations().then((regs) => {
	// for (let reg of regs) {
	// reg.unregister().then((isUnreg) => console.log(isUnreg));
	// }
	// });
	// 5. Listen for messages from the service worker
	} else {
	console.log('Service workers are not supported.');
	}
	},
	};

	document.addEventListener('DOMContentLoaded', APP.init);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Intro to Service Workers</title>
	<link rel="stylesheet" href="css/main.css" />
	</head>
	<body>
	<header>
	<h1>Intro to Service Workers</h1>
	<h2>Registration, Lifecycle, Dev Tools, & Events</h2>
	</header>

	<main>
	<output></output>
	</main>
	<script defer src="./js/app.js"></script>
	</body>
	</html>
	html {
	font-size: 20px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
	Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	line-height: 1.5;
	background-color: #222;
	color: #eee;
	}
	body {
	min-height: 100vh;
	background-color: inherit;
	color: inherit;
	}
	header,
	main {
	padding: 1rem 2rem;
	}
	h1 {
	color: orangered;
	}
	h2 {
	color: orange;
	}
	//our service worker
	// console.log('sw running');
	//new

	//console.log({ self });
	self.addEventListener('install', (ev) => {
	//service worker is installed.
	console.log('installed');
	});
	self.addEventListener('activate', (ev) => {
	//service worker is activated
	console.log('activated');
	});

	self.addEventListener('fetch', (ev) => {
	//service worker intercepted a fetch call
	console.log('intercepted a http request', ev.request);
	});

	self.addEventListener('message', (ev) => {
	//message from webpage
	});