نشر تطبيقات الويب التقدمية

# تثبيت Netlify CLI npm install -g netlify-cli # بناء PWA الخاص بك npm run build # النشر على Netlify netlify deploy --prod --dir=build # أو الاتصال بـ Git للنشر التلقائي netlify init

# netlify.toml - ملف التكوين [build] publish = "build" command = "npm run build" [[redirects]] from = "/*" to = "/index.html" status = 200 [[headers]] for = "/service-worker.js" [headers.values] Cache-Control = "public, max-age=0, must-revalidate" [[headers]] for = "/manifest.json" [headers.values] Content-Type = "application/manifest+json" Cache-Control = "public, max-age=0, must-revalidate" [[headers]] for = "/static/*" [headers.values] Cache-Control = "public, max-age=31536000, immutable" [[headers]] for = "/*" [headers.values] X-Frame-Options = "DENY" X-Content-Type-Options = "nosniff" X-XSS-Protection = "1; mode=block" Referrer-Policy = "strict-origin-when-cross-origin"

# تثبيت Vercel CLI npm install -g vercel # البناء والنشر vercel --prod # أو استخدام تكامل Git # ادفع إلى GitHub واربط المستودع في لوحة تحكم Vercel

// vercel.json - ملف التكوين { "version": 2, "builds": [ { "src": "package.json", "use": "@vercel/static-build", "config": { "distDir": "build" } } ], "routes": [ { "src": "/service-worker.js", "headers": { "cache-control": "public, max-age=0, must-revalidate" }, "dest": "/service-worker.js" }, { "src": "/manifest.json", "headers": { "content-type": "application/manifest+json", "cache-control": "public, max-age=0, must-revalidate" }, "dest": "/manifest.json" }, { "src": "/static/(.*)", "headers": { "cache-control": "public, max-age=31536000, immutable" }, "dest": "/static/$1" }, { "src": "/(.*)", "dest": "/index.html" } ], "headers": [ { "source": "/(.*)", "headers": [ { "key": "X-Content-Type-Options", "value": "nosniff" }, { "key": "X-Frame-Options", "value": "DENY" }, { "key": "X-XSS-Protection", "value": "1; mode=block" } ] } ] }

# تثبيت Firebase CLI npm install -g firebase-tools # تسجيل الدخول إلى Firebase firebase login # تهيئة مشروع Firebase firebase init hosting # حدد الخيارات: # - ما هو المجلد العام الذي تريد استخدامه؟ build # - التكوين كتطبيق من صفحة واحدة؟ نعم # - إعداد عمليات البناء التلقائية مع GitHub؟ (اختياري) نعم # بناء تطبيقك npm run build # النشر على Firebase firebase deploy --only hosting

// firebase.json - ملف التكوين { "hosting": { "public": "build", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ], "headers": [ { "source": "/service-worker.js", "headers": [ { "key": "Cache-Control", "value": "public, max-age=0, must-revalidate" } ] }, { "source": "/manifest.json", "headers": [ { "key": "Content-Type", "value": "application/manifest+json" }, { "key": "Cache-Control", "value": "public, max-age=0, must-revalidate" } ] }, { "source": "**/*.@(jpg|jpeg|gif|png|svg|webp)", "headers": [ { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" } ] }, { "source": "**/*.@(js|css)", "headers": [ { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" } ] }, { "source": "**", "headers": [ { "key": "X-Content-Type-Options", "value": "nosniff" }, { "key": "X-Frame-Options", "value": "SAMEORIGIN" }, { "key": "X-XSS-Protection", "value": "1; mode=block" } ] } ] } }

# تثبيت Certbot (Ubuntu/Debian) sudo apt-get update sudo apt-get install certbot python3-certbot-nginx # الحصول على شهادة SSL sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com # يتم إعداد التجديد التلقائي بشكل افتراضي # اختبار عملية التجديد sudo certbot renew --dry-run # تكوين Nginx لـ PWA server { listen 443 ssl http2; server_name yourdomain.com www.yourdomain.com; ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem; root /var/www/html; index index.html; # Service worker location /service-worker.js { add_header Cache-Control "public, max-age=0, must-revalidate"; add_header Content-Type "application/javascript"; } # Manifest location /manifest.json { add_header Content-Type "application/manifest+json"; add_header Cache-Control "public, max-age=0, must-revalidate"; } # الأصول الثابتة location /static/ { add_header Cache-Control "public, max-age=31536000, immutable"; } # احتياطي SPA location / { try_files $uri $uri/ /index.html; } # رؤوس الأمان add_header X-Frame-Options "DENY" always; add_header X-Content-Type-Options "nosniff" always; add_header X-XSS-Protection "1; mode=block" always; add_header Referrer-Policy "strict-origin-when-cross-origin" always; } # إعادة توجيه HTTP إلى HTTPS server { listen 80; server_name yourdomain.com www.yourdomain.com; return 301 https://$server_name$request_uri; }

// استراتيجية الإصدار في Service Worker const CACHE_VERSION = 'v2.0.1'; // قم بتحديث هذا مع كل نشر const CACHE_NAME = `pwa-cache-${CACHE_VERSION}`; // حذف ذاكرات التخزين المؤقت القديمة عند التفعيل self.addEventListener('activate', (event) => { event.waitUntil( caches.keys().then((cacheNames) => { return Promise.all( cacheNames .filter((name) => name.startsWith('pwa-cache-')) .filter((name) => name !== CACHE_NAME) .map((name) => caches.delete(name)) ); }) ); });

# مثال على قواعد صفحة Cloudflare # القاعدة 1: Service Worker (بدون تخزين مؤقت) URL: *yourdomain.com/service-worker.js Cache Level: Bypass Browser Cache TTL: Respect Existing Headers # القاعدة 2: Manifest (بدون تخزين مؤقت) URL: *yourdomain.com/manifest.json Cache Level: Bypass Browser Cache TTL: Respect Existing Headers # القاعدة 3: الأصول الثابتة (تخزين كل شيء مؤقتًا) URL: *yourdomain.com/static/* Cache Level: Cache Everything Edge Cache TTL: 1 year Browser Cache TTL: 1 year # القاعدة 4: ملفات HTML (بدون تخزين مؤقت) URL: *yourdomain.com/*.html Cache Level: Bypass Browser Cache TTL: Respect Existing Headers