skills.rest
JocDLC
JocDLCCOMMUNITY
Explore all skills by this author →
GitHub

add-mobile

Convert a Next.js web app into an installable PWA with push notifications.

4|Updated Apr 2, 2026
Search Tags:#supabase#pwa#service-worker#push-notifications#web-push#vapid-keys
One-click install
npx skills add https://github.com/JocDLC/saas-factory-v5 --skill add-mobile
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-mobile
Source: https://github.com/JocDLC/saas-factory-v5/tree/main/.claude/skills/add-mobile
Command: npx skills add https://github.com/JocDLC/saas-factory-v5 --skill add-mobile

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts a web app into an installable PWA with a complete push notification system, enabling offline access and proactive user engagement.

Core Features & Use Cases

  • PWA installation: Adds to home screen and provides a standalone app experience.
  • Push notifications: Sends real-time messages to subscribed users via a standard web-push workflow.
  • Developer guidance: Provides a ready-to-use setup including manifest, service worker, API routes, and backend integration for subscription management.

Quick Start

Install and configure the PWA workflow in your Next.js project and enable push notifications with the provided setup steps.

Frequently Asked Questions about add-mobile

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

FAQPage Schema
How do I turn my Next.js web app into an installable PWA with push notifications?▼

To turn a Next.js web app into an installable PWA with push notifications, you need a service worker, web manifest, VAPID keys, and subscription APIs. This setup enables offline access, home-screen installation, and real-time user engagement via web-push.

What do I need to set up web push notifications in a PWA?▼

Setting up web push notifications in a PWA requires generating VAPID keys, configuring a service worker to receive messages, and creating backend storage for subscriptions. This standard web-push workflow delivers real-time messages to subscribed users.

Can I use Supabase to manage push notification subscriptions for my PWA?▼

Yes, you can use Supabase to manage push notification subscriptions for your PWA. The backend integration handles subscription storage, allowing your subscription APIs to securely store and retrieve user endpoints for delivering web-push messages.

Does adding a service worker for PWA installation provide offline access?▼

Yes, adding a service worker for PWA installation provides offline access. The service worker intercepts network requests, enabling your web application to function offline while also supporting home-screen installation for a standalone app experience.

What is the best way to configure VAPID keys for Next.js push notifications?▼

The best way to configure VAPID keys for Next.js push notifications is through a complete push notification system setup. This involves generating the keys, integrating them with your web-push library, and wiring them into your subscription APIs.

Why does my PWA push notification subscription fail to deliver messages?▼

PWA push notification subscriptions fail to deliver messages when the backend storage is misconfigured or VAPID keys are mismatched. A complete push system requires correctly implemented subscription APIs and valid web-push integration to route messages successfully.

Related Skills

Explore More Software Engineering Skills→
jamshujamshu
4

add-odoo-model

Add an Odoo Studio model to an existing PWA project.

Community
Advanced
flpbaladaflpbalada
23

self-initiated-triggers

Design internal triggers for habit formation and sustained engagement.

Community
Basic
flavien-iaflavien-ia
34

add-push-notification

Configure VAPID keys, subscription tables, and service worker handlers for Web Push in Next.js.

Community
Advanced
sebc-devsebc-dev

capacitor-push-notifications

Configure FCM and APNs and send push notifications for Capacitor apps.

Community
Advanced