index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>News Reader | Second PWA Training</title>
		<meta name="description" content="My Second PWA" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="theme-color" content="#F6F7F8" />

		<!-- CONNECT FAVICON -->
		<link rel="shortcut icon" href="/images/maskable_icon_192.png" type="image/x-icon" />

		<!-- CONNECT CSS -->
		<link rel="stylesheet" href="css/materialize.min.css" />

		<!-- CONNECT MANIFEST -->
		<link rel="manifest" href="/manifest.json" />
	</head>

	<body>
		<!-- START NAVIGATION -->
		<nav class="blue lighten-1" role="navigation">
			<div class="nav-wrapper container">
				<a href="/index.html" class="brand-logo" id="logo-container">News Reader</a>
				<a href="#" class="sidenav-trigger" data-target="nav-mobile">☰</a>

				<ul class="topnav right hide-on-med-and-down"></ul>
				<ul class="sidenav" id="nav-mobile"></ul>
			</div>
		</nav>
		<!-- END NAVIGATION -->

		<!-- CONTENT SECTION -->
		<div class="container" id="body-content"></div>

		<!-- CONNECT JAVASCRIPT -->
		<script src="js/materialize.min.js"></script>
		<script src="js/nav.js"></script>
		<script src="js/api.js"></script>
	</body>

	<script>
		// REGISTER SERVICE WORKER
		if ('serviceWorker' in navigator) {
			window.addEventListener('load', function () {
				navigator.serviceWorker
					.register('/service-worker.js')
					.then(function () {
						console.log('Pendaftaran Service Worker Berhasil.');
					})
					.catch(function () {
						console.log('Pendaftaran Service Worker Gagal.');
					});
			});
		} else {
			console.log('Service Worker belum didukung browser ini.');
		}

		// REQUEST API UNTUK PERTAMA KALI
		document.addEventListener('DOMContentLoaded', function () {
			getArticles();
		});
	</script>
</html>