add PWA Examples

techhtml · techhtml · commit 29d97ceb2ee7 · 2018-07-06T15:54:51.000+09:00
diff --git a/pwa/index.html b/pwa/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="UTF-8" />
+  <title>Hello World</title>
+  <link rel="stylesheet" href="test.css" />
+</head>
+<body>
+  <header>
+    TEST HEADER
+  </header>
+  <div id="main"></div>
+  <script src="test.js"></script>
+  <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', function() {
+        navigator.serviceWorker.register('./registerServiceWorker.js').then(function(registration) {
+          console.log("서비스 워커 등록 완료", registration.scope);
+        }).catch(function(err) {
+          console.log("서비스 워커 등록 실패", err);
+        })
+      })
+    }
+  </script>
+</body>
+</html>
diff --git a/pwa/registerServiceWorker.js b/pwa/registerServiceWorker.js
@@ -0,0 +1,17 @@
+const CACHE_NAME = "test-cashe-1";
+
+const urlsToCache = [
+  '/pwa/',
+  '/pwa/test.css',
+  '/pwa/test.js'
+]
+
+self.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open(CHCHE_NAME)
+      .then(function(cache) {
+        console.log("CACHE 등록 완료");
+        return cache.addAll(urlsToCache);
+      })
+  );
+})
diff --git a/pwa/test.css b/pwa/test.css
@@ -0,0 +1,5 @@
+#main::after {
+  content: "CSS is ON";
+  display: block;
+  color: white;
+}
diff --git a/pwa/test.js b/pwa/test.js
@@ -0,0 +1,3 @@
+const main = document.querySelector("#main");
+
+main.innerHTML = "이것이 보인다면 스크립트가 정상적으로 로딩된 것입니다";

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+const main = document.querySelector("#main");`
	`2`	`+`
	`3`	`+main.innerHTML = "이것이 보인다면 스크립트가 정상적으로 로딩된 것입니다";`