check errors added

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.tabSize": 2
+}

assets/script.js

@@ -33,7 +33,7 @@ function pageInit() {
         container.classList.add('active')
         back.className = 'fas fa-cloud-download-alt'
         root.style.setProperty('--progress', 100)
-        download.addEventListener('click', (e) => {
+        download.addEventListener('click', () => {
             downloadFileFromStorage()
         })
         return   
@@ -59,8 +59,8 @@ function uploadFile(file) {
 
 async function downloadFileFromStorage() {
     const fileRef = storageRef.child(fileId)
-    console.log(fileRef)
     const metadata = await getMetadata(fileRef)
+    if (!metadata) return 
     const { contentType, customMetadata: { fileName } } = metadata
     const url = await fileRef.getDownloadURL()
     downloadFile(url, fileName, contentType)
@@ -71,7 +71,10 @@ function downloadFile(url, fileName, contentType) {
     const xhr = new XMLHttpRequest()
     xhr.responseType = 'blob'
     xhr.onload = () => downloadComplete(xhr.response, fileName, contentType)
+    xhr.onloadend = () => checkDownloadStatus(xhr.status)
     xhr.onprogress = (e) => setDownloadProgress(e)
+    xhr.onerror = () => showError()
+    xhr.on
     xhr.open('GET', url)
     xhr.send()
 }
@@ -127,8 +130,18 @@ function downloadComplete(blob, fileName, contentType) {
 }
 
 
+function checkDownloadStatus(status) {
+    if (status !== 200) {
+        showError()
+    }
+}
+
 async function getMetadata(fileRef) {
-    return await fileRef.getMetadata()
+    try {
+        return await fileRef.getMetadata()
+    } catch (error) {
+        showError()        
+    }
 }
 
 
@@ -153,6 +166,14 @@ function openFileDialog() {
     document.body.removeChild(input)
 }
 
+
+function showError() {
+    back.className = 'fas fa-exclamation-triangle'
+    download.classList.add('error')
+    root.style.setProperty('--progress', 0)
+    download.addEventListener('click', () => document.location.replace('/'))
+}
+
 upload.addEventListener('click', (e) => {
     openFileDialog()
 })
@@ -177,13 +198,11 @@ upload.addEventListener('dragover', (e) => {
 window.addEventListener('load', async () => {
     if ('serviceWorker' in navigator) {
         try {
-          const reg = await navigator.serviceWorker.register('/serviceworker.js')
+          const reg = await navigator.serviceWorker.register('../serviceworker.js')
           console.log('Service worker register success')
         } catch (e) {
           console.error('Service worker register fail')
         }
     }
     pageInit()
 })
-
-

assets/style.css

@@ -26,6 +26,7 @@ body {
 
 .header {
   align-items: center;
+  justify-content: center;
   display: flex;
   flex-direction: row;
   padding-bottom: 1.7rem;
@@ -37,6 +38,14 @@ body {
   margin: 0;
 }
 
+.header a {
+  text-decoration: none;
+}
+
+.header a:hover {
+  transform: scale(1.05);
+}
+
 .divider {
   border-bottom: 0.2rem var(--dark-color) solid;
   height: 0.2rem;
@@ -114,3 +123,7 @@ body {
 .download {
   transform: rotateX(180deg);
 }
+
+.download.error {
+  border: lightcoral 1px solid;
+}

index.html

@@ -19,7 +19,9 @@
     <div class="container">
       <div class="header">
         <!-- <div class="divider"></div> -->
-        <h2>stream.io</h4>
+        <a href="/">
+          <h2>stream.io</h4>
+        </a>
       </div>
       <div class="btn">
         <div class="file">

serviceworker.js

@@ -1,4 +1,4 @@
-const staticCacheName = 's-streamio-v2'
+const staticCacheName = 's-streamio-v1'
 
 const assetUrls = [
   'index.html',