نشر PWAs في متاجر التطبيقات الرئيسية: الأسباب والأسباب

بدءًا من متجر Google Play ، قفز سوق التطبيقات واحدًا تلو الآخر إلى عربة الترحيب بتطبيقات الويب التقدمية (ما هو تطبيق الويب التقدمي؟) في متجرهم ، مما يجعله نهج الانتقال الجديد لتسليم البرامج. مع كل هذا في اللعب ، سيكون من الضياع عدم الاستفادة من هذه التكنولوجيا الجديدة لتوسيع مدى وصول تطبيقك بشكل أفضل.

لمنحك منظورًا أكثر وضوحًا حول حركة تطبيق الويب التقدمي بأكملها ، وتحديداً عملية النشر ، سنقوم اليوم بمراجعة الحالة الحالية لـ PWAs في أسواق التطبيقات الرئيسية بالإضافة إلى كيفية نشر PWA إلى المتاجر المذكورة.

لماذا يجب عليك نشر تطبيق الويب التقدمي الخاص بك في متاجر التطبيقات الكبرى؟

كان من المعتاد أن تقتصر تطبيقات الويب التقدمية على عمليات تثبيت الويب (إضافة إلى الشاشة الرئيسية) فقط. ومع ذلك ، مع مرور الوقت ، بدأت أسواق التطبيقات مثل Google و Microsoft في التعرف على إمكانات PWAs واتخذت مبادرات للمضي قدمًا في تبني هذه التكنولوجيا في المستقبل.

إذا كانت لديك الإمكانيات والأموال ، فإن رأينا المهني هو أنه يجب عليك البحث عنها - اجعل PWA omni-platform. بعد كل شيء ، قفزت جميع العلامات التجارية الكبرى مثل Twitter و Uber و Spotify إلى عربة التسوق وقوبلت بنتائج ممتازة ، مما يثبت أن هذه التكنولوجيا في الواقع ليست كلها تسويقية وتستحق التفكير فيها. حتى أن Microsoft نفسها قطعت خطوة أخرى إلى الأمام من خلال التخطيط لجعل تطبيقات الويب التقدمية هي التجربة الأساسية في Windows.

 يُنصح بالقراءة : 12 من أفضل الأمثلة على تطبيقات الويب التقدمية.

كيف تنشر PWA الخاص بك إلى متاجر التطبيقات الكبرى

متجر جوجل بلاى

نظرًا لكونه رائدًا لحركة PWA ، فلن يكون من المستغرب أن نرى متجر Google Play يحمل أذرعًا مفتوحة لتطبيقات الويب التقدمية. مع وجود TWA (أنشطة الويب الموثوقة) في مكانها ، أصبح تسلسل النشر بأكمله أسهل بكثير ويجب أن ينتهي في وقت قصير.

متطلبات

• تم تثبيت Android Studio
• حساب Google Developer
• تطبيقات ويب تقدمية تعمل وفحص الجودة.

الخطوة 1 : قم بعمل نسخة من تطبيق TWA Starter Android وقم بتعديله

• استنساخ مشروع svgomg-twa باستخدام الأمر التالي:

 استنساخ بوابة https://github.com/GoogleChromeLabs/svgomg-twa.git

• قم باستيراد المشروع إلى Android Studio باستخدام ملف > جديد > استيراد المشروع .

في /app/build.gradle ، قم بتعديل twaManifest وفقًا لغرضك. يمكن العثور على التفاصيل الخاصة بما يجب تغييره وكيفية تغييره في ملف build.gradle.

ملاحظة: يجب أن يتبع معرف applicationId تنسيق <com>.<your-brand>.<your-app>

بعد التعديلات ، يجب أن يبدو /app/build.gradle الخاص بك كما يلي:

 def twaManifest = [
    applicationId: "com.simicart.app" ،
    hostName: 'simicart.com' ، // المجال الذي يتم فتحه في TWA.
    launchUrl: '/' ، // مسار البداية لـ TWA. يجب أن تكون ذات صلة بالمجال.
    name: "SimiCart PWA" ، // الاسم المعروض على Android Launcher.
    themeColor: '# ED8A19' ، // اللون المستخدم لشريط الحالة.
    navigationColor: '# 303F9F' ، // اللون المستخدم لشريط التنقل.
    backgroundColor: '#bababa' ، // اللون المستخدم لخلفية شاشة البداية.
    enableNotifications: false ، // اضبط على صواب لتمكين تفويض الإخطار.
    // أضف اختصارات لتطبيقك هنا. يجب أن يتضمن كل اختصار الحقول التالية:
    // - name: سلسلة ستظهر في الاختصار.
    // - short_name: سلسلة أقصر مستخدمة إذا | name | طويل جدا.
    // - url: المسار المطلق لعنوان URL لتشغيل التطبيق باستخدام (على سبيل المثال ، "/ create").
    // - icon: اسم المورد في المجلد القابل للرسم لاستخدامه كرمز.
    الاختصارات: [
        الاسم: "فتح SimiCart" ، 
        اسم_ قصير: "فتح" ، 
        url: '/ open'، 
        رمز: "دفقة"
    ]
و
    // مدة تلاشي الرسوم المتحركة بالمللي ثانية ليتم تشغيلها عند إزالة شاشة البداية.
    دفقة الشاشة تتلاشى المدة: 300
]

الخطوة 2 : إنشاء متجر مفاتيح وتحقق من ملف APK

تعد مخازن المفاتيح أو مفاتيح التحميل ضرورية للتحقق من ملف APK الخاص بك. لإنشاء متجر مفاتيح ، قم بتشغيل Android Studio وانتقل إلى Build → Generate Signed Bundle / APK واملأ الحقول المطلوبة.

بمجرد إنشاء Key Store ، ستحتاج إلى استخراج بصمة SHA256 منه باستخدام الأوامر التالية:

 keytool -list -v -keystore ~ ​​/ dlbr-keystore.jks -alias twa -storepass •••••• -keypass •••••• 

 نوع الإدخال: PrivateKeyEntry
...
بصمات الشهادة:
         SHA1: ...
         SHA256: 2A: 9B: A8: 64: 32: 0A: 69: 99 ...:؟ انسخ هذا الخط

الخطوة 3 : قم بتكوين ارتباط الأصول الرقمية

يلزم وجود رابط الأصول الرقمية للتحقق من ملكية محتوى الويب الخاص بك والذي يمكن استخدامه لاحقًا للربط بملف APK الخاص بك.

إنشاء ملف بيان

استخدم بصمة SHA256 التي استخرجتها سابقًا وقم بإنشاء ملف بيان باستخدام منشئ قائمة البيانات والمختبر.

بمجرد إنشاء ملف بيان ، فإن الخطوة التالية هي إنشاء ملف يمكن الوصول إليه بشكل عام يحتوي على معلومات من أداة الأصول الرقمية. يجب وضع الملف في مضيف الويب الخاص بك وفي هذا المكان:

 . well-known / assetlinks.json

يعتمد موقع هذا الملف على عملية إنشاء تطبيق الويب الخاص بك ، ولكن يجب أن يكون عادةً على الدلائل المنشورة ، أي الدلائل "العامة" أو "التوزيعات".

عند الانتهاء من كل شيء ، فإن الخطوة التالية والأخيرة التي يتعين عليك القيام بها هي نشر تطبيقك.

الخطوة 4 : إنشاء تطبيقك وإصداره على Google Play

باستخدام Google Play Console في الإعدادات الافتراضية ، انتقل إلى All Applications → Create Application .

قم بإنشاء اختبار داخلي

انتقل إلى إصدارات التطبيق ← مسار الاختبار الداخلي ← إنشاء إصدار لإنشاء مسار اختبار داخلي لتطبيقك.

إنشاء ملف APK موقّع

في Android Studio ، انتقل إلى Build → Generate Signed Bundle / APK واستخدم مخزن مفاتيح SHA256 الذي استخرجناه سابقًا. تأكد من تحديد كل من مربعي إصدار التوقيع.

قم بتحميل ملف APK

أنت الآن في نهاية هذه العملية. لتحميل ملف apk الخاص بك ، ما عليك سوى الانتقال إلى متجر Google Play وإصدارات التطبيق ← مسار الاختبار الداخلي ← تحرير الإصدار .

لا تنسى إكمال قائمة المتجر

يجب ملء جميع الحقول المطلوبة قبل إدراج تطبيقك في عملية المراجعة. هذه الحقول مطلوبة للحصول على معلومات مهمة مثل تفاصيل التسعير وقائمة المتجر وتقييم المحتوى وما إلى ذلك. عند اكتمال هذه العملية ، يجب أن ترى أربع علامات اختيار خضراء ️ تشير إلى ملء جميع الحقول المطلوبة.

وهذا كل شيء. PWA جاهز الآن للمراجعة وسيكون جاهزًا للتنزيل العام في غضون ساعات قليلة.

متجر تطبيقات آبل

من بين جميع أسواق التطبيقات الرئيسية ، قد يكون متجر تطبيقات Apple هو الأقل ترحيباً أو حتى معادياً لـ PWAs ، وهو نوع من السخرية بالنظر إلى أن ستيف جوبز كان أول من يرى مستقبلًا مليئًا بتطبيقات الويب التقدمية.

محرك Safari الكامل موجود داخل iPhone. وهكذا ، يمكنك كتابة تطبيقات Web 2.0 و Ajax المذهلة التي تبدو تمامًا وتتصرف تمامًا مثل التطبيقات الموجودة على iPhone. ويمكن أن تتكامل هذه التطبيقات تمامًا مع خدمات iPhone. يمكنهم إجراء مكالمة وإرسال بريد إلكتروني والبحث عن موقع على خرائط Google.

ستيف جوبز ، 2007

في iOS ، PWAs محدودة للغاية من حيث الميزات. لا يوجد دعم للإشعارات الفورية ، ولا يتم دعم بيان تطبيق الويب إلا جزئيًا ، وغالبًا ما تتجاهل الميزات الجديدة مثل معرض التطبيقات الجديد PWAs تمامًا. ولهذا السبب ، من المنطقي فقط أن PWA غير مرحب به في متجر تطبيقات Apple ، وفقًا لإرشادات مراجعة متجر التطبيقات من Apple:

يجب أن يشتمل تطبيقك على ميزات ومحتوى وواجهة مستخدم ترفعه إلى ما هو أبعد من موقع الويب المعاد تجميعه . إذا لم يكن تطبيقك مفيدًا أو فريدًا أو "يشبه التطبيق" بشكل خاص ، فإنه لا ينتمي إلى متجر التطبيقات.

الحد الأدنى من الوظائف ، إرشادات مراجعة متجر التطبيقات

نظرًا لأن Apple تبذل قصارى جهدها لتعطيل جميع إمكانات PWA ، فإن أي جهد لنشر PWA - حتى عند استخدام غلاف تطبيق محلي مثل Cordova - لا طائل من ورائه. في الوقت الحالي ، لا يسعنا إلا أن نأمل أن توفر إصدارات iOS المستقبلية دعمًا أفضل لـ PWA ، ولكن حتى الآن ، لا يمكن نشر PWA على متجر تطبيقات Apple ، ولهذا السبب يجب عليك التفكير في نهج التطبيق الأصلي بدلاً من ذلك إذا كان معظم جمهورك المستهدف يستخدم الأجهزة التي تعمل بنظام iOS.

 اقرأ المزيد: PWAs على iOS 14 Beta: تغييرات دقيقة

متجر مايكروسوفت

كما هو مذكور في Windows 10 و PWA: مستقبل مقالة توصيل البرامج ، تعمل Microsoft على وضع الأسس لمتجر تطبيقات الويب التقدمي لفترة طويلة ، وقد أصبح حقيقة واقعة خطوة بخطوة. تنتشر PWAs من العلامات التجارية الأكثر شهرة بالفعل في جميع أسواق التطبيقات وبدون أقل من النتائج المثالية للآخرين لمتابعة.

مثل Google ، ترحب Microsoft بـ PWAs وعلاوة على ذلك - حتى أنهم يخططون لنشر تطبيقات UWP الأصلية واستبدالها بتطبيقات مختلطة - وهو نوع من تطبيقات الويب التقدمية المغلفة في أصداف أصلية.

من الناحية النظرية ، لا ينبغي أن يتطلب نشر تطبيق الويب التقدمي الخاص بك على متجر Microsoft أي جهد على الإطلاق حيث كان من المقرر في الأصل أن تكون عملية تلقائية تستخدم Bing كآلية زحف لجودة PWAs. ومع ذلك ، لا يزال الأمر برمته في مرحلة تجريبية ولا يعمل بشكل فعال كما هو مخطط له ، ولهذا السبب ستحتاج إلى إرسال PWA يدويًا كحزمة تطبيقات Windows (.appx). ولكن لا تقلق ، فالعملية ليست محطمة للأعصاب مثل متجر تطبيقات معين .

متطلبات

• حساب Windows Dev Center
• PWABuilder
• تطبيق ويب تقدمي يعمل ويتم التحقق من جودته ويلبي سياسات المتجر

الخطوة 1 : حجز اسم لتطبيقك

الخطوة الأولى في نشر تطبيق في Microsoft Store هي حجز اسم. إذا كنت تتساءل عما سيحدث إذا قرر فتى مجنون حجز كل اسم موجود: لا تقلق ، سينتهي حجز الاسم بعد 3 أشهر.

املأ الحقول المطلوبة ولاحظها في مكان ما حيث ستكون هذه المعلومات مطلوبة لاحقًا.

الخطوة 2: إنشاء AppX باستخدام PWABuilder

كما ذكرنا سابقًا ، يعد PWABuilder طريقة رائعة لإنشاء حزمة وظيفية قابلة للنشر في أسواق التطبيقات الرئيسية. إنها إحدى الأدوات الأولى في السوق التي طورتها Microsoft فقط لغرض دفع اعتماد PWA إلى الأمام.

توليد البيان

في PWABuilder ، أدخل عنوان URL الخاص بـ PWA وانقر على البدء . لاحظ أن هذه الخطوة مهمة لأنها تحدد تلقائيًا و / أو تملأ المعلومات المفقودة في ملف manifest.json الخاص بك ، والذي غالبًا ما يكون مطلوبًا لـ PWAs غير المصممة خصيصًا لمتجر Microsoft.

 يوصى بالقراءة: PWA Manifest: إن إنشاء تطبيق الويب الخاص بك يوضح الطريقة السهلة

تتمثل الخطوة التالية في بناء عمال خدمة لـ PWA ، ولكن بافتراض أن تطبيقك هو تطبيق ويب تقدمي نموذجي تم فيه دمج عمال الخدمة بالفعل ، سيتم تخطي هذه الخطوة وسننتقل إلى الخطوة الأخيرة - الحصول على حزمة .appx الخاصة بك.

إنشاء AppX

عند النقر فوق إنشاء AppX ، سترى شيئًا مثل هذه النافذة المنبثقة:

هذا هو المكان الذي يمكن أن تكون فيه المعلومات السابقة مفيدة. املأ الحقول وسيظهر مربع تنزيل يحتوي على حزمة appx. قم بتنزيله وستكون الآن جاهزًا لنشر PWA على متجر Microsoft.

إذا كنت ترغب في اختبار PWA الخاص بك قبل نشره في المتجر ، فهناك دائمًا خيار اختبار Windows من خلال تمكين وضع المطور → انقر بزر الماوس الأيمن فوق test_install.ps1 → تشغيل باستخدام PowerShell . سيؤدي القيام بذلك إلى إضافة PWA تلقائيًا إلى سطح المكتب وقائمة ابدأ ، والتي يمكن تشغيلها واختبارها لمعرفة ما إذا كان كل شيء يعمل بشكل صحيح.

الخطوة 3: قم بإرسال حزمة التطبيق الخاصة بك إلى متجر Microsoft

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

بمجرد تحديد موقع windows.appx ، توجه إلى صفحة الإرسال في مركز التطوير الخاص بك وقم بملء المعلومات المطلوبة:

بعد إكمال جميع الخطوات وملء جميع الحقول المطلوبة ، يجب أن يضيء زر " إرسال إلى المتجر " ، مشيرًا إلى أن ملفك الشخصي جاهز الآن لعملية المراجعة. سيستغرق إكمال هذه العملية من ساعة إلى عدة أيام ؛ بمجرد الانتهاء من PWA ، سيتم اعتماده وإتاحته للتنزيلات العامة / الخاصة (يعتمد على إعدادات التوفر الخاصة بك في Dev Center).

استنتاج

بعد كل هذا ، ربما لا تزال تتساءل عن سبب إنشاء تطبيق ويب تقدمي - ناهيك عن مواجهة كل هذه المشاكل لنشر أحدها. وأنت محق في طرح مثل هذه الأسئلة الأساسية.

يعد تطبيق الويب التقدمي خطوة بخطوة يثبت أنه مستقبل تسليم البرامج والخطوة الطبيعية التالية في تطور علم تقنيات الويب. اعتبارًا من الآن ، يتم استخدامه على نطاق واسع في كل مكان في عالم التجارة الإلكترونية حيث تعد التجربة الموحدة والجذابة عبر جميع الأجهزة مفتاحًا للتحويلات العالية.

نظرًا لكونها تقنية جديدة ، فمن الصعب بالفعل إنشاء تطبيق ويب تقدمي واحد كما هو. مع SimiCart ، لم يعد لديك ما يدعو للقلق بشأن مراحل تطوير Magento PWA الخاصة بك لأننا نقدم أفضل الحلول الكاملة والفعالة من حيث التكلفة في السوق.