Clutch Developer
DA
Book a call

Resetibo: en PWA til AI-resetvarsler og fællesskabsstøtte

Et uafhængigt browserprodukt, hvor folk kan vælge AI-resetkanaler, gøre enheden klar til varsler og støtte overvågningen, når de ønsker det.

Resetibo hjælper folk med at følge resetmeddelelser for de AI-værktøjer, de bruger. En besøgende kan vælge ChatGPT, Anthropic eller Grok, se den aktuelle overvågningsstatus, gøre enheden klar til notifikationer og åbne den oprindelige meddelelse, når der findes en. Produktet er et uafhængigt Clutch Developer-projekt, ikke en officiel tjeneste fra OpenAI, Anthropic eller xAI. Det præger oplevelsen: appen forklarer, hvad den overvåger, og hvor browserens eller kildernes begrænsninger gælder, i stedet for at fremstille en advarsel som en garanti.

Ét produkt, fra browseren til hjemmeskærmen

Produktet er en progressiv webapp: åbn den fra et link, og installér den derefter for hurtig adgang fra hjemmeskærmen eller skrivebordet. React 19 håndterer brugerfladen, og Vite 7 bygger frontenden. vite-plugin-pwa leverer manifestet og Workbox-serviceworkeren, så appen kan have en installerbar identitet og holde appskallen tilgængelig inden for browserens PWA-model. Det visuelle udtryk er enkelt: et blåt resetsymbol, kanalvælgere og tydelige handlinger til installation, notifikationer og support.

Serviceworkeren understøtter appoplevelsen, men live-meddelelser, kontoadgang og betalinger kræver stadig en forbindelse. Notifikationssupport afhænger også af browseren, en sikker kontekst og enhedens tilladelsesmodel. PWA'en undgår en separat installation fra en appbutik uden at lade som om alle browsere har de samme baggrunds- eller notifikationsmuligheder. Det er en del af produktarbejdet at gøre disse grænser synlige, så en bruger ved, hvad der faktisk er installeret, før vedkommende er afhængig af det.

  • Resetibo på mobilen: AI-resetvarsler og opsætning af enhedsnotifikationer
  • Resetibos bidragsrangliste og Stripe-muligheder for support
  • Resetibos login-dialog med Google-godkendelse
Tre skærme fra den kørende PWA: opsætning af varsler, fællesskabsstøtte og Google-login. Ranglisten vises i sin faktiske tomme tilstand.

Google-oprettelse og login

Firebase Authentication driver Google-login til kontoadgang og støttebidrag. Besøgende kan udforske den offentlige side og forstå varslingsflowet, før de opretter en konto; bidragsflowet beder dem logge ind, før de går videre til Stripe. Opsætning af notifikationer har en anden grænse: callable-funktionen til push-abonnementer kan gemme browserens abonnement uden at kræve en Google-konto, mens en godkendt bruger kan få abonnementet knyttet til sin konto. En eksisterende Google-konto gør tilbagevendende adgang og betalingsbekræftelse til dele af det samme flow, uden at produktet skal oprette et separat system med adgangskoder.

Notifikationer, der respekterer enheden

Brugere vælger deres varslingskanaler og aktiverer udtrykkeligt notifikationer på enheden. En push-serviceworker modtager web push-beskeder, mens brugerfladen giver installationsvejledning, feedback om tilladelser og en lydtest. De valgte kanaler gemmes for enheden, og abonnementer kan deaktiveres i Indstillinger. Flowet behandler opsætningen som brugerens beslutning i stedet for en usynlig standard, og Google-login gøres ikke til et krav for at modtage varsler.

Den forskel betyder noget på en telefon: en systemnotifikation følger enhedens tilladelses-, Fokus- og lydløse indstillinger. Sirenen afspilles, mens Resetibo er åben. Produktet forklarer disse begrænsninger i stedet for at love en alarm, der tilsidesætter styresystemet. Overvågningsvisningen viser også forsinkede kontroller og ufuldstændig kildedækning og kan linke til den oprindelige meddelelse, så brugeren kan skelne en aktuel besked fra en midlertidigt utilgængelig overvågning.

Stripe-betalinger og en bidragsrangliste

Støtte er valgfri. En bidragyder vælger et beløb, kan tilføje en offentlig besked, logger ind med Google efter behov og fortsætter til Stripe-hosted Checkout for en engangsbetaling. Det er et flow til fællesskabsstøtte, ikke et abonnementskrav for at bruge de gratis varsler. Overgangen til Checkout holdes adskilt fra opsætningen af varsler, så en besøgende kan bruge kerneproduktet uden først at skulle tage stilling til en betaling.

Ranglisten sorterer støtter efter deres samlede bidrag og opdateres efter bekræftede betalinger. Firebase gemmer applikationsdata, mens backend-funktioner forbinder betalingsflowet med den offentlige rangliste. Brugerfladen gør det tydeligt, at bidragyderens navn og besked bliver offentlige, før betalingen gennemføres, og tomtilstanden forklarer, hvad der sker, før det første bekræftede bidrag.

Teknikken bag flowet

  • Frontend: React 19, JavaScript og Vite 7.
  • PWA: vite-plugin-pwa, et webapp-manifest og Workbox med en dedikeret push-serviceworker.
  • Identitet og data: Firebase Authentication med Google-login samt Cloud Firestore.
  • Backend: Firebase Cloud Functions, der kører Node.js 22.
  • Betalinger: Stripe-hosted Checkout og backend-behandling af betalinger.
  • Notifikationer: web push med web-push-biblioteket og browsernes notifikations-API'er.

Det har vi bygget

Resetibo forbinder en offentlig varslingsside, en installerbar PWA, Google-kontoadgang, tilvalgte notifikationer, oplysninger om kildestatus, Stripe-betalinger og en bidragsrangliste. Leverancen omfatter hele vejen fra første besøg til en konfigureret enhed: at forklare den uafhængige tjeneste, lade folk vælge kanaler, guide installation og tilladelsesopsætning, vise overvågningens begrænsninger og gøre støtten valgfri og gennemsigtig. Værdien ligger i, hvordan delene fungerer sammen: besøgende kan forstå tjenesten, før de logger ind, gøre enheden klar, før de er afhængige af varsler, og se, hvordan fællesskabsstøtten vises offentligt.

Udforsk Resetibo, eller læs mere om vores webudvikling og automatisering og integrationer.