PWA Push Notifications: Prompt y Código con IA
VISTA DE CÓDIGO
Prompt
Create a complete PWA push notification implementation demo. Include: 1) Service worker registration with push event listener, 2) VAPID key generation (use hardcoded for demo), 3) Subscribe/unsubscribe UI with button, 4) Send push notification (simulated via fetch to a mock endpoint or self-contained logic), 5) Offline fallback page. Use clean HTML/CSS/JS, no frameworks. Show notification permission request, subscription state display, and a 'Send Test Notification' button. Style as a modern card UI with glassmorphism.
Este prompt genera una implementación completa y autocontenida de notificaciones push para Progressive Web Apps (PWA) sin depender de ningún framework externo. La solución incluye registro de service worker, claves VAPID predefinidas para demostración, interfaz de suscripción y desuscripción, simulación de envío de notificaciones y una página de respaldo para modo sin conexión. El resultado es ideal para desarrolladores que quieren entender el flujo completo de las notificaciones push antes de integrarlo en un proyecto real, ya que todo funciona en un único archivo con estilos glassmorphism modernos.
Los casos de uso más comunes son prototipos rápidos, demos para clientes, materiales educativos y bases de código que se pueden extender hacia producción conectando un backend real con VAPID. Se recomienda usar modelos con alta capacidad de generación de código como GPT-4o o Claude Sonnet para obtener un resultado funcional desde el primer intento. Para variaciones útiles, se puede pedir soporte para múltiples suscriptores, integración con Firebase Cloud Messaging o añadir lógica de segmentación por tópicos.
Resumen del prompt
Este prompt genera una implementación completa y autocontenida de notificaciones push para Progressive Web Apps (PWA) sin depender de ningún framework externo. La solución incluye registro de service worker, claves VAPID predefinidas para demostración, interfaz de suscripción y desuscripción, simulación de envío de notificaciones y una página de respaldo para modo sin conexión. El resultado es ideal para desarrolladores que quieren entender el flujo completo de las notificaciones push antes de integrarlo en un proyecto real, ya que todo funciona en un único archivo con estilos glassmorphism modernos.
Los casos de uso más comunes son prototipos rápidos, demos para clientes, materiales educativos y bases de código que se pueden extender hacia producción conectando un backend real con VAPID. Se recomienda usar modelos con alta capacidad de generación de código como GPT-4o o Claude Sonnet para obtener un resultado funcional desde el primer intento. Para variaciones útiles, se puede pedir soporte para múltiples suscriptores, integración con Firebase Cloud Messaging o añadir lógica de segmentación por tópicos.
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選