Skip to content

Commit

Permalink
🚀 feat: add Workbox for PWA caching and implement bookmark saving in …
Browse files Browse the repository at this point in the history
…service worker
  • Loading branch information
vaayne committed Dec 29, 2024
1 parent a0835d2 commit 52ac82f
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 18 deletions.
Binary file modified web/bun.lockb
Binary file not shown.
3 changes: 2 additions & 1 deletion web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@
"tailwindcss": "^3.4.16",
"typescript": "~5.6.2",
"vite": "^6.0.1",
"vite-plugin-pwa": "^0.21.1"
"vite-plugin-pwa": "^0.21.1",
"workbox-precaching": "^7.3.0"
}
}
5 changes: 1 addition & 4 deletions web/src/components/bookmarks-list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,7 @@ export default function BookmarkList({ bookmarks }: BookmarkListProps) {
key={bookmark.id}
className="overflow-hidden transition-transform transform hover:-translate-y-1 mx-2"
>
<a
href={`${ROUTES.BOOKMARKS}?id=${bookmark.id}`}
rel="noreferrer"
>
<a href={`${ROUTES.BOOKMARKS}?id=${bookmark.id}`} rel="noreferrer">
{bookmark.metadata?.image && (
<img
src={bookmark.metadata.image}
Expand Down
74 changes: 74 additions & 0 deletions web/src/sw.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { precacheAndRoute } from "workbox-precaching";

precacheAndRoute(self.__WB_MANIFEST);

self.addEventListener("message", (event) => {
if (event.data && event.data.type === "SKIP_WAITING") self.skipWaiting();
});

self.addEventListener("fetch", (event) => {
if (
event.request.method === "POST" &&
event.request.url.endsWith("/save-bookmark") // Remove trailing slash
) {
event.respondWith(
(async () => {
let formData;
// Handle both form encodings
if (
event.request.headers
.get("content-type")
?.includes("application/x-www-form-urlencoded")
) {
const formText = await event.request.text();
const params = new URLSearchParams(formText);
formData = params;
} else {
formData = await event.request.formData();
}

const link = formData.get("url") || "";
const title = formData.get("title") || "";
const text = formData.get("text") || "";

if (!link) {
return new Response("URL is required.", {
status: 400,
statusText: "Bad Request",
});
}

try {
const resp = await saveBookmark(link);
return Response.redirect("/bookmarks", 303);
} catch (error) {
return new Response(error.message, {
status: 500,
statusText: "Internal Server Error",
});
}
})(),
);
}
});

async function saveBookmark(link) {
// Save the bookmark to the server and return the response URL.
return fetch("/api/v1/bookmarks", {
method: "POST",
body: JSON.stringify({ url: link }),
credentials: "include",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => {
if (!response.ok) {
throw new Error(`Failed to save the bookmark: ${response.statusText}`);
}
return response.json();
})
.then((data) => {
return data.data;
});
}
43 changes: 30 additions & 13 deletions web/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,18 @@ export default defineConfig({
plugins: [
react(),
VitePWA({
registerType: "autoUpdate",
registerType: "prompt",
workbox: {
cleanupOutdatedCaches: false
},
includeAssets: ["favicon.ico", "apple-touch-icon.png", "maskable-icon-512x512.png"],
cleanupOutdatedCaches: true,
},
includeAssets: [
"favicon.ico",
"apple-touch-icon.png",
"maskable-icon-512x512.png",
],
strategies: "injectManifest",
srcDir: "src",
filename: "sw.js",
manifest: {
name: "Vibrain",
short_name: "Vibrain",
Expand All @@ -29,18 +36,28 @@ export default defineConfig({
type: "image/png",
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any'
src: "pwa-512x512.png",
sizes: "512x512",
type: "image/png",
purpose: "any",
},
{
src: 'maskable-icon-512x512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'maskable'
}
src: "maskable-icon-512x512.png",
sizes: "512x512",
type: "image/png",
purpose: "maskable",
},
],
share_target: {
action: "/save-bookmark",
method: "POST",
enctype: "application/x-www-form-urlencoded",
params: {
title: "title",
text: "text",
url: "url"
},
},
},
}),
],
Expand Down

0 comments on commit 52ac82f

Please sign in to comment.