يقول مؤلف المادة ، التي ننشر ترجمتها اليوم ، أنه قد يكون في عجلة من أمره ، ولكن ما يريد التحدث عنه هو على الأقل أخبار مثيرة للاهتمام. نحن نتحدث عن تطبيقات الويب التقدمية على سطح المكتب ، والتي قد تحل محل موقع التطبيقات بشكل كبير بناءً على Electron.
ابتكارات Chrome v70
يدعم أحدث إصدار من Chrome (الإصدار 70) تطبيقات سطح المكتب التقدمية على الويب (PWA) على أنظمة التشغيل Linux و Windows.
دعم PWA لسطح المكتب في Chromeإذا نظرت إلى قائمة الأنظمة المدعومة ، يصبح من الواضح على الفور غياب MacOS فيها. ومع ذلك ، هذا فقط حتى يتم إصدار Chrome v72.
دعم PWA لسطح المكتب على نظام MacOSمن المهم ملاحظة أنه على الرغم من عدم تمكين هذه الميزة افتراضيًا على نظام التشغيل MacOS ، إلا أنه يمكن تنشيطها باستخدام العلامة المناسبة. للقيام بذلك ، افتح Chrome ، انتقل إلى
chrome: // flags وابحث عن هذا العلم هناك. يمكنك أيضًا الانتقال إلى العلامة مباشرةً باستخدام الرابط
chrome: // flags / # enable-desktop-pwas .
ما هي تطبيقات الويب التقدمية؟
لن ندخل في تفاصيل محددة بشأن سلطة المياه الفلسطينية هنا.
إليك قسم وثائق Google حيث يمكنك القراءة عنها. من أجل رؤية PWA وتجربته بأم عينيك ، افتح Chrome لنظام Android أو Safari في iOS (ولكن هنا ، لا يتم دعم جميع ميزات PWA) وانظر
هذه الأمثلة.
وهنا خطاب حول هذا الموضوع مع Google I / O '18.
ما هو الإلكترون؟
Electron هو نظام أساسي يسمح للمطورين بإنشاء تطبيقات سطح المكتب عبر الأنظمة الأساسية باستخدام JavaScript و HTML و CSS. تُستخدم هنا أيضًا بعض مكتبات وأطر مكتبات JavaScript الرائعة. هذا يجعل من السهل على مبرمجي الويب الدخول في تطوير تطبيقات سطح المكتب. اكتسبت التطبيقات المستندة إلى الإلكترون شعبية هائلة في السنوات الأخيرة. كجزء من مشاريع مثل Slack و VS Code و Atom و Discord ، تم بذل جهد كبير في تطوير التطبيقات باستخدام Electron. إذا لم تكن على دراية بهذه المشاريع ، فعليك بالتأكيد النظر في التطبيقات والخدمات المقابلة. غالبًا ما بدت تطبيقات سطح المكتب التقليدية خرقاء ، وبدت عناصر واجهتها وكأنها شيء عفا عليه الزمن. لقد جلبت إلكترون بالتأكيد الجمال والنعمة إلى عالم تطبيقات سطح المكتب.
ما علاقة سلطة المياه الفلسطينية بها؟
على الرغم من أن تطبيقات Electron هي ظاهرة متنامية ومتطورة ، وتنفيذها قريب من تنفيذ تطبيقات الويب ، إلا أنها لا تزال تعاني من بعض العيوب. أولاً ، تستخدم هذه التطبيقات مثيلاتها الخاصة لمتصفح Chromium. يعرف الكثير من الناس مقدار ذاكرة الوصول العشوائي المطلوبة لكي يعمل Chrome. الآن ، من أجل تقييم الوضع الذي ينشأ في النظام عند تشغيل العديد من تطبيقات Electron في وقت واحد ، تحتاج إلى أخذ عددهم وضربه في هذا القدر من الذاكرة. إذا كنت مهتمًا ، فافتح بعض تطبيقات Electron وانظر إلى مقدار الذاكرة التي تستهلكها.
الاستخدام المفرط للذاكرة ليس جيدًا في حد ذاته ، وهنا يجب أن نضيف أن العديد من تطبيقات Electron تتفاعل بطريقة محددة مع Node.js ، وليس بالضرورة أن تفعل ذلك بنفس الطريقة مثل تطبيقات الويب المقابلة.
يضيف استخدام Electron إلى الصعوبات المرتبطة بدعم الإصدارات القديمة من البرامج وإعداد عملية تحديث التطبيق.
الآن دعونا نتحدث عن PWA سطح المكتب. تخيل التطبيقات التي تبدو مثل تلك المكتوبة في إلكترون ، والتي هي أيضًا مريحة للعمل معها ، ولكن في نفس الوقت تثبيتها بسيطة ، يتم تحديثها أيضًا دون مشاكل ، أثناء نقل المواد إلى عميل من تطبيق ويب واحد. يبدو أن Chrome يحدد المعيار لسيناريو سلوك مشابه في PWAs لسطح المكتب. عندما يزور مستخدم يعمل في Chrome صفحة ويب معينة ، ويفي التطبيق المقدم لها
بهذه المجموعة من المعايير ، سيتمكن مطور التطبيق من تقديم المستخدم لتثبيت التطبيق على جهاز الكمبيوتر الخاص به. يبدو الموجه شيء مثل ذلك أدناه.
دعوة لتثبيت PWAيمكن للمطور إظهار هذه المطالبة فقط بعد أن يقوم المستعرض
beforeinstallprompt حدث
beforeinstallprompt لكائن
beforeinstallprompt . بعد تثبيت التطبيق ، يظهر الرمز المقابل على سطح المكتب.
أيقونة PWA Launcherبعد بدء مثل هذا التطبيق ، يتم فتحه في نافذة متصفح غير مجهزة بعناصر تحكم تقليدية. يُنظر إلى هذا التطبيق على أنه تطبيق حقيقي لسطح المكتب.
أطلقت PWAمثال PWA
في ما يلي مثال على جهاز PWA المكتبي الذي تم استخدام لقطات الشاشة الخاصة به كرسوم توضيحية أعلاه.
هنا هو مستودعه على جيثب. لتثبيت هذا التطبيق ، تحتاج إلى تمكين العلم المقابل في Chrome وقضاء 30 ثانية على الموقع.
كما ذكرنا من قبل ، يجب أن يستوفي تطبيق الويب ، لكي يعتبر PWA سطح مكتب ، مجموعة معينة من
المتطلبات . إذا كنت ترغب في إنشاء واختبار PWA لسطح المكتب الخاص بك ، يمكنك أن تأخذ
هذا المستودع كأساس وتأخذ في الاعتبار المتطلبات. إذا قمت بعمل ملخص موجز لهم ، فستحصل على ما يلي:
- يجب تقديم الطلب عبر HTTPS.
- يجب أن يكون لديه عامل خدمة مثبت مع معالج
fetch واحد على الأقل. - يجب أن يحتوي على ملف
manifest.json منسق بشكل صحيح. - يجب تصميم صفحاته باستخدام تقنيات التصميم سريع الاستجابة.
أمثلة إضافية
إذا كنت تعمل على نظام MacOS ، فقد ترى PWA أنه لا يمكنك تثبيتها ، ولن تظهر لك دعوة لتثبيتها. إذا قمت بتمكين العلامات والعبث المناسب مع وحدة تحكم المطور ، يمكنك الحصول على PWA لعرض مطالبة بالتثبيت. فيما يلي بعض PWAs الموجودة التي تم تثبيتها على جهاز Mac.
arستاربكس
استثمرت ستاربكس الكثير في تطوير سلطة المياه الفلسطينية العظيمة. كان تطبيق سطح المكتب الخاص بهم مثيرًا للإعجاب حقًا.
PWA ستاربكسخرائط جوجل
هذا مجرد تطبيق رائع. إنه يقوم بعمله ولا يقوم بتحميل النظام بشكل كبير ، ويختلف في العمل السريع والتصميم سريع الاستجابة. لتثبيت هذا التطبيق ، تحتاج إلى إنشاء موقع جوال خرائط Google وتنزيله.
PWA خرائط جوجلwتويتر
حاول Twitter تطوير PWA للجوال ، ويمكن اعتبار إصدار سطح المكتب إضافة جديرة بتطبيق الهاتف المحمول.
سلطة المياه الفلسطينية تويترالملخص
على الرغم من حقيقة أن الكثير من الضجيج قد أثير حول PWAs المكتبي ، عليك أن تدرك أن هذه التكنولوجيا لا تزال في مهدها. على وجه الخصوص ، يمكن ملاحظة توجيهات التطوير التالية لسطح المكتب عريض النطاق:
- الروابط العميقة: الروابط المفتوحة من Chrome تستدعي التطبيق المثبت.
- الإخطارات على أيقونات التطبيق: إظهار الإخطارات على أيقونات مشغل تطبيقات سطح المكتب ، تمامًا مثل رموز تطبيقات الجوال.
- دعم هوتكي: القدرة على الاستماع إلى أحداث لوحة المفاتيح للاستخدام داخل تطبيقات هوتكي.
بمجرد تطوير تقنيات تطوير سطح المكتب في سلطة المياه الفلسطينية بما يكفي ، ستصبح هذه التطبيقات منافسة جادة لمشاريع اليوم القائمة على الإلكترون.
أعزائي القراء! هل تخطط لتطوير سطح المكتب PWA؟
