يحتوي Google Play على تطبيق واحد تم تطويره بواسطة Chilango Lab والذي يحتوي على أكثر من مليون عملية تنزيل وتقييم مرتفع جدًا. يطلق عليه
لا شيء ، والذي يمكن ترجمته على أنه "لا شيء" ، ومن الرائع أنه لا يفعل شيئًا على الإطلاق. صحيح ، إن بيضة عيد الفصح اللطيفة مخبأة فيه ، لكن هذا لا يغير الأمر. إذا قمت بتحليل هذا التطبيق ، اتضح أن حجمه هو 14 ميجابايت ، أثناء التثبيت يستغرق 19.24 ميجابايت.
يقول مؤلف المادة ، التي ننشر ترجمتها اليوم ، أنه بالنظر إلى هذا التطبيق ، تساءل عما إذا كان يمكن إعادة كتابته بحيث تشغل مساحة أقل.
نجح. أي أنه أعاد إنشاء وظيفة لا شيء باستخدام HTML و CSS و JavaScript ، مما جعلها في تطبيق ويب تقدمي (
PWA ، تطبيق الويب التقدمي). يعمل بدون اتصال بالإنترنت ، يمكنك تسميته ، مثل التطبيق العادي ، من الشاشة الرئيسية. الفرق الرئيسي بين تطبيق Android العادي ونسخة PWA هو الحجم. الأول ، أذكر ، تحتل 19.24 ميغابايت على الجهاز. الثاني - 205 كيلو بايت.
تطبيق عادي و PWAإنشاء أيقونات لا شيء
قبل أن أخبرك عن الرمز ، قم بإنشاء رمز لـ PWA Nothing. لحل هذه المشكلة ، استخدمت أداة
Launcher Icon Generator الممتازة
المفتوحة المصدر .
Launcher Icon Generatorباستخدام Launcher Icon Generator ، تمكنت من إنشاء رمز لخيار Nothing الخاص بي حرفيا على الفور. يقوم البرنامج تلقائيًا بإنشاء رموز بأحجام مختلفة.
Pwacompat
بعد اكتمال الرمز ، كنت بحاجة إلى إنشاء
بيان لتطبيق الويب . بفضل ذلك ، سيعرض متصفح Chrome لنظام Android شاشة البداية عند تشغيل PWA. هل من الممكن أن تظهر مثل هذه الشاشة في متصفحات أخرى أيضًا؟ نعم ، هذا ممكن ، ولهذا نحن بحاجة إلى مكتبة PWACompat ، والتي تسمح لنا بتنفيذ ما نحتاجه بالضبط. إنه ، مع البيان ، يكفي للاتصال في كود PWA:
<link rel="manifest" href="manifest.json" /> <script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js" integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA" crossorigin="anonymous"></script>
إليك ما تبدو عليه شاشة البداية في Safari (iOS).
شاشة سفاري سبلاشولكن هذا لا يقتصر على قدرات PWACompat. على وجه الخصوص ، تسمح لك هذه المكتبة بإنشاء علامات وصفية للمتصفحات المختلفة التي تصف كيفية فتح PWA ، وكذلك تعيين لون السمة استنادًا إلى بيان تطبيق الويب.
إضافة تطبيق إلى الشاشة الرئيسية
واحدة من ميزات PWA المفضلة لدي تسمى A2HS (إضافة إلى الشاشة الرئيسية) ، وبفضلها يمكنك إضافة رمز لتشغيل التطبيق على الشاشة الرئيسية. ومع ذلك ، بدءًا من Chrome 68 على Android ، بدلاً من لافتة A2HS كبيرة ، يتم الآن عرض
لوحة معلومات صغيرة مع اقتراح مناسب.
شعار وداعًا A2HS (Chrome 67 والإصدارات الأقدم)على أي حال ، تعد لوحة التحكم حلاً وسيطًا ، بمجرد إزالة هذه الميزة من Chrome. لذا احتجت إلى إنشاء واجهة A2HS أجمل لـ PWA Nothing.
زر التثبيت (يسار) وزر التثبيت ولوحة A2HS (في الوسط) إضافة إلى مربع الحوار "إضافة إلى الشاشة الرئيسية" (يمين)في هذه الحالة ، إذا كان المتصفح يدعم القدرة على إضافة تطبيق إلى الشاشة الرئيسية ، فسيعرض زر التثبيت في أعلى الصفحة. عندما ينقر المستخدم على هذا الزر ، يتم استدعاء مربع الحوار إضافة إلى الشاشة الرئيسية.
هنا هو الرمز ذو الصلة.
var installPromptEvent; var btnInstall = document.querySelector('#install'); window.addEventListener('beforeinstallprompt', function (event) { event.preventDefault(); installPromptEvent = event; btnInstall.removeAttribute('disabled'); }); btnInstall.addEventListener('click', function () { btnInstall.setAttribute('disabled', ''); installPromptEvent.prompt(); installPromptEvent.userChoice.then((choice) => { if (choice.outcome === 'accepted') { console.log('User accepted the A2HS prompt'); } else { console.log('User dismissed the A2HS prompt'); } installPromptEvent = null; }); });
إذا كان الموقع يفي بمعايير A2HS ، فسيقوم المتصفح برفع حدث قبل
beforeinstallprompt .
بيضة عيد الفصح
انتباه ، سيكون هناك مفسد!
بالمعنى الدقيق للكلمة ، PWA Nothing Easter Egg هو رمز Konami
وفيديو مدته 10 ساعات على YouTube .
دعوة بيضة عيد الفصح (لأعلى ، لأعلى ، لأسفل ، لأسفل ، يسار ، يمين ، يسار ، يمين ولامسين)بعد أن يكمل المستخدم الرمز ، ستفتح PWA
هذا الفيديو .
لإضافة دعم كود Konami إلى تطبيقي ، استخدمت مكتبة
Konami-JS . إنه صغير وسهل العمل معه ، ومن بين أشياء أخرى ، يدعم الأجهزة المحمولة. هنا يكمن الاختلاف الوحيد بين جهاز PWA وتطبيق Android الأصلي. على وجه الخصوص ، عندما أحتاج ، عند إدخال الرمز ، إلى إجراء لمساتين ، في التطبيق الأصلي ، تحتاج إلى استخدام اللوحة مع الأزرار.
أوقف تحديث الصفحة أثناء السحب
أنا ، في عملية العمل على التطبيق ، كان لدي مشكلة صغيرة. عندما يحاول مستخدم تمديد صفحة لأسفل على جهاز محمول ، يؤدي هذا إلى تحديث الصفحة (السحب للتحديث). لست بحاجة لذلك.
تحديث الصفحة غير المرغوب فيهالحسن الحظ ، التعامل مع هذه المشكلة سهل. كل ما تحتاجه هو
سطر واحد من كود CSS :
overscroll-behavior-y: contain
استضافة
تم اختيار Netlify لاستضافة PWA Nothing. هذه منصة عالمية لمشاريع الويب الحديثة. السبب في أنني قررت استضافة طلبي على Netlify هو أن كل شيء سهل التكوين هنا. بالإضافة إلى ذلك ، كل هذا مجاني.
لوحة تحكم Netlifyلنشر مشروع على Netlify ، يمكنك استخدام إحدى الطرق الثلاث. نحن نتحدث عن أدوات سطر الأوامر ، وعن النشر اليدوي ، وعن النشر المستمر.
▍ أدوات سطر الأوامر Netlify
هذه طريقة كلاسيكية لنشر مشاريع الويب. لاستخدامه ، تحتاج إلى تثبيت Netlify CLI ، وتسجيل الدخول إلى حسابك ، وتهيئة المشروع ونشره. يبدو هذا:
> brew tap netlify/netlifyctl > brew install netlifyctl > netlifyctl login > netlifyctl init > netlifyctl deploy
deployment النشر اليدوي
ربما تكون هذه الطريقة هي الأسهل ، ويتم تنفيذ التطبيق مع عدد قليل من حركات الماوس.
النشر اليدويلقد أحببت هذه الميزة كثيرًا لدرجة أنني أرغب في ظهور شيء مثل هذا في Firebase. في واقع الأمر ، فإن نشر مشروع يرجع إلى سحب وإسقاط مجلده على صفحة ويب.
deployment النشر المستمر
الآن أستخدم هذه الطريقة الخاصة. بعد ربط مستودع GitHub الخاص بي بـ Netlify ، عندما أرسل الرمز إلى هناك ، يقوم Netlify تلقائيًا بإنشاء المشروع ونشره. السحر ، وليس غير ذلك.
▍HTTPS
نظرًا لأنه يجب عرض PWAs عبر HTTPS من مصدر آمن ، كنت بحاجة للتأكد من تمكين HTTPS على موقعي. صحيح ، لم يكن عليّ بذل الكثير من الجهد في هذا المجال ، نظرًا لأن Netlify يوفر HTTPS مجانًا لجميع المجالات ، بما في ذلك نطاقات المستخدم الخاصة به.
Httpsعلاوة على ذلك ، من لوحة تحكم Netlify ، يمكنك تمكين الانتقال القسري إلى HTTPS (
HSTS ). سيوفر ذلك حماية مستمرة للموقع.
تحليل المشروع مع المنارة
Lighthouse هي أداة آلية مفتوحة المصدر لتحسين جودة صفحات الويب. بمساعدتها ، يمكنك تحليل أي صفحة - عامة ، أو تتطلب المصادقة. يسمح لك ، من بين أمور أخرى ، بتحليل أداء الصفحات وإمكانية الوصول إليها واستكشاف تطبيقات الويب التقدمية.
المنارةتمكن طلبي من تسجيل 97 نقطة من حيث الأداء و 100 نقطة في مؤشرات أخرى. هنا هو
التقرير الكامل.
الملخص
كما ترون ، فإن تطبيق الويب التقدمي الذي لا يفعل شيئًا يتضح أنه أصغر بكثير من تطبيق Android بوظائف غنية على حد سواء.
هنا يمكنك تجربة لا شيء PWA.
وهنا يمكنك العثور على رمز المصدر الخاص بها.
أعزائي القراء! ما رأيك في تطبيقات Android التي ترغب في إعادة إنشائها في نموذج PWA؟
