الواجهات والتصميم

Progressive Web App Setup

حوّل تطبيق الويب بتاعك لـ PWA مع دعم العمل بدون إنترنت ومطالبات التثبيت وإشعارات الدفع وتجربة شبيهة بالتطبيقات.

Claude Code Cursor Copilot Windsurf

نظرة عامة

تطبيقات الويب التقدمية (PWAs) تجمع بين انتشار الويب وقدرات التطبيقات الأصلية. يمكن لعملاء الذكاء الاصطناعي إنشاء ملف manifest لتطبيق الويب المطلوب، وتنفيذ Service Workers للتخزين المؤقت بدون إنترنت، وإعداد مطالبات التثبيت، وتكوين إشعارات الدفع لإنشاء تجارب شبيهة بالتطبيقات من تطبيق الويب الحالي.

المتطلبات الأساسية لـ PWA هي ملف manifest لتطبيق الويب (manifest.json) و Service Worker و HTTPS. يمكن لعميل الذكاء الاصطناعي إنشاء الملف مع الأيقونات الصحيحة وألوان الثيم وأوضاع العرض والاختصارات. يمكنه تنفيذ استراتيجيات تخزين مؤقت لـ Service Worker (Cache First، Network First، Stale While Revalidate) باستخدام Workbox أو واجهات Service Worker العادية.

ميزات PWA الحديثة تشمل المزامنة في الخلفية لإرسال النماذج بدون إنترنت، والمزامنة الدورية في الخلفية لتحديثات المحتوى، و Share Target API لاستقبال المحتوى المشارك، و File Handling API. يمكن لعملاء الذكاء الاصطناعي تنفيذ هذه الميزات بشكل تدريجي، وتحويل تطبيق الويب الحالي إلى PWA بدون إعادة كتابة كاملة.

لمن هذه الأداة؟

مطورين بيخلوا تطبيقات الويب الحالية قابلة للتثبيت على الموبايل
فرق بتبني تطبيقات offline-first لشبكات غير مستقرة
مهندسين بينفذوا تنقل وانتقالات شبيهة بالتطبيقات
شركات عايزة توزيع شبيه بمتجر التطبيقات بدون تطوير أصلي

التثبيت

إعداد Claude Code

npm install -D workbox-cli
npx workbox-cli wizard

الإعدادات

// manifest.json
{
  "name": "My Progressive Web App",
  "short_name": "MyPWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0f172a",
  "theme_color": "#6366f1",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

زيارة المصدر (web.dev)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

الواجهات والتصميم

Figma MCP Server

تحويل تصاميم Figma إلى كود مباشرة مع الحفاظ على الأنماط والمكونات.

Claude Code Cursor Windsurf

الواجهات والتصميم

Storybook Component Docs

إنشاء توثيق تفاعلي لمكونات الواجهة مع أمثلة حية وحالات استخدام.

Claude Code Copilot Cursor

الواجهات والتصميم

Tailwind CSS IntelliSense

إكمال تلقائي ذكي لأصناف Tailwind مع معاينة الألوان والقيم أثناء الكتابة.

Claude Code Copilot Cursor