ValPush

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_237":238,"_239":240},"routes/_app.x.$handle.$name",{"_106":105,"_33":53,"_114":92,"_28":48,"_13":14,"_115":-5,"_11":116,"_117":118,"_119":120,"_121":122,"_123":124,"_21":-5,"_125":126,"_127":128,"_129":26,"_130":131,"_132":65,"_133":-5,"_134":-5,"_135":136},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_51":52,"_33":53,"_39":54,"_55":-5,"_56":26,"_57":58,"_59":58,"_60":-5,"_61":-5,"_18":62,"_63":32,"_64":65,"_66":65,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":26},"version",2,"changes",[19,20],"aiChatInfo","userId",{"_21":44,"_23":45,"_25":26,"_27":26,"_28":46,"_30":46},{"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":29},"file",{"_31":32,"_33":29,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_25":26},"previous",{"_31":32,"_33":29,"_34":35,"_36":37},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","0198cf3d-c134-745d-84e7-e14c55d2a06a","name","fileType","http","content","/** @jsxImportSource npm:hono@3/jsx */\nimport { modifyFetchHandler as codeOnValTownBanner } from \"https://esm.town/v/andreterron/codeOnValTown\";\nimport { passwordAuth } from \"https://esm.town/v/pomdtr/password_auth/main.tsx\";\nimport { Hono } from \"npm:hono@3\";\n\nimport pushSendNotification, { PushParams } from \"./pushSendNotification.tsx\";\nimport storedSubscription from \"./subscription.tsx\";\nimport getVapidDetails from \"./getVapidDetails.tsx\";\nimport { verifyToken } from \"https://esm.town/v/pomdtr/verifyToken?v=1\";\n\n// .svg required for manifest, fav.farm doesn't seem to mind\nconst iconURL = \"https://fav.farm/%F0%9F%94%94.svg\";\n\nconsole.log(Deno.env.toObject());\nconst app = new Hono();\n\nconst vapidDetails = await getVapidDetails();\n\napp.get(\"/serviceWorker.js\", (c) =>\n c.text(\n `self.addEventListener(\"push\", (event) =>\n event.waitUntil(self.registration.showNotification(...event.data?.json()))\n);\naddEventListener(\"notificationclick\", (event) => {\n if (typeof event.notification.data?.url === \"string\") {\n clients.openWindow(event.notification.data?.url);\n }\n});`,\n 200,\n { \"Content-Type\": \"text/javascript\" },\n ));\n\napp.get(\"/manifest.json\", (c) =>\n c.json({\n name: \"ValPush\",\n start_url: \".\",\n display: \"standalone\",\n icons: [\n {\n src: iconURL,\n sizes: \"any\",\n purpose: \"any\",\n },\n ],\n }));\n\napp.get(\"/subscription\", async (c) => {\n const subscription = await storedSubscription.get();\n return c.json(subscription?.keys.p256dh ?? null);\n});\n\napp.get(\"/vapidPublicKey\", (c) => c.text(vapidDetails.pubKey));\n\napp.get(\"/\", async (c) => {\n const serverSubscription = await storedSubscription.get();\n return c.html(`\n\nValPush\n\n\n\n\n\n\n

\n\n

\n\n\n\n\n\n`);\n});\n\napp.put(\"/subscription\", async (c) => {\n const subscription = await c.req.json();\n await storedSubscription.set(subscription);\n if (subscription !== null) {\n await pushSendNotification(vapidDetails, subscription, \"👋\");\n return c.text(\"Subscribed!\");\n }\n return c.text(\"Unsubscribed!\");\n});\n\nexport const sendNotification = async (...params: PushParams) => {\n const subscription = await storedSubscription.get();\n if (subscription === null) return false;\n await pushSendNotification(vapidDetails, subscription, ...params);\n return true;\n};\n\napp.post(\"/push\", async (c) => {\n await sendNotification(...((await c.req.json()) as PushParams));\n return c.text(\"done\");\n});\n\nexport default codeOnValTownBanner(\n passwordAuth(app.fetch, { verifyPassword: verifyToken }),\n);","createdAt",["D",1755877127925],"branchVersion","branchId","6fc92c42-7ef1-11f0-a94d-0224a6c84d84",{"_31":47,"_33":46,"_34":21,"_36":49,"_39":50,"_41":14,"_42":43,"_25":26},{"_31":47,"_33":46,"_34":21,"_36":48},"README.md","0198cf3d-c134-745d-84e7-da68386d9e1e","","# 🔔 push\n\nSend push notifications from val.town to your device!\n\n![demo](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/800e11d5-2a41-4aa7-4bdd-1b136b776a00/public)\n\n## Setup\n\n- [ ] **🔀 Remix** this val\n- [ ] Open HTTP Endpoint (optionally set a\n [custom subdomain](https://docs.val.town/vals/http/custom-subdomains/))\n- [ ] [Create an API key](https://www.val.town/settings/api/new) with **Users:\n Read-only** permission\n- [ ] Paste your API key into the password field\n- [ ] Subscribe and allow push notification permissions\n- [ ] You should receive a 👋 notification!\n\n## Usage\n\nCalling push notifications in another val:\n\n```ts\nimport { sendNotification } from \"https://esm.town/v/YOUR_PUSH_REMIX_HERE/pushSendNotification.tsx\";\n\nconsole.log(\n await sendNotification(\"Example notification\", {\n data: { url: \"https://example.com\" },\n }),\n);\n```\n\nSending a push notification from outside of Val Town using an API call:\n\n```ts\nfetch(\"https://YOUR_ENDPOINT_HERE/push\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer YOUR_API_TOKEN_HERE\",\n },\n body: JSON.stringify([\n \"Example notification\",\n { data: { url: \"https://example.com\" } },\n ]),\n});\n```\n\nSending a push notification from outside of Val Town using cURL:\n\n```sh\ncurl -X POST \\\n -H \"Content-Type: application/json\" \\\n -H \"Authorization: Bearer YOUR_API_TOKEN_HERE\" \\\n -d '[\"Example notification\",{\"data\":{\"url\":\"https://example.com\"}}]' \\\n \"https://YOUR_ENDPOINT_HERE/push\"\n```\n\n## Caveats\n\n- The service currently only supports sending notifications to one device at a\n time, but could be extended to work with multiple devices/users.\n- For instant configuration, the service stores (a) crypto keys used to encrypt\n notifications and (b) the device currently subscribed to notifications in\n [blob storage](https://www.val.town/settings/blob). It is the user's\n responsibility to secure these blobs from being exposed by other vals.",["D",1755877127925],"id","6fc54492-7ef1-11f0-a94d-0224a6c84d84","push",["D",1755823587558],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","0198ce79-c884-7616-b563-f76803c6154d","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","0198ce79-c884-7616-b563-f93e6889b632","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_106":105,"_113":109},"org",{"_106":105,"_107":-5,"_108":109,"_18":62,"_110":111,"_112":26},"branch",{"_13":14,"_33":92,"_51":43,"_93":52,"_94":95,"_96":97,"_98":58,"_99":100,"_101":102,"_103":53,"_104":105},"isOwned","main","projectId","forkedBranchId","91b26898-2756-11f0-86ff-569c3dd06744","forkedBranchVersion",429,"forkedProjectPrivacy","forkedProjectId","91b216ae-2756-11f0-86ff-569c3dd06744","forkedProjectOrgId","cfc37693-eb92-4a95-a7dd-f5f2f9075890","projectName","userHandle","jrmann100_testing","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzMxYzVxQVllZVp6aGxZTUxBTWZWeUdxbkJnTCJ9","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_51":52,"_33":53,"_39":233,"_55":-5,"_56":26,"_57":58,"_59":58,"_60":-5,"_61":-5,"_18":62,"_63":32,"_64":65,"_66":65,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":234,"_87":235,"_89":236,"_91":26},"tree",[204,205,206,207,208,209,210],"files",[204,205,206,207,208,209,210],"counts",{"_194":69,"_195":157,"_196":69,"_197":198,"_199":200},"contents",[146,147,148,149,150,151,152],"upstreamProject",{"_51":100,"_33":53,"_60":143,"_61":-5,"_57":58,"_85":144},"upstreamBranch",{"_51":95,"_39":137,"_138":139,"_33":92,"_93":100,"_13":97,"_94":-5,"_96":-5,"_140":141,"_55":-5,"_91":26,"_57":58,"_104":142,"_70":102,"_103":53},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746191321350],"updatedAt",["D",1755876155274],"lockfileKey","1755877182722-esm.town_v_jrmann100_push@429-main","jrmann100","Send push notifications from your vals!",{"_106":142,"_113":145},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/ae2a2475-0cad-47ce-b146-1157b8ed4f00/square512?exp=1789574399&sig=88614385851f13af95fe6090b9768edbe6e64c7ae71fedab11f63071ac470354",{"_51":191,"_33":46,"_31":47,"_156":-5,"_42":43,"_41":14,"_158":65,"_39":192,"_13":157,"_34":21,"_36":49,"_25":26,"_162":-5,"_28":193},{"_51":185,"_33":186,"_31":187,"_156":-5,"_42":43,"_41":157,"_158":65,"_39":188,"_13":69,"_34":160,"_36":189,"_25":26,"_162":-5,"_28":190},{"_51":182,"_33":29,"_31":32,"_156":-5,"_42":43,"_41":14,"_158":65,"_39":183,"_13":157,"_34":35,"_36":38,"_25":26,"_162":-5,"_28":184},{"_51":176,"_33":177,"_31":178,"_156":-5,"_42":43,"_41":157,"_158":65,"_39":179,"_13":69,"_34":160,"_36":180,"_25":26,"_162":-5,"_28":181},{"_51":170,"_33":171,"_31":172,"_156":-5,"_42":43,"_41":157,"_158":65,"_39":173,"_13":69,"_34":160,"_36":174,"_25":26,"_162":-5,"_28":175},{"_51":164,"_33":165,"_31":166,"_156":-5,"_42":43,"_41":157,"_158":65,"_39":167,"_13":69,"_34":160,"_36":168,"_25":26,"_162":-5,"_28":169},{"_51":153,"_33":154,"_31":155,"_156":-5,"_42":43,"_41":157,"_158":65,"_39":159,"_13":69,"_34":160,"_36":161,"_25":26,"_162":-5,"_28":163},"6fce12f2-7ef1-11f0-a94d-0224a6c84d84","tryPush.tsx","0198cf3d-c134-745d-84e7-f00acaa9fec7","parentId",1,"latest",["D",1755823587558],"script","import { sendNotification } from \"./main.tsx\";\n\nconsole.log(\n await sendNotification(\"Example notification\", {\n data: { url: \"https://example.com\" },\n }),\n);","label",[154],"6fce0d66-7ef1-11f0-a94d-0224a6c84d84","subscription.tsx","0198cf3d-c134-745d-84e7-ec6c763b8db0",["D",1755823587558],"import { valStorageFile } from \"https://esm.town/v/jrmann100/util/valStorage.tsx\";\n\nexport default valStorageFile();",[165],"6fce0b22-7ef1-11f0-a94d-0224a6c84d84","pushSendNotification.tsx","0198cf3d-c134-745d-84e7-ebcf0f4df5ed",["D",1755823587558],"import webPush, {\n PushSubscription as WebPushSubscriptionJSON,\n} from \"npm:web-push\";\n\nexport type PushParams = Parameters<\n ServiceWorkerRegistration[\"showNotification\"]\n>;\n\nexport default async (\n { url, pubKey, privKey }: { url: string; pubKey: string; privKey: string },\n subscription: PushSubscriptionJSON,\n ...params: Parameters\n) => {\n webPush.setVapidDetails(url, pubKey, privKey);\n if (!subscription) throw new Error(\"subscription is falsy\");\n await webPush.sendNotification(\n subscription as WebPushSubscriptionJSON,\n JSON.stringify(params),\n { TTL: 3600 },\n );\n};",[171],"6fce0758-7ef1-11f0-a94d-0224a6c84d84","pushFrontend.js","0198cf3d-c134-745d-84e7-e6bc1ed530bf",["D",1755823587558],"export default async () => {\n const status: HTMLElement = document.querySelector(\"#status\");\n const button: HTMLButtonElement = document.querySelector(\"#button\");\n if (status === null || button === null) {\n throw new Error(\"could not find required elements\");\n }\n navigator.serviceWorker.register(\"/serviceWorker.js\");\n const registration = await navigator.serviceWorker.ready;\n if (!(\"pushManager\" in registration)) {\n status.textContent = \"No notification support, try installing PWA?\";\n button.hidden = true;\n return;\n }\n let clientSubscription = await registration.pushManager.getSubscription();\n let serverSubscription = await (await fetch(\"/subscription\")).json();\n\n if (clientSubscription === null) {\n if (serverSubscription !== null) {\n status.textContent =\n \"Another device is currently receiving notifications.\";\n }\n button.textContent = \"Subscribe\";\n } else {\n if (serverSubscription === null) {\n status.textContent = \"Server was reset.\";\n clientSubscription.unsubscribe();\n clientSubscription = null;\n button.textContent = \"Subscribe\";\n } else if (\n clientSubscription?.toJSON().keys.p256dh === serverSubscription\n ) {\n status.textContent = \"This device is subscribed to notifications.\";\n button.textContent = \"Unsubscribe\";\n } else {\n status.textContent =\n \"Another device is currently receiving notifications.\";\n clientSubscription.unsubscribe();\n clientSubscription = null;\n button.textContent = \"Subscribe\";\n }\n }\n\n button.disabled = false;\n button.addEventListener(\n \"click\",\n async () => {\n button.disabled = true;\n button.textContent = await (\n await fetch(\"/subscription\", {\n method: \"PUT\",\n body: JSON.stringify(\n clientSubscription\n ? (await clientSubscription.unsubscribe(), null)\n : await registration.pushManager.subscribe({\n userVisibleOnly: true,\n applicationServerKey: await (\n await fetch(\"/vapidPublicKey\")\n ).text(),\n }),\n ),\n })\n ).text();\n },\n { once: true },\n );\n};",[177],"184e0f00-7f6e-11f0-93a9-0224a6c84d84",["D",1755877127925],[29],"6fcdfb64-7ef1-11f0-a94d-0224a6c84d84","getVapidDetails.tsx","0198cf3d-c134-745d-84e7-de8e41d3d160",["D",1755823587558],"import { httpEndpoint } from \"https://esm.town/v/std/utils/index.ts\";\nimport trace from \"https://esm.town/v/jrmann100/util/trace.ts\";\nimport { valStorageFile } from \"https://esm.town/v/jrmann100/util/valStorage.tsx\";\nimport webpush from \"npm:web-push\";\n\ninterface VapidDetails {\n url: string;\n pubKey: string;\n privKey: string;\n}\n\nconst { get, set } = valStorageFile();\n\nexport default async () => {\n const current = await get();\n if (current === undefined) {\n const { publicKey: pubKey, privateKey: privKey } = webpush\n .generateVAPIDKeys();\n const url = await httpEndpoint(\"/main.tsx\", trace()[0]);\n const value = { url, pubKey, privKey };\n await set(value);\n return value;\n }\n return current;\n};",[186],"184e01d6-7f6e-11f0-93a9-0224a6c84d84",["D",1755877127925],[46],"pulls","branches","forks","envVars",{"_201":69,"_203":69},"connections",{"_201":69,"_202":69},"count","unfilledCount","emptyCount",{"_51":191,"_33":46,"_31":47,"_156":-5,"_42":43,"_41":14,"_158":65,"_39":230,"_13":157,"_34":21,"_36":49,"_25":26,"_162":-5,"_212":231,"_28":232},{"_51":185,"_33":186,"_31":187,"_156":-5,"_42":43,"_41":157,"_158":65,"_39":227,"_13":69,"_34":160,"_36":189,"_25":26,"_162":-5,"_212":228,"_28":229},{"_51":182,"_33":29,"_31":32,"_156":-5,"_42":43,"_41":14,"_158":65,"_39":224,"_13":157,"_34":35,"_36":38,"_25":26,"_162":-5,"_212":225,"_28":226},{"_51":176,"_33":177,"_31":178,"_156":-5,"_42":43,"_41":157,"_158":65,"_39":221,"_13":69,"_34":160,"_36":180,"_25":26,"_162":-5,"_212":222,"_28":223},{"_51":170,"_33":171,"_31":172,"_156":-5,"_42":43,"_41":157,"_158":65,"_39":218,"_13":69,"_34":160,"_36":174,"_25":26,"_162":-5,"_212":219,"_28":220},{"_51":164,"_33":165,"_31":166,"_156":-5,"_42":43,"_41":157,"_158":65,"_39":215,"_13":69,"_34":160,"_36":168,"_25":26,"_162":-5,"_212":216,"_28":217},{"_51":153,"_33":154,"_31":155,"_156":-5,"_42":43,"_41":157,"_158":65,"_39":211,"_13":69,"_34":160,"_36":161,"_25":26,"_162":-5,"_212":213,"_28":214},["D",1755823587558],"children",[],[154],["D",1755823587558],[],[165],["D",1755823587558],[],[171],["D",1755823587558],[],[177],["D",1755877127925],[],[29],["D",1755823587558],[],[186],["D",1755877127925],[],[46],["D",1755823587558],{"_106":105,"_113":109},{"_106":105,"_107":-5,"_108":109,"_18":62,"_110":111,"_112":26},{"_13":14,"_33":92,"_51":43,"_93":52,"_94":95,"_96":97,"_98":58,"_99":100,"_101":102,"_103":53,"_104":105},"ctx",{"_85":-5,"_134":270,"_271":272,"_273":274,"_275":26,"_276":26,"_277":26,"_278":65,"_279":-5,"_280":-7,"_281":-7,"_282":69,"_283":26,"_284":26,"_285":-5,"_286":26,"_287":26,"_288":26,"_289":-5},"ENV",{"_241":242,"_243":244,"_245":92,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v2