feat: Implement push notifications in Budget Manager PWA
- Added functionality for subscribing to push notifications in Settings.vue. - Integrated service worker registration and notification permission requests. - Enhanced Vite configuration for PWA with manifest and caching strategies. - Created a script for generating PDF reports. - Added project report markdown file detailing the PWA implementation and features.
This commit is contained in:
@@ -0,0 +1,14 @@
|
||||
# JWT Secret for authentication
|
||||
JWT_SECRET=your_jwt_secret_here
|
||||
|
||||
# MongoDB connection
|
||||
MONGODB_URI=mongodb://localhost:27017/budget_manager
|
||||
|
||||
# VAPID Keys for Web Push Notifications
|
||||
# Generate your own keys using the script in /scripts/generate-vapid-keys.js
|
||||
VAPID_PUBLIC_KEY=BEHsROsRzfqdMv4g50BEKUbFEL0NNdig0yxdmd-d9j5ZNLOOWbwsTZY3q_W_Y2E-h-hCCJmC5r3uATdFKQTN4z0
|
||||
VAPID_PRIVATE_KEY=dhty4Wi3rKZlKRs_7zSPmcW6qEK8sCMZ23Qw9iMGuBM
|
||||
|
||||
# App settings
|
||||
PORT=3000
|
||||
NODE_ENV=development
|
||||
@@ -0,0 +1,39 @@
|
||||
# use the official Bun image
|
||||
# see all versions at https://hub.docker.com/r/oven/bun/tags
|
||||
FROM oven/bun:1 AS base
|
||||
WORKDIR /usr/src/app
|
||||
|
||||
# install dependencies into temp directory
|
||||
# this will cache them and speed up future builds
|
||||
FROM base AS install
|
||||
RUN mkdir -p /temp/dev
|
||||
COPY package.json bun.lockb /temp/dev/
|
||||
RUN cd /temp/dev && bun install --frozen-lockfile
|
||||
|
||||
# install with --production (exclude devDependencies)
|
||||
RUN mkdir -p /temp/prod
|
||||
COPY package.json bun.lockb /temp/prod/
|
||||
RUN cd /temp/prod && bun install --frozen-lockfile --production
|
||||
|
||||
# copy node_modules from temp directory
|
||||
# then copy all (non-ignored) project files into the image
|
||||
FROM base AS prerelease
|
||||
COPY --from=install /temp/dev/node_modules node_modules
|
||||
COPY . .
|
||||
|
||||
# [optional] tests & build
|
||||
ENV NODE_ENV=production
|
||||
RUN bun run generate-vapid
|
||||
|
||||
# copy production dependencies and source code into final image
|
||||
FROM base AS release
|
||||
COPY --from=install /temp/prod/node_modules node_modules
|
||||
COPY --from=prerelease /usr/src/app/index.ts .
|
||||
COPY --from=prerelease /usr/src/app/src ./src
|
||||
COPY --from=prerelease /usr/src/app/package.json .
|
||||
COPY --from=prerelease /usr/src/app/.env .
|
||||
|
||||
# run the app
|
||||
USER bun
|
||||
EXPOSE 3000/tcp
|
||||
ENTRYPOINT [ "bun", "run", "index.ts" ]
|
||||
@@ -12,6 +12,7 @@
|
||||
"koa-jwt": "^4.0.4",
|
||||
"koa-router": "^13.0.1",
|
||||
"mongodb": "^6.16.0",
|
||||
"web-push": "^3.6.7",
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bcrypt": "^5.0.2",
|
||||
@@ -90,10 +91,16 @@
|
||||
|
||||
"accepts": ["accepts@1.3.8", "", { "dependencies": { "mime-types": "~2.1.34", "negotiator": "0.6.3" } }, "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw=="],
|
||||
|
||||
"agent-base": ["agent-base@7.1.3", "", {}, "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw=="],
|
||||
|
||||
"aggregate-error": ["aggregate-error@3.1.0", "", { "dependencies": { "clean-stack": "^2.0.0", "indent-string": "^4.0.0" } }, "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA=="],
|
||||
|
||||
"asn1.js": ["asn1.js@5.4.1", "", { "dependencies": { "bn.js": "^4.0.0", "inherits": "^2.0.1", "minimalistic-assert": "^1.0.0", "safer-buffer": "^2.1.0" } }, "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA=="],
|
||||
|
||||
"bcrypt": ["bcrypt@6.0.0", "", { "dependencies": { "node-addon-api": "^8.3.0", "node-gyp-build": "^4.8.4" } }, "sha512-cU8v/EGSrnH+HnxV2z0J7/blxH8gq7Xh2JFT6Aroax7UohdmiJJlxApMxtKfuI7z68NvvVcmR78k2LbT6efhRg=="],
|
||||
|
||||
"bn.js": ["bn.js@4.12.2", "", {}, "sha512-n4DSx829VRTRByMRGdjQ9iqsN0Bh4OolPsFnaZBLcbi8iXcB+kJ9s7EnRt4wILZNV3kPLHkRVfOc/HvhC3ovDw=="],
|
||||
|
||||
"bson": ["bson@6.10.3", "", {}, "sha512-MTxGsqgYTwfshYWTRdmZRC+M7FnG1b4y7RO7p2k3X24Wq0yv1m77Wsj0BzlPzd/IowgESfsruQCUToa7vbOpPQ=="],
|
||||
|
||||
"buffer-equal-constant-time": ["buffer-equal-constant-time@1.0.1", "", {}, "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="],
|
||||
@@ -164,6 +171,10 @@
|
||||
|
||||
"http-errors": ["http-errors@2.0.0", "", { "dependencies": { "depd": "2.0.0", "inherits": "2.0.4", "setprototypeof": "1.2.0", "statuses": "2.0.1", "toidentifier": "1.0.1" } }, "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ=="],
|
||||
|
||||
"http_ece": ["http_ece@1.2.0", "", {}, "sha512-JrF8SSLVmcvc5NducxgyOrKXe3EsyHMgBFgSaIUGmArKe+rwr0uphRkRXvwiom3I+fpIfoItveHrfudL8/rxuA=="],
|
||||
|
||||
"https-proxy-agent": ["https-proxy-agent@7.0.6", "", { "dependencies": { "agent-base": "^7.1.2", "debug": "4" } }, "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw=="],
|
||||
|
||||
"iconv-lite": ["iconv-lite@0.4.24", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3" } }, "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA=="],
|
||||
|
||||
"indent-string": ["indent-string@4.0.0", "", {}, "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg=="],
|
||||
@@ -216,6 +227,10 @@
|
||||
|
||||
"mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
|
||||
|
||||
"minimalistic-assert": ["minimalistic-assert@1.0.1", "", {}, "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="],
|
||||
|
||||
"minimist": ["minimist@1.2.8", "", {}, "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="],
|
||||
|
||||
"mongodb": ["mongodb@6.16.0", "", { "dependencies": { "@mongodb-js/saslprep": "^1.1.9", "bson": "^6.10.3", "mongodb-connection-string-url": "^3.0.0" }, "peerDependencies": { "@aws-sdk/credential-providers": "^3.188.0", "@mongodb-js/zstd": "^1.1.0 || ^2.0.0", "gcp-metadata": "^5.2.0", "kerberos": "^2.0.1", "mongodb-client-encryption": ">=6.0.0 <7", "snappy": "^7.2.2", "socks": "^2.7.1" }, "optionalPeers": ["@aws-sdk/credential-providers", "@mongodb-js/zstd", "gcp-metadata", "kerberos", "mongodb-client-encryption", "snappy", "socks"] }, "sha512-D1PNcdT0y4Grhou5Zi/qgipZOYeWrhLEpk33n3nm6LGtz61jvO88WlrWCK/bigMjpnOdAUKKQwsGIl0NtWMyYw=="],
|
||||
|
||||
"mongodb-connection-string-url": ["mongodb-connection-string-url@3.0.2", "", { "dependencies": { "@types/whatwg-url": "^11.0.2", "whatwg-url": "^14.1.0 || ^13.0.0" } }, "sha512-rMO7CGo/9BFwyZABcKAWL8UJwH/Kc2x0g72uhDWzG48URRax5TCIcJ7Rc3RZqffZzO/Gwff/jyKwCU9TN8gehA=="],
|
||||
@@ -286,6 +301,8 @@
|
||||
|
||||
"vary": ["vary@1.1.2", "", {}, "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="],
|
||||
|
||||
"web-push": ["web-push@3.6.7", "", { "dependencies": { "asn1.js": "^5.3.0", "http_ece": "1.2.0", "https-proxy-agent": "^7.0.0", "jws": "^4.0.0", "minimist": "^1.2.5" }, "bin": { "web-push": "src/cli.js" } }, "sha512-OpiIUe8cuGjrj3mMBFWY+e4MMIkW3SVT+7vEIjvD9kejGUypv8GPDf84JdPWskK8zMRIJ6xYGm+Kxr8YkPyA0A=="],
|
||||
|
||||
"webidl-conversions": ["webidl-conversions@7.0.0", "", {}, "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g=="],
|
||||
|
||||
"whatwg-url": ["whatwg-url@14.2.0", "", { "dependencies": { "tr46": "^5.1.0", "webidl-conversions": "^7.0.0" } }, "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw=="],
|
||||
@@ -300,6 +317,8 @@
|
||||
|
||||
"type-is/mime-types": ["mime-types@3.0.1", "", { "dependencies": { "mime-db": "^1.54.0" } }, "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA=="],
|
||||
|
||||
"web-push/jws": ["jws@4.0.0", "", { "dependencies": { "jwa": "^2.0.0", "safe-buffer": "^5.0.1" } }, "sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg=="],
|
||||
|
||||
"co-body/type-is/media-typer": ["media-typer@0.3.0", "", {}, "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="],
|
||||
|
||||
"http-assert/http-errors/depd": ["depd@1.1.2", "", {}, "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ=="],
|
||||
@@ -309,5 +328,7 @@
|
||||
"koa-bodyparser/type-is/media-typer": ["media-typer@0.3.0", "", {}, "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="],
|
||||
|
||||
"type-is/mime-types/mime-db": ["mime-db@1.54.0", "", {}, "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ=="],
|
||||
|
||||
"web-push/jws/jwa": ["jwa@2.0.1", "", { "dependencies": { "buffer-equal-constant-time": "^1.0.1", "ecdsa-sig-formatter": "1.0.11", "safe-buffer": "^5.0.1" } }, "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg=="],
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,6 +3,11 @@
|
||||
"module": "index.ts",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "bun run index.ts",
|
||||
"dev": "bun --watch run index.ts",
|
||||
"generate-vapid": "bun run scripts/generate-vapid-keys.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bcrypt": "^5.0.2",
|
||||
"@types/bun": "latest",
|
||||
@@ -23,6 +28,7 @@
|
||||
"koa-bodyparser": "^4.4.1",
|
||||
"koa-jwt": "^4.0.4",
|
||||
"koa-router": "^13.0.1",
|
||||
"mongodb": "^6.16.0"
|
||||
"mongodb": "^6.16.0",
|
||||
"web-push": "^3.6.7"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* Script to generate VAPID keys for Web Push Notifications
|
||||
* Run with: bun run generate-vapid-keys.js
|
||||
*/
|
||||
const webpush = require('web-push');
|
||||
|
||||
// Generate VAPID keys (public/private key pair)
|
||||
const vapidKeys = webpush.generateVAPIDKeys();
|
||||
|
||||
console.log('VAPID Keys generated successfully:');
|
||||
console.log('===============================');
|
||||
console.log('Public Key:');
|
||||
console.log(vapidKeys.publicKey);
|
||||
console.log('===============================');
|
||||
console.log('Private Key:');
|
||||
console.log(vapidKeys.privateKey);
|
||||
console.log('===============================');
|
||||
console.log('Add these to your .env file as:');
|
||||
console.log('VAPID_PUBLIC_KEY="' + vapidKeys.publicKey + '"');
|
||||
console.log('VAPID_PRIVATE_KEY="' + vapidKeys.privateKey + '"');
|
||||
console.log('===============================');
|
||||
@@ -3,6 +3,7 @@ import { ObjectId } from "mongodb";
|
||||
import dbConfig from "../config/database";
|
||||
import type { Transaction } from "../models";
|
||||
import DatabaseService from "../services/database";
|
||||
import pushController from "./push";
|
||||
|
||||
const db = DatabaseService.getInstance();
|
||||
|
||||
@@ -117,6 +118,17 @@ export default {
|
||||
|
||||
console.log("Inserting transaction:", newTransaction);
|
||||
const result = await transactionsCollection.insertOne(newTransaction);
|
||||
|
||||
// Send push notification for the new transaction
|
||||
try {
|
||||
await pushController.sendTransactionNotification(
|
||||
userId,
|
||||
{ ...newTransaction, _id: result.insertedId }
|
||||
);
|
||||
} catch (notificationError) {
|
||||
console.error("Failed to send notification:", notificationError);
|
||||
// Continue even if notification fails
|
||||
}
|
||||
|
||||
ctx.status = 201;
|
||||
ctx.body = {
|
||||
|
||||
@@ -6,8 +6,9 @@ import webpush from "web-push";
|
||||
|
||||
// Configure web-push with VAPID keys
|
||||
const vapidKeys = {
|
||||
publicKey: process.env.VAPID_PUBLIC_KEY || 'your-public-key',
|
||||
privateKey: process.env.VAPID_PRIVATE_KEY || 'your-private-key'
|
||||
// These should be replaced with generated keys from the script
|
||||
publicKey: process.env.VAPID_PUBLIC_KEY || 'BEHsROsRzfqdMv4g50BEKUbFEL0NNdig0yxdmd-d9j5ZNLOOWbwsTZY3q_W_Y2E-h-hCCJmC5r3uATdFKQTN4z0',
|
||||
privateKey: process.env.VAPID_PRIVATE_KEY || 'dhty4Wi3rKZlKRs_7zSPmcW6qEK8sCMZ23Qw9iMGuBM'
|
||||
};
|
||||
|
||||
webpush.setVapidDetails(
|
||||
@@ -21,7 +22,9 @@ const db = DatabaseService.getInstance();
|
||||
export default {
|
||||
// Get VAPID public key
|
||||
async getVapidPublicKey(ctx: Context) {
|
||||
ctx.set('Content-Type', 'text/plain');
|
||||
ctx.body = vapidKeys.publicKey;
|
||||
console.log("Returning VAPID public key:", vapidKeys.publicKey);
|
||||
},
|
||||
|
||||
// Register a new push subscription
|
||||
|
||||
@@ -7,7 +7,12 @@ export const authenticate: Middleware = jwt({
|
||||
secret: jwtConfig.secret,
|
||||
}).unless({
|
||||
// Paths that don't require authentication
|
||||
path: ["/api/auth/login", "/api/auth/register", "/api/auth/register-admin"],
|
||||
path: [
|
||||
"/api/auth/login",
|
||||
"/api/auth/register",
|
||||
"/api/auth/register-admin",
|
||||
"/api/push/vapid-public-key"
|
||||
],
|
||||
});
|
||||
|
||||
// Error handling middleware for JWT authentication
|
||||
|
||||
@@ -53,4 +53,8 @@ router.delete(
|
||||
categoriesController.deleteCategory,
|
||||
);
|
||||
|
||||
// Push notification routes
|
||||
router.get("/push/vapid-public-key", pushController.getVapidPublicKey);
|
||||
router.post("/push/register", pushController.registerPushSubscription);
|
||||
|
||||
export default router;
|
||||
|
||||
Reference in New Issue
Block a user