pwa

joyzinhw · Jun 5, 2023 · f10c655 · f10c655
1 parent 86c4a02
commit f10c655
Show file tree

Hide file tree

Showing 6 changed files with 176 additions and 15 deletions.
diff --git a/assets/css/erro.css b/assets/css/erro.css
@@ -0,0 +1,51 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap');
+*
+ {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: 'Inter', sans-serif;
+    text-decoration: none;
+}
+body{
+    background: #4E77AD;
+    height: 100vh;
+
+}
+img{
+    width: 50%;
+}
+.container{
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    align-items: center;
+    justify-content: center;
+}
+h1{
+    color: #fff;
+    font-size: 20px;
+    padding: 20px;
+}
+
+button{
+    margin: 0 10px;
+    padding: .6em 1.2em;
+    font-size: 1.1em;
+    border: none;
+    background-color: #1457ae;
+    color: #fff;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: .5s;
+}
+button:hover{
+    transform: scale(1.1);
+}
+
+@media screen and (max-width:630px){
+    h1{        
+        font-size: 16px;        
+    }
+}
diff --git a/assets/img/img1.svg b/assets/img/img1.svg
diff --git a/index.html b/index.html
@@ -11,9 +11,17 @@
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 	<link rel="stylesheet" href="/assets/css/style-1.css">
+    <link rel="manifest" href="/manifest.json">
+    <link rel="pwabuilder" href="/pwabuilder-sw.js">
 
 
     <title>login</title>
+    <script>
+        if (typeof navigator.serviceWorker !== 'undefined') {
+          navigator.serviceWorker.register("/pwabuilder-sw.js")
+        }
+
+    </script>
 </head>
 <body>
 

diff --git a/manifest.json b/manifest.json
diff --git a/offline.html b/offline.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+    <meta name="author" content="@joyzinhw">
+    <meta name="description" content="codpet, um site para cadrastro de animais">
+    <meta name="keywords" content="sites, web, animais, cadrastro, adoção, localizacao">
+
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="manifest" href="/manifest.json">
+    <link rel="pwabuilder" href="/pwabuilder-sw.js">
+    <link rel="stylesheet" href="/assets/css/erro.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
+    <title>404</title>
+</head>
+
+<body>
+
+    <div class="container">
+        <img src="/assets/img/img1.svg" alt="">
+        <h1>A pagina se encontra indisponível</h1>
+        <div class="boton">
+
+            <button>Volte para tela inicial</button>
+            <a href="/index.html"></a>
+        </div>
+    </div>
+
+
+
+</body>
+
+</html>
diff --git a/pwabuilder-sw.js b/pwabuilder-sw.js
@@ -1,18 +1,54 @@
-// This is the "Offline copy of pages" service worker
+// This is the service worker with the combined offline experience (Offline page + Offline copy of pages)
 
-const CACHE = "pwabuilder-offline";
+const CACHE = "pwabuilder-offline-page";
 
 importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
 
+// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
+const offlineFallbackPage = "/offline.html";
+
 self.addEventListener("message", (event) => {
   if (event.data && event.data.type === "SKIP_WAITING") {
     self.skipWaiting();
   }
 });
 
+self.addEventListener('install', async (event) => {
+  event.waitUntil(
+    caches.open(CACHE)
+      .then((cache) => cache.add(offlineFallbackPage))
+  );
+});
+
+if (workbox.navigationPreload.isSupported()) {
+  workbox.navigationPreload.enable();
+}
+
 workbox.routing.registerRoute(
   new RegExp('/*'),
   new workbox.strategies.StaleWhileRevalidate({
     cacheName: CACHE
   })
-);
+);
+
+self.addEventListener('fetch', (event) => {
+  if (event.request.mode === 'navigate') {
+    event.respondWith((async () => {
+      try {
+        const preloadResp = await event.preloadResponse;
+
+        if (preloadResp) {
+          return preloadResp;
+        }
+
+        const networkResp = await fetch(event.request);
+        return networkResp;
+      } catch (error) {
+
+        const cache = await caches.open(CACHE);
+        const cachedResp = await cache.match(offlineFallbackPage);
+        return cachedResp;
+      }
+    })());
+  }
+});