[add] service worker & offline reader
This commit is contained in:
179
assets/offline/index.html
Normal file
179
assets/offline/index.html
Normal file
@@ -0,0 +1,179 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=0.90, user-scalable=no, viewport-fit=cover"
|
||||
/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta
|
||||
name="apple-mobile-web-app-status-bar-style"
|
||||
content="black-translucent"
|
||||
/>
|
||||
<meta
|
||||
name="theme-color"
|
||||
content="#F3F4F6"
|
||||
media="(prefers-color-scheme: light)"
|
||||
/>
|
||||
<meta
|
||||
name="theme-color"
|
||||
content="#1F2937"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
/>
|
||||
|
||||
<title>Book Manager - Offline</title>
|
||||
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="stylesheet" href="/assets/style.css" />
|
||||
|
||||
<script src="/assets/lib/idb-keyval.js"></script>
|
||||
<script src="/assets/lib/sw-helper.js"></script>
|
||||
<script src="/assets/index.js"></script>
|
||||
<script src="/assets/offline/index.js"></script>
|
||||
|
||||
<style>
|
||||
/* ----------------------------- */
|
||||
/* -------- PWA Styling -------- */
|
||||
/* ----------------------------- */
|
||||
html,
|
||||
body {
|
||||
overscroll-behavior-y: none;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
html {
|
||||
height: calc(100% + env(safe-area-inset-bottom));
|
||||
padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
|
||||
env(safe-area-inset-left);
|
||||
}
|
||||
|
||||
main {
|
||||
height: calc(100dvh - 4rem - env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
#container {
|
||||
padding-bottom: calc(5em + env(safe-area-inset-bottom) * 2);
|
||||
}
|
||||
|
||||
/* No Scrollbar - IE, Edge, Firefox */
|
||||
* {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* No Scrollbar - WebKit */
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.css-button:checked + div {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.css-button + div {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.css-button:checked + div + label {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100 dark:bg-gray-800">
|
||||
<div class="flex items-center justify-between w-full h-16">
|
||||
<h1 class="text-xl font-bold dark:text-white px-6 lg:ml-48">
|
||||
Offline Documents
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<main class="relative overflow-hidden">
|
||||
<div
|
||||
id="container"
|
||||
class="h-[100dvh] px-4 overflow-auto md:px-6 lg:mx-48"
|
||||
>
|
||||
<div
|
||||
id="online"
|
||||
class="rounded text-white bg-white dark:bg-gray-700 text-center p-3 mb-4"
|
||||
>
|
||||
You're Online:
|
||||
<a
|
||||
href="/"
|
||||
class="p-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm text-center py-1 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
|
||||
>Go Home</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="loading"
|
||||
class="rounded text-white bg-white dark:bg-gray-700 text-center p-3 mb-4"
|
||||
>
|
||||
Loading...
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="items"
|
||||
class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
|
||||
></div>
|
||||
|
||||
<div
|
||||
class="fixed bottom-6 right-6 rounded-full flex items-center justify-center"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="add-file-button"
|
||||
class="hidden css-button"
|
||||
/>
|
||||
<div
|
||||
class="rounded p-4 bg-gray-800 dark:bg-gray-200 text-white dark:text-black w-72 text-sm flex flex-col gap-2"
|
||||
>
|
||||
<div class="flex flex-col gap-2">
|
||||
<input
|
||||
type="file"
|
||||
accept=".epub"
|
||||
id="document_file"
|
||||
name="document_file"
|
||||
/>
|
||||
<button
|
||||
class="font-medium px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
>
|
||||
Add File
|
||||
</button>
|
||||
</div>
|
||||
<label for="add-file-button">
|
||||
<div
|
||||
class="w-full text-center cursor-pointer font-medium mt-2 px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
>
|
||||
Cancel
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<label
|
||||
class="w-16 h-16 bg-gray-800 dark:bg-gray-200 rounded-full flex items-center justify-center opacity-30 hover:opacity-100 transition-all duration-200 cursor-pointer"
|
||||
for="add-file-button"
|
||||
>
|
||||
<svg
|
||||
width="34"
|
||||
height="34"
|
||||
class="text-gray-200 dark:text-gray-600"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M12 15.75C12.4142 15.75 12.75 15.4142 12.75 15V4.02744L14.4306 5.98809C14.7001 6.30259 15.1736 6.33901 15.4881 6.06944C15.8026 5.79988 15.839 5.3264 15.5694 5.01191L12.5694 1.51191C12.427 1.34567 12.2189 1.25 12 1.25C11.7811 1.25 11.573 1.34567 11.4306 1.51191L8.43056 5.01191C8.16099 5.3264 8.19741 5.79988 8.51191 6.06944C8.8264 6.33901 9.29988 6.30259 9.56944 5.98809L11.25 4.02744L11.25 15C11.25 15.4142 11.5858 15.75 12 15.75Z"
|
||||
/>
|
||||
<path
|
||||
d="M16 9C15.2978 9 14.9467 9 14.6945 9.16851C14.5853 9.24148 14.4915 9.33525 14.4186 9.44446C14.25 9.69667 14.25 10.0478 14.25 10.75L14.25 15C14.25 16.2426 13.2427 17.25 12 17.25C10.7574 17.25 9.75004 16.2426 9.75004 15L9.75004 10.75C9.75004 10.0478 9.75004 9.69664 9.58149 9.4444C9.50854 9.33523 9.41481 9.2415 9.30564 9.16855C9.05341 9 8.70227 9 8 9C5.17157 9 3.75736 9 2.87868 9.87868C2 10.7574 2 12.1714 2 14.9998V15.9998C2 18.8282 2 20.2424 2.87868 21.1211C3.75736 21.9998 5.17157 21.9998 8 21.9998H16C18.8284 21.9998 20.2426 21.9998 21.1213 21.1211C22 20.2424 22 18.8282 22 15.9998V14.9998C22 12.1714 22 10.7574 21.1213 9.87868C20.2426 9 18.8284 9 16 9Z"
|
||||
/>
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
142
assets/offline/index.js
Normal file
142
assets/offline/index.js
Normal file
@@ -0,0 +1,142 @@
|
||||
/**
|
||||
* TODO:
|
||||
* - Offling / Online Checker
|
||||
* - Flush oustanding read activity & progress
|
||||
* - No files cached
|
||||
* - Upload Files
|
||||
**/
|
||||
|
||||
const BASE_ITEM = `
|
||||
<div class="w-full relative">
|
||||
<div class="flex gap-4 w-full h-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
|
||||
<div class="min-w-fit my-auto h-48 relative">
|
||||
<a href="#">
|
||||
<img class="rounded object-cover h-full" src="/assets/images/no-cover.jpg"></img>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-col justify-around dark:text-white w-full text-sm">
|
||||
<div class="inline-flex shrink-0 items-center">
|
||||
<div>
|
||||
<p class="text-gray-400">Title</p>
|
||||
<p class="font-medium">
|
||||
N/A
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-flex shrink-0 items-center">
|
||||
<div>
|
||||
<p class="text-gray-400">Author</p>
|
||||
<p class="font-medium">
|
||||
N/A
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-flex shrink-0 items-center">
|
||||
<div>
|
||||
<p class="text-gray-400">Progress</p>
|
||||
<p class="font-medium">
|
||||
0%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute flex flex-col gap-2 right-4 bottom-4 text-gray-500 dark:text-gray-400">
|
||||
<a href="#">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
class="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12ZM12 6.25C12.4142 6.25 12.75 6.58579 12.75 7V12.1893L14.4697 10.4697C14.7626 10.1768 15.2374 10.1768 15.5303 10.4697C15.8232 10.7626 15.8232 11.2374 15.5303 11.5303L12.5303 14.5303C12.3897 14.671 12.1989 14.75 12 14.75C11.8011 14.75 11.6103 14.671 11.4697 14.5303L8.46967 11.5303C8.17678 11.2374 8.17678 10.7626 8.46967 10.4697C8.76256 10.1768 9.23744 10.1768 9.53033 10.4697L11.25 12.1893V7C11.25 6.58579 11.5858 6.25 12 6.25ZM8 16.25C7.58579 16.25 7.25 16.5858 7.25 17C7.25 17.4142 7.58579 17.75 8 17.75H16C16.4142 17.75 16.75 17.4142 16.75 17C16.75 16.5858 16.4142 16.25 16 16.25H8Z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
const GET_SW_CACHE = "GET_SW_CACHE";
|
||||
const DEL_SW_CACHE = "DEL_SW_CACHE";
|
||||
|
||||
async function initOffline() {
|
||||
updateOnlineIndicator();
|
||||
|
||||
if (document.location.pathname !== "/offline")
|
||||
window.history.replaceState(null, null, "/offline");
|
||||
|
||||
// Ensure Installed
|
||||
await SW.install();
|
||||
|
||||
// Get Service Worker Cache & Local Cache - Override Local
|
||||
let swCache = await SW.send({ type: GET_SW_CACHE });
|
||||
let allCache = await Promise.all(
|
||||
swCache.map(async (item) => {
|
||||
let localCache = await IDB.get("PROGRESS-" + item.id);
|
||||
if (localCache) {
|
||||
item.progress = localCache.progress;
|
||||
item.percentage = Math.round(localCache.percentage * 10000) / 100;
|
||||
}
|
||||
|
||||
return item;
|
||||
})
|
||||
);
|
||||
|
||||
populateDOM(allCache);
|
||||
}
|
||||
|
||||
/**
|
||||
* Populate DOM with cached documents.
|
||||
**/
|
||||
function populateDOM(data) {
|
||||
let allDocuments = document.querySelector("#items");
|
||||
|
||||
// Update Loader / No Results Indicator
|
||||
let loadingEl = document.querySelector("#loading");
|
||||
if (data.length == 0) loadingEl.innerText = "No Results";
|
||||
else loadingEl.remove();
|
||||
|
||||
data.forEach((item) => {
|
||||
// Create Main Element
|
||||
let baseEl = document.createElement("div");
|
||||
baseEl.innerHTML = BASE_ITEM;
|
||||
baseEl = baseEl.firstElementChild;
|
||||
|
||||
// Get Elements
|
||||
let coverEl = baseEl.querySelector("a img");
|
||||
let [titleEl, authorEl, percentageEl] = baseEl.querySelectorAll("p + p");
|
||||
let downloadEl = baseEl.querySelector("svg").parentElement;
|
||||
|
||||
// Set Variables
|
||||
downloadEl.setAttribute("href", "/documents/" + item.id + "/file");
|
||||
coverEl.setAttribute("src", "/documents/" + item.id + "/cover");
|
||||
coverEl.parentElement.setAttribute("href", "/reader#id=" + item.id);
|
||||
titleEl.textContent = item.title;
|
||||
authorEl.textContent = item.author;
|
||||
percentageEl.textContent = item.percentage + "%";
|
||||
|
||||
allDocuments.append(baseEl);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Allow adding file to offline reader. Add to IndexedDB,
|
||||
* and later upload? Add style indicating external file?
|
||||
**/
|
||||
function handleFileAdd() {}
|
||||
|
||||
function updateOnlineIndicator(isOnline) {
|
||||
let onlineEl = document.querySelector("#online");
|
||||
isOnline = isOnline == undefined ? navigator.onLine : isOnline;
|
||||
onlineEl.hidden = !isOnline;
|
||||
}
|
||||
|
||||
// Initialize
|
||||
window.addEventListener("DOMContentLoaded", initOffline);
|
||||
window.addEventListener("online", () => updateOnlineIndicator(true));
|
||||
window.addEventListener("offline", () => updateOnlineIndicator(false));
|
||||
Reference in New Issue
Block a user