في الأساس ، PWA هو موقع ويب عند الوصول إليه باستخدام هاتف محمول، يمكن حفظ موقع الويب على الهاتف المحمول، وتكون التجربة مثل التطبيق الأصلي تمامًا في هذا المقال نتعلم كيفية تحويل الموقع إلى تطبيق.
سيكون به عرض تحميل، يمكنك حذف واجهة Chrome، إذا تم قطع اتصال الشبكة، فلا يزال بإمكانه عرض المحتوى بشكل طبيعي.
أهم شيء هو أنه يحسن تفاعل المستخدم متصفح Chrome على Android إذا اكتشف أن موقع الويب هو PWA، سيطلب من المستخدم استخدام رمز الاختيار المحفوظة على الشاشة الرئيسية للجهاز.
لماذا هو مهم جدا؟
PWA مفيد للأعمال على العميل لاحظ موقع أمازون الصيني وعلي بابا أن تفاعل المستخدمين قد زاد بنسبة 48٪ بسبب مطالبات المتصفح بـ “تثبيت” الموقع.
هذا يدل على أن PWA تستحق القتال من أجلها تمامًا هذا على الأرجح بسبب تقنية تسمى Service Workers، والتي تسمح لك بحفظ الموارد الثابتة (html css javascript json …) في نظام المستخدم، بالإضافة إلى ملف manifest.json الذي يحدد شكل موقع الويب مثل أحد التطبيقات المثبتة يتم تشغيل نفس التطبيق.
قد يبدو تحويل موقع ويب إلى PWA أمرًا معقدًا (عمال الخدمة؟ ما هم؟)، لكنه ليس بهذه الصعوبة.
متطلبات تحويل الموقع إلى تطبيق https بدلاً من http
أصعب جزء هو أن PWA لا يمكن تشغيلها إلا على مواقع المجال الآمنة (أي بعد https: // بدلاً من http: //).
عادةً ما يكون من الصعب إعدادها يدويًا، ولكن إذا كان لديك خادم خاص بك، فيمكنك استخدام Lets Encrypt لإكمال هذه الخطوة بسهولة وتلقائية، وهي مجانية تمامًا.
اختبار المنارة
اختبار Lighthouse عبارة عن أداة اختبار آلية أنشأتها وصيانتها Google وهي تستخدم ثلاثة معايير لاختبار مواقع الويب التقدم والأداء وإمكانية الوصول.
ستعطي نسبة مئوية لكل عنصر وتقدم اقتراحات للتحسين إنها أداة تعليمية مفيدة للغاية.
realfavicongenerator.net
كيفية تحويل الموقع إلى تطبيق يجب أولا أن يهتم موقع realfavicongenerator.net بالطبقة المرئية لـ PWA سيقوم بإنشاء ملف manifest.json المذكور أعلاه، وملفات الرموز لكل إصدار مطلوب عند حفظ موقع الويب على أي جهاز محمول، وإضافة جزء من كود html إلى علامة في الصفحة.
توصية: على الرغم من أن RFG يضع مواردك في مجلدات فرعية، إلا أن هذا سيجعل من الصعب تمكين PWA.
لذلك من أجل البساطة والراحة، ضع جميع الصور والموارد الأخرى في الدليل الجذر.
ملف البيان
قم بتحرير ملف manifest.json الذي تم إنشاؤه بواسطة RFG، ويجب أن يحتوي على الأقل على هذه العناصر: “النطاق”، “start_url”، “الاسم _ القصير”، “العرض” وفيما يلي مثال على ذلك:
استخدم عمال الخدمة من خلال upup.js
- عمال الخدمة عبارة عن تقنية جافا سكريبت، يصعب على عقلي المتعب وغير الصبور فهمها.
- لحسن الحظ، أخبرتني فتاة ألمانية ذكية تال أتلر أنها تريد الترويج لمفهوم “وضع عدم الاتصال أولاً”، فأنشأت مكتبة جافا سكريبت التي يمكن أن تجعل موقع الويب الخاص بك يعمل بسهولة حتى في حالة عدم الاتصال بالإنترنت.
- استخدم Realfavicongenerator لإنشاء html والصور المطلوبة، وإضافة الكود إلى كود موقع الويب الخاص بك.
- انشر موقع الويب على نطاق https الخاص بك.
- قم بإجراء اختبار المنارة.
- حلل النتائج.
- حل كل مشكلة.
- ارجع إلى الخطوة 3 وكرر الأمر.
- كرر حتى تحصل على نتيجة قريبة من 100 في جميع الأماكن تقريبًا و 100 في عنصر “التقدم”.
- اختبرها على هاتفك هناك احتمال معين بأن ترى نافذة منبثقة في الجزء السفلي تدعوك إلى حفظ موقع الويب على الشاشة الرئيسية لهاتفك.
- كيفية تحويل الموقع إلى تطبيق نقدم مثال على PWA قمت بإنشائه باستخدام صفحات Github لقد قمت بكتابته في الموقع لصغار السن عندما كنت في BeCode.
- يمكنك استخدام هاتفك المحمول للوصول إليه واختباره.
- يمكنك العثور على جميع المعلومات حول PWA في الكتاب التالي:
- مشروع ترجمة Nuggets هو مجتمع يقوم بترجمة المقالات التقنية عالية الجودة عبر الإنترنت ، ومصدر المقالات هو مشاركة المقالات باللغة الإنجليزية على Nuggets.
- يغطي المحتوى Android و iOS والواجهة الأمامية والخلفية و blockchain والمنتجات والتصميم والذكاء الاصطناعي ومجالات أخرى.
- إذا كنت ترغب في رؤية المزيد من الترجمات عالية الجودة، فيرجى الاستمرار في الانتباه إلى خطة ترجمة Nuggets الرسمية أعمدة Weibo و Zhihu.
- سنتمكن من تحويل مواقع الويب المفضلة لدينا إلى اختصارات لإنشاء تجربة “تطبيق ويب”.
- تتمتع هذه التجربة بسلسلة من المزايا، والتي سنقدمها لك لتتمكن من كيفية تحويل الموقع إلى تطبيق.
- يجب أن نعرف أن تطبيقات الويب الأصلية لها سلسلة من الفوائد.
- لا يمكن لـ PWA أو تطبيقات الويب التقدمية تحسين تجربة الهاتف المحمول فحسب، ولكن نظرًا للمعايير أو البروتوكولات المعروفة لـ WebAPK، يمكن أيضًا تشغيلها مثل تطبيقات Android.
- الآن هناك بعض المتصفحات التي تسمح لنا بتحويل موقع الويب.في تطبيق ويب، يتطلب القيام بذلك بعض العمل من مطور الويب الخلفي.
- في الواقع، يمكن للمستخدم النهائي أن يفعل القليل باستثناء إنشاء تطبيق ويب بعد إنشاء تطبيق الويب، يمكننا أن نبدأ في إعداد النتيجة وتخصيصها بشكل أفضل باستخدام سلسلة من المعلمات التي تسمح لنا “باللمس”.
مميزات Native Alpha هي:
مثال أي موقع ويب بملء الشاشة بلا حدود عند استخدام نظام Android WebView.
يسمح لك بإنشاء اختصار على الصفحة الرئيسية وإضافته على أيقونة موقع الويب للتعرف عليه بشكل صحيح.
تكوين تطبيق الويب
يمكنك تعديل الإعدادات المختلفة لكل تطبيق ويب: JavaScript، ملف تعريف الارتباط، ملف تعريف ارتباط الطرف الثالث، ذاكرة التخزين المؤقت.
استخدام التنقل إيماءات اللمس المتعدد عند تصفح الويب.
اختر استخدام AdBlock Plus في WebView المخصص.
كمصدر مفتوح، فإنه لا يمتلك أذونات انتهاك الخصوصية التي تمتلكها التطبيقات الأصلية.
الوضع الداكن Android 10+.
اقرأ أيضا : تحميل قوالب ووردبريس مباشر
لمعرفة الحقيقة حول إنشاء تطبيق الويب هذا ، إليك بعض الخطوات البسيطة التي نعرضها لك:
طريقة و كيفية تحويل الموقع إلى تطبيق دعنا نذهب إلى مستودع التطبيق لتنزيله:
هناك يجب عليك البحث عن أحدث إصدار من apk والنقر فوق “الأصول”.
يمكنك تنزيله وتثبيته.
عندما يبدأ، سيطلب منا موقع ويب لأول مرة.
نقدمها ونعطيها الإبداع.
عند الخروج من تطبيق الويب، سنرى شاشة رئيسية حيث يمكنك النقر فوق عجلة التمرير لتكوينها.
أيضًا، يمكننا إنشاء تطبيقات ويب جديدة وإحضارها إلى سطح المكتب للوصول السريع.
يوجد أيضًا هذا التطبيق مفتوح المصدر المسمى Native Alpha ويمكنك استخدام هذه الموارد مجانًا، مثل موقع Androidsis الذي تدخله عادةً كل يوم.
