add-mobile

Name: add-mobile
Availability: InStock
Author: marcoapereirav-arch

Add PWA installation and push notifications to Next.js projects.

Updated Aug 23, 2026

Search Tags:#supabase #nextjs #pwa #service-worker #push-notifications #web-push #vapid-keys

Ready to run

npx skills add https://github.com/marcoapereirav-arch/nvision-saas-factory --skill add-mobile-marcoapereirav-arch

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: add-mobile
Source: https://github.com/marcoapereirav-arch/nvision-saas-factory/tree/main/saas-factory/.claude/skills/add-mobile
Command: npx skills add https://github.com/marcoapereirav-arch/nvision-saas-factory --skill add-mobile-marcoapereirav-arch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Convert a standard Next.js web app into a production-ready Progressive Web App (PWA) with a native-like install experience and integrated push notifications, reducing native app friction and improving user engagement.

Core Features & Use Cases

Create a manifest and service worker to enable installability, offline caching, and reliable push messages.
Integrate with Supabase for user profiles and authenticated push subscriptions, and support server-side delivery via web-push.
Use cases include onboarding users with install prompts, sending targeted notifications, and maintaining app-like behavior across devices.

Quick Start

Run the full Golden Path to convert your Next.js app into a production-ready PWA with push notifications.

Frequently Asked Questions about add-mobile

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add push notifications to a Next.js PWA?▼

To add push notifications to a Next.js PWA, you need a service worker, a web manifest, and server-side delivery via web-push. This process integrates Supabase for storing authenticated push subscriptions and uses VAPID keys for secure messaging.

What's the best way to make a Next.js web app installable?▼

Making a Next.js web app installable requires creating a web manifest and registering a service worker for offline caching. This approach provides a native-like install experience and enables app-like behavior across devices without native app friction.

Do I need Supabase to set up web push in Next.js?▼

Supabase is used to manage user profiles and authenticated push subscriptions for the web push setup. You need Supabase migrations and a service role key to securely handle subscription storage and server-side notification delivery.

Can I use VAPID keys for sending web push notifications directly from Next.js API routes?▼

Yes, you can use VAPID keys to send web push notifications directly from Next.js API routes. The server-side push delivery uses the web-push library, requiring environment configuration for VAPID public and private keys to authorize the message payload.

What are the requirements to convert a standard web app into a Progressive Web App?▼

Converting a standard web app into a Progressive Web App requires adding a manifest file, a service worker for offline caching, and client registration components. You also need API routes for handling subscriptions and sending push messages.

Why are my Next.js PWA push notifications not working?▼

Push notifications in a Next.js PWA fail if the service worker registration is missing or VAPID environment keys are incorrectly configured. Ensure your Supabase service role key is valid and your server-side API routes properly store and retrieve subscriptions.