PWA推送通知完整实现提示词示例：用AI生成留存率提升代码
代码预览
提示词
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.
这个提示词用于生成一套完整的渐进式网页应用推送通知演示，涵盖从服务工作线程注册、VAPID 密钥配置、订阅与取消订阅交互，到模拟发送测试通知的全流程实现。生成的代码不依赖任何前端框架，纯粹以原生 HTML、CSS 和 JavaScript 构建，非常适合想要快速理解推送通知底层机制、又不想被复杂工具链干扰的开发者。界面采用磨砂玻璃风格的卡片布局，视觉现代且易于定制。
实际使用场景非常广泛：无论是电商平台希望提升用户回访率、内容平台想要推送新文章提醒，还是 SaaS 产品需要发送操作状态通知，这个提示词生成的示例都能作为快速上手的技术参考。你可以将生成的代码直接部署到静态托管服务上验证效果，也可以把订阅逻辑接入自己的后端服务替换模拟端点。该提示词适合在 Claude 或 GPT-4o 等具备较强代码生成能力的模型上运行，建议同时要求模型补充离线降级页面，以保证完整的离线体验。
提示词解读
这个提示词用于生成一套完整的渐进式网页应用推送通知演示，涵盖从服务工作线程注册、VAPID 密钥配置、订阅与取消订阅交互，到模拟发送测试通知的全流程实现。生成的代码不依赖任何前端框架，纯粹以原生 HTML、CSS 和 JavaScript 构建，非常适合想要快速理解推送通知底层机制、又不想被复杂工具链干扰的开发者。界面采用磨砂玻璃风格的卡片布局，视觉现代且易于定制。
实际使用场景非常广泛：无论是电商平台希望提升用户回访率、内容平台想要推送新文章提醒，还是 SaaS 产品需要发送操作状态通知，这个提示词生成的示例都能作为快速上手的技术参考。你可以将生成的代码直接部署到静态托管服务上验证效果，也可以把订阅逻辑接入自己的后端服务替换模拟端点。该提示词适合在 Claude 或 GPT-4o 等具备较强代码生成能力的模型上运行，建议同时要求模型补充离线降级页面，以保证完整的离线体验。
这个提示对您有帮助吗？
评论
评论将在审核后显示
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選