خداحافظ Electron، سلام PWAهای دسکتاپ

اعلامیه اخیر Chrome‌ نسخه ۷۰

نسخه اخیر کروم (نسخه ۷۰) به همراه پشتیبانی هیجان انگیز برای وب‌اپلیکیشن‌های پیش‌رونده دسکتاپ بر روی لینوکس و ویندوز منتشر شده است. در اینجا، لیست پشتیبانی فعلی کروم را مشاهده می‌نمایید:

یک مورد که سریعا متوجه آن خواهید شد، این است که MacOS در این لیست حضور ندارد. نترسید، به احتمال زیاد تا نسخه ۷۲ این مورد هم حضور خواهد داشت.

دقت کنید که با این که پشتیبانی مذکور به طور پیشفرض بر روی MacOS در دسترس نیست، اما از طریق feature flagهای کروم در دسترس می‌باشد. برای فعال کردن این flagها، به سادگی کروم را باز کنید و به chrome://flags بروید یا این که به بخش وب‌اپلیکیشن‌های پیش‌رونده دسکتاپ، در chrome://flags/#enable-desktop-pwas بروید. مطمئن شوید که بعد از فعال کردن هر feature flag، کروم را restart‌ کنید.

شما برای یادگیری میتوانید از دوره آنلاین و ویدیو آموزش ایجاد وبسایت PWA یا Progressive Web Apps استفاده کنید

وب‌اپلیکیشن‌های پیش‌رونده (PWA = Progressive Web Application) چه هستند؟

گرچه ما وب‌اپلیکیشن‌های پیش‌رونده را به طور عمیق پوشش نخواهیم داد، پیشنهاد می‌کنم که به سند Google بروید و یک معرفی خوب داشته باشید. برای دیدن برخی مثال‌های خوب و به دست آوردن حسی به مانند استفاده از یک وب‌اپلیکیشن پیش‌رونده، به کروم اندروید، یا Safari بر روی iOS بروید و این مثال‌ها را بررسی کنید.

Electron چیست؟

Electron پلتفرمی است که توسعه دهندگان را قادر می‌سازد تا برنامه‌های دسکتاپ میان پلتفرمی را با استفاده از JavaScript، HTML و CSS بسازند. این سختی کار را برای توسعه دهندگان وب‌اپلیکیشن‌های پیش‌رونده کاهش می‌دهد تا به راحتی بتوانند جایگزین‌های دسکتاپ بسازند و همچنین از برخی کتابخانه‌های و فریم‌وورک‌های JavaScript بهره ببرند. برنامه‌های بر پایه Electron، در سال اخیر به صورت طوفانی برنامه‌های دسکتاپ را در بر گرفته‌اند. برنامه‌هایی مانند Slack، VSCode، Atom و Discord به شدت بر روی توسعه Electron سرمایه گذاری کرده‌اند. اگر از قبل از هیچ کدام از این سرویس‌ها استفاده نکرده‌اید، آن‌ها را امتحان کنید. قبلا برنامه‌های دسکتاپ حس دلربایی داشتند و کامپوننت‌های رابط کاربری همیشه قدیمی به نظر می‌رسیدند. مطمئنا Electron مقداری جذابیت به دسکتاپ آورده است.

چرا وب‌اپلیکیشن‌های پیش‌رونده دسکتاپ؟

با این که برنامه‌های Electron در حال رشد هستند و پیاده‌سازی آن‌ها به پیاده‌سازی وب نزدیک است، همچنان برخی نکات منفی هم دارند. در ابتدا، برنامه‌های Electron باینری Chromium مختص خود را دارند. اکثر ما می‌دانیم که برای اجرای کروم چه مقدار رم نیاز است، حال آن عدد را ضرب در تعداد برنامه‌های Electron که کاربر باز کرده است کنید. اگر کنجکاو هستید، چند برنامه Electron را بر روی دستگاه خود اجرا کنید و Activity Monitor خود را بررسی کنید تا مقدار رم مورد استفاده را ببینید. استفاده فراوان از رم نه تنها ناکارآمد است، بلکه چند برنامه Electron نیازمند رابط‌های کد ویژه Electron بیشتری با Node.JS هستند و آنچنان شبیه به وب‌اپلیکیشن متناظر خود نیستند. همچنین Electron با مجبور بودن به پشتیبانی برای نسخه‌های قدیمی‌تر، نیازمند پیچیدگی بیشتری است.

(وب‌اپلیکیشن‌های پیش‌رونده دسکتاپ وارد می‌شوند) دنیایی را تصور کنید که می‌توانید از ظاهر و احساس یک برنامه Electron بهره ببرید، بدون این که به نصب‌های طولانی و بروزرسانی‌های نرم‌افزار نیاز داشته باشید، در حالیکه در حال استفاده از یک وب‌اپلیکیشن‌های تکی هستید. به نظر می‌رسد که کروم در حال تنظیم استاندارد برای این رفتار در وب‌اپلیکیشن‌های پیش‌رونده دسکتاپ می‌باشد. وقتی که در حال مشاهده یک صفحه در کروم هستید و برنامه با تمام شاخص‌ها همخوانی دارد، توسعه دهنده قابلیت این را دارد که به کاربر اجازه دهد تا برنامه را بر روی دسکتاپ خود نصب کند. صفحه مجوز دهی برای نصب، چنین ظاهری دارد:

این مجوز دهی می‌تواند دقیقا پس از این که رویداد صفحه «beforeinstallprompt» توسط مرورگر اجرا شده است، به توسعه دهندگان نشان داده شود. این برنامه معمولا پس نصب، تبدیل به یک آیکون بر روی صفحه دسکتاپ کاربر می‌شود.

در هنگام اجرای این برنامه که به تازگی نصب شده است، یک صفحه مرورگر دریافت می‌کنید که ظاهر و احساس یک برنامه دسکتاپ واقعی را دارد.

مثال‌های من

تصاویر بالا، یک اثبات ساده از چیزی است که من گرد هم آورده‌ام تا به شما نشان دهم که می‌توانید کار خود در زمینه وب‌اپلیکیشن‌های پیش‌رونده را شروع کنید. برای نصب آن‌، مطمئن شوید که feature flag وب‌اپلیکیشن‌های پیش‌رونده را برای حداقل ۳۰ ثانیه بر روی وبسایت من فعال کرده‌اید. دقت کنید که در هنگام آزمایش وب‌اپلیکیشن‌های پیش‌رونده، چنیدن نیازمندی وجود دارند. در اینجا یک چک لیست خلاصه را مشاهده می‌کنید:

باید بر روی HTTPS قرار داشته باشد
باید Service Worker با حداقل یک fetch handler نصب شده باشد
باید یک فایل manifest.js معتبر وجود داشته باشد
صفحات باید responsive باشند

مثال‌های اضافی

اگر در حال حاضر بر روی MacOS هستید، بسیاری برنامه‌ها تصور نمی‌کنند که شما feature flag وب‌اپلیکیشن‌های پیش‌رونده را فعال کرده‌اید و از این رو به شما اجازه نصب را نمی‌دهند. با تصحیح فعال بودن flag مناسب در کروم و کدنویسی مناسب در Chrome Devtools Console، می‌توانید وب‌اپلیکیشن‌های پیش‌رونده موجود را نصب کنید. در اینجا برخی از آن‌ها را مشاهده می‌نمایید که من توانستم بر روی دسکتاپ خود نصب کنم.

Starbucks

Starbucks به شدت بر روی ساخت یک وب‌اپلیکیشن پیش‌رونده عالی سرمایه گذاری کرده‌اند. گرچه چیزی نیست که من پیشنهاد کنم، اما نسخه دسکتاپ آن واقعا تاثیرگذار است.

Google Maps

این برنامه واقعا جالب است. بسیار سبک، و پاسخگو نیازهای ما است. Responsive بوده، و سریع است. تکنیک رسیدن به Google Maps این است که وبسایت Mobile را force load‌ کنید.

Twitter

Twitter خطوط عالی‌ای برای وب‌اپلیکیشن پیش‌رونده‌اش بر روی موبایل قرار داده است. نسخه دسکتاپ یک تعریف خوب برای پیاده‌سازی آن‌ها است.

توسعه‌دهی آینده

با وجود تمام بحث و جدل‌ها درباره وب‌اپلیکیشن‌های پیش‌رونده دسکتاپ، عاقلانه است که استانداردها را در همین دوران تازه وارد بودنشان درک کنیم. توسعه دهی‌ها و تغییرات در حال انجام هستند؛ مانند:

لینک دهی عمیق: باز کردن لینک‌ها در کروم برای فعال کردن برنامه‌های نصب شده، به جای این که در کروم اجرا شوند.

Badge‌ کردن آیکون: مشابه شماره‌گذاری تعداد اعلانات برنامه موبایل، در بالای آیکون برنامه.

میان‌برها کیبورد: قابلیت گوش کردن به میان‌برهای کیبورد بومی داخل برنامه.

به نظر من برنامه‌های Electron پس از این که بالغ شوند، رقابت جدی‌ای با وب‌اپلیکیشن‌های پیش‌رونده دسکتاپ پیدا می‌کنند.