تطبيقات الويب التقدمية

توزيع متجر التطبيقات

20 دقيقة الدرس 25 من 30

توزيع تطبيقات الويب التقدمية على متاجر التطبيقات

يمكن الآن توزيع تطبيقات الويب التقدمية من خلال متاجر التطبيقات التقليدية، مما يمنحك الوصول إلى مليارات المستخدمين على منصات Android وWindows. يغطي هذا الدرس الأدوات والعمليات لنشر PWA الخاص بك على متاجر التطبيقات الرئيسية.

فهم TWA (نشاط الويب الموثوق)

تسمح لك أنشطة الويب الموثوقة بتغليف PWA الخاص بك كتطبيق Android أصلي يعمل في Chrome Custom Tab بدون أي واجهة متصفح.

فوائد TWA:
  • تجربة PWA بملء الشاشة بدون واجهة المتصفح
  • الوصول إلى ميزات الجهاز من خلال Web APIs
  • مشاركة التخزين وملفات تعريف الارتباط مع نسخة الويب
  • التحديثات التلقائية من خلال نشر PWA
  • لا حاجة لتعلم تطوير Android الأصلي
  • قاعدة شفرة واحدة للويب وAndroid

استخدام PWABuilder

PWABuilder هي أداة Microsoft الرسمية لتغليف PWAs لمتاجر تطبيقات متعددة بأقل قدر من التكوين.

# استخدام واجهة PWABuilder على الويب 1. قم بزيارة https://www.pwabuilder.com 2. أدخل عنوان URL لـ PWA الخاص بك (يجب أن يكون مباشرًا مع HTTPS) 3. انقر على "Start" لتحليل PWA الخاص بك 4. راجع تقرير Manifest وService Worker 5. أصلح أي مشاكل أبلغ عنها PWABuilder 6. انقر على "Package for Store" 7. حدد المنصات المستهدفة: - Android (Google Play) - Windows (Microsoft Store) - iOS (دعم محدود) # سيقوم PWABuilder بإنشاء: - ملفات Android APK/AAB - حزمة Windows MSIX - قشرة تطبيق iOS (تتطلب Xcode) - تعليمات التوقيع - أصول قائمة المتجر
نصيحة احترافية: يتحقق PWABuilder تلقائيًا من PWA الخاص بك مقابل متطلبات المتجر ويقدم توصيات قابلة للتنفيذ لتحسين تطبيقك قبل التقديم.

استخدام Bubblewrap لـ Android

Bubblewrap هي أداة Google الرسمية لإنشاء TWAs. توفر تحكمًا أكبر من PWABuilder لحالات الاستخدام المتقدمة.

# تثبيت Bubblewrap CLI npm install -g @bubblewrap/cli # تهيئة مشروع TWA bubblewrap init --manifest https://yourpwa.com/manifest.json # أجب على المطالبات: Domain: yourpwa.com App name: My PWA Package name: com.example.mypwa Icon URL: https://yourpwa.com/icon-512.png Theme color: #4285F4 Background color: #FFFFFF Start URL: / Display mode: standalone Orientation: default Status bar color: #4285F4 # إنشاء مشروع Android bubblewrap build # الناتج: # - app-release-signed.apk (للاختبار) # - app-release-bundle.aab (لـ Play Store)
# تحديث TWA الموجود bubblewrap update # بناء النسخة المحدثة bubblewrap build # التثبيت على جهاز متصل للاختبار bubblewrap install

النشر على متجر Google Play

عملية نشر PWA الخاص بك على متجر Google Play كـ TWA.

المتطلبات الأساسية:
  • حساب مطور Google Play (رسوم لمرة واحدة بقيمة 25 دولارًا)
  • PWA مباشر مع manifest.json صالح
  • Service Worker مع دعم وضع عدم الاتصال
  • HTTPS مفعّل
  • التحقق من Digital Asset Links
  • مفتاح توقيع التطبيق
# الخطوة 1: إنشاء مفتاح توقيع التطبيق keytool -genkey -v -keystore my-release-key.keystore \ -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 # الخطوة 2: بناء AAB موقّع bubblewrap build # الخطوة 3: إعداد Digital Asset Links # أضف إلى موقعك على /.well-known/assetlinks.json [{ "relation": ["delegate_permission/common.handle_all_urls"], "target": { "namespace": "android_app", "package_name": "com.example.mypwa", "sha256_cert_fingerprints": [ "YOUR_SHA256_FINGERPRINT" ] } }] # الحصول على بصمة SHA256 keytool -list -v -keystore my-release-key.keystore # الخطوة 4: إنشاء قائمة Play Store 1. انتقل إلى Google Play Console 2. أنشئ تطبيقًا جديدًا 3. املأ تفاصيل قائمة المتجر: - اسم التطبيق - وصف قصير (80 حرفًا كحد أقصى) - وصف كامل (4000 حرف كحد أقصى) - لقطات شاشة (2 كحد أدنى) - صورة مميزة (1024x500) - أيقونة التطبيق (512x512) 4. تعيين تصنيف المحتوى 5. اختر فئة التطبيق 6. تعيين التسعير (مجاني/مدفوع) 7. رفع ملف AAB 8. أكمل سياسة الخصوصية 9. قدّم للمراجعة # الخطوة 5: إدارة الإصدار - الاختبار الداخلي (حتى 100 مختبر) - الاختبار المغلق (ألفا/بيتا) - الاختبار المفتوح - إصدار الإنتاج
مهم: يتطلب Google Play من PWA الخاص بك اجتياز التحقق من Digital Asset Links. هذا يثبت أنك تملك كلاً من الموقع والتطبيق. بدون هذا، سيفتح التطبيق في علامة تبويب المتصفح بدلاً من ملء الشاشة.

النشر على Microsoft Store

يتمتع Microsoft Store بدعم ممتاز لـ PWA ويسمح بنشر تطبيقات الويب مباشرة.

# المتطلبات الأساسية: - حساب Microsoft Partner Center (رسوم لمرة واحدة بقيمة 19 دولارًا) - PWA مباشر مع Manifest صالح - Service Worker - HTTPS # استخدام PWABuilder: 1. قم بزيارة https://www.pwabuilder.com 2. أدخل عنوان URL لـ PWA 3. انقر على "Package for Store" 4. اختر "Windows" 5. قم بتنزيل حزمة MSIX 6. رفع إلى Partner Center # العملية اليدوية: 1. انتقل إلى Microsoft Partner Center 2. أنشئ تطبيقًا جديدًا 3. احجز اسم التطبيق 4. املأ تفاصيل المنتج: - الوصف - لقطات الشاشة (1366x768 أو أعلى) - أيقونة التطبيق - الفئة - سياسة الخصوصية 5. رفع حزمة MSIX 6. أكمل تصنيفات العمر 7. قدّم للمصادقة # سيتم مراجعة التطبيق خلال 24-48 ساعة

قيود iOS والحلول البديلة

لدى iOS دعم محدود لـ PWAs، لكن لا يزال بإمكانك إنشاء تطبيق قابل للتثبيت مع بعض القيود.

قيود PWA على iOS:
  • لا توجد إشعارات دفع (حتى iOS 16.4+ بدعم محدود)
  • حد تخزين 50 ميجابايت لـ Cache API
  • يتم مسح Service Worker بعد 7 أيام من عدم النشاط
  • لا يوجد مزامنة في الخلفية
  • لا يوجد وصول إلى ميزات أصلية عبر Web APIs
  • لا يمكن نشره في App Store كـ PWA
<!-- تحسين PWA لتثبيت iOS --> <head> <!-- Manifest قياسي --> <link rel="manifest" href="/manifest.json"> <!-- وسوم meta الخاصة بـ iOS --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-title" content="My PWA"> <!-- شاشات البداية لـ iOS (أحجام متعددة مطلوبة) --> <link rel="apple-touch-startup-image" href="/splash/iphone5.png" media="(device-width: 320px) and (device-height: 568px)"> <link rel="apple-touch-startup-image" href="/splash/iphone6.png" media="(device-width: 375px) and (device-height: 667px)"> <link rel="apple-touch-startup-image" href="/splash/iphoneplus.png" media="(device-width: 414px) and (device-height: 736px)"> <link rel="apple-touch-startup-image" href="/splash/iphonex.png" media="(device-width: 375px) and (device-height: 812px)"> <link rel="apple-touch-startup-image" href="/splash/iphonexr.png" media="(device-width: 414px) and (device-height: 896px)"> <link rel="apple-touch-startup-image" href="/splash/iphonexsmax.png" media="(device-width: 414px) and (device-height: 896px)"> <link rel="apple-touch-startup-image" href="/splash/ipad.png" media="(device-width: 768px) and (device-height: 1024px)"> <link rel="apple-touch-startup-image" href="/splash/ipadpro1.png" media="(device-width: 834px) and (device-height: 1112px)"> <link rel="apple-touch-startup-image" href="/splash/ipadpro2.png" media="(device-width: 1024px) and (device-height: 1366px)"> <!-- أيقونة تطبيق iOS --> <link rel="apple-touch-icon" href="/icons/icon-180x180.png"> </head>

تحسين متجر التطبيقات (ASO)

قم بتحسين قائمة متجر التطبيقات الخاصة بك لزيادة الرؤية والتنزيلات.

أفضل ممارسات ASO:
  1. اسم التطبيق: قم بتضمين الكلمة الأساسية الرئيسية (30 حرفًا كحد أقصى على Google Play)
  2. الوصف القصير: عرض قيمة واضح (80 حرفًا)
  3. الوصف الكامل: الميزات والفوائد والكلمات الأساسية (4000 حرف)
  4. الكلمات الأساسية: ابحث عن مصطلحات البحث الشائعة في فئتك
  5. لقطات الشاشة: أظهر الميزات الرئيسية مع نصوص تراكبية
  6. الصورة المميزة: لافتة لافتة للنظر لقوائم المتجر
  7. أيقونة التطبيق: بسيطة وقابلة للتعرف وتتبع إرشادات المنصة
  8. معاينة الفيديو: عرض توضيحي لمدة 30 ثانية لوظائف التطبيق
  9. التقييمات والمراجعات: شجع المراجعات الإيجابية من المستخدمين
  10. التحديثات المنتظمة: تظهر التطوير النشط

مراقبة أداء المتجر

تتبع أداء تطبيقك عبر متاجر التطبيقات المختلفة.

// تتبع تثبيتات التطبيق من المتاجر if (window.matchMedia('(display-mode: standalone)').matches) { // التطبيق مثبت (يعمل كتطبيق مستقل) gtag('event', 'app_open', { source: 'pwa_installed' }); } // تتبع إحالات المتجر const urlParams = new URLSearchParams(window.location.search); const source = urlParams.get('utm_source'); if (source === 'google_play') { gtag('event', 'install_source', { store: 'google_play' }); } else if (source === 'microsoft_store') { gtag('event', 'install_source', { store: 'microsoft_store' }); } // تتبع مطالبة تثبيت PWA window.addEventListener('beforeinstallprompt', (e) => { gtag('event', 'install_prompt_shown'); }); window.addEventListener('appinstalled', () => { gtag('event', 'app_installed', { method: 'web_install_prompt' }); });
تمرين:
  1. استخدم PWABuilder لتحليل PWA الخاص بك
  2. أنشئ حزمة Android باستخدام Bubblewrap
  3. قم بإعداد Digital Asset Links لنطاقك
  4. أنشئ حساب مطور Google Play
  5. رفع AAB إلى Play Console كاختبار داخلي
  6. اختبر TWA على جهاز Android
  7. أنشئ حزمة Windows باستخدام PWABuilder
  8. أنشئ قائمة متجر مع لقطات شاشة وأوصاف
  9. أضف وسوم meta الخاصة بـ iOS لدعم أفضل على iOS
  10. نفذ تتبع أداء المتجر
المتطلبات القانونية: تأكد من أن تطبيقك يتوافق مع سياسات المتجر بما في ذلك سياسة الخصوصية والإفصاح عن جمع البيانات وإرشادات المحتوى. يتطلب كل من Google Play وMicrosoft Store عنوان URL لسياسة خصوصية يمكن الوصول إليه بشكل عام.
نصيحة للنجاح: ابدأ بالاختبار الداخلي على Google Play. شارك رابط الاختبار مع الأصدقاء والزملاء لجمع التعليقات قبل الإصدار العام. استخدم ملاحظاتهم لتحسين قائمة متجرك وتجربة التطبيق.
الدرس السابق نشر تطبيقات الويب التقدمية
الدرس التالي بناء مشروع PWA (الجزء الأول)
العودة للدورة