برنامه‌های وب پیش‌رونده (PWA)، که توسط گوگل در سال 2015 معرفی شده است، برنامه‌هایی هستند که احساسی شبیه به برنامه‌های بومی (native) را ارائه می‌دهند که برای کار cross-platform طراحی شده‌اند. ویژگی‌هایی مثل قابلیت آفلاین، ذخیره‌سازی محلی (local caching) برای assetها، push notifications، و مزایای عملکردی را ارائه می‌دهد.

از نظر فنی، یک برنامه وب باید سه جزء اصلی برای ما داشته باشد تا بتوانیم آن را برنامه وب پیش‌رونده بنامیم.

سه ویژگی که یک برنامه را برنامه وب پیش‌رونده می‌سازد:

Secure contexts یا HTTPS. برنامه‌های وب پیش‌رونده باید بر روی یک شبکه امن به کار گرفته شوند، مانند آنچه هنگام استفاده از HTTPS ارائه می‌شود. علاوه بر مزایای امنیتی، این امر به ساخت برنامه شما به عنوان یک سایت قابل اعتماد کمک می‌کند، که اگر می‌خواهید معاملات خود را در برنامه PWA خود درست کنید، این یک امر ضروری است. اهمیت وجود secure contexts فقط وقتی قابل دسترس است که آن را بر روی HTTPS داشته باشیم.

Service workers. PWAها باید یک یا چند service worker داشته باشند، که اسکریپت‌هایی هستند که به کاربران اجازه می‌دهند که کنترل کنند چطور مرورگرهای وب، درخواست‌های شبکه و asset caching را مدیریت کنند. Service workerها یک بخش کاملی از صفحات بسیار سریع، قابل اعتماد و تجربیات آفلاین هستند.

manifest file. این یک فایل JSON است که نحوه نمایش برنامه شما برای کاربران نهایی را کنترل می‌کند. تمام آیکون‌ها، آدرس‌های برنامه، و سایر جزئیات طراحی ضروری برای اینکه ظاهر PWA شما را بسیار جالب بسازد در فایل manifest قرار دارند.

چرا سراغ PWA برویم؟

به دلیل ترکیب خوب این ویژگی‌ها، کاربران اغلب PWAها را به برنامه‌های وب معمولی ترجیح می‌دهند.

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

push notifications با افزودن تجربه بومی یا همان native بر روی برنامه وب، به کاربران کمک می‌کنند تا با زدن یک دکمه با PWA تعامل داشته باشند.

Multiplatform، پیشرفت تدریجی. به عنوان یک برنامه وب، PWA شما بر روی هر مرورگری اجرا می‌شود. بنابراین، شما می‌توانید به کاربران زیادی درخواست دهید، بدون توجه به اینکه آن‌ها بر روی ویندوز هستند یا اوبونتو. حتی وقتی برخی قابلیت‌ها بر روی بعضی پلت‌فرم‌ها موجود نیستند، تجربه کاربری خوبی را ارائه می‌دهد.

چگونه می‌توان یک react PWA ساخت (پیش‌نیازها)

ابتدا مطمئن شوید که آخرین نسخه Node را نصب کرده‌اید، و همچنین ویرایشگر کدی دارید که با آن احساس راحتی می‌کنید. Visual Studio Code انتخاب خوبی است.

اگر از قبل یک برنامه وب react دارید که می‌خواهید قابلیت‌های پیشرفته به آن بدهید، عالی است! اگر نه، جای نگرانی نیست. ابزار Create React App فیس‌بوک سودمند خواهد بود. حتی می‌توانید برنامه react آماده را از گیت‌هاب ایمپورت کنید.

شروع با اصول اولیه

برای شروع باید ابزار Create React App را بر روی سیستم خود نصب کنید. ویرایشگر کد خود را باز کرده و قطعه کد زیر را وارد کنید.

نصب ابزار Create React App آغاز می‌شود. پس از اتمام فرآیند، کد زیر را برای ایجاد یک پروژه خالی وارد کنید.

پس از ایجاد پروژه، به فایل package.json بروید و وابستگی‌هایی (dependency) که در فایل آمده است را ببینید. وابستگی React-router را نیز با استفاده از ویرایشگر کد نصب کنید، و با استفاد از دستور ‘npm run start’ یک تست اجرا بگیرید.

چک لیست PWA

ما برای سهولت کارمان، Lighthouse را نصب کردیم، یک اکستنشن کروم توسط گوگل که برنامه وب را آنالیز کرده و نشان می‌دهد آیا این یک برنامه پیش‌رونده است یا نه. اگر برنامه پیش‌رونده نباشد، Lighthouse لیستی از ضوابطی را که برنامه شما باید انجام دهد تا واجد شرایط PWA شود را ارائه می‌دهد.

Service workers

Create React App دارای یک service worker پیش‌فرض برای کش کردن static assetها است، اما ما می‌خواهیم یک service worker سفارشی بسازیم. این فرآیند را با ایجاد فایل service worker جدید در پوشه source پروژه شروع می‌کنیم، و قطعه کد زیر را با نام service worker سفارشی خود جایگزین می‌کنیم.

با استفاده از دستور پیش‌فرض console.log(“ “) قابلیت تست را به فایل service worker ایجاد شده خود اضافه می‌کنیم، برنامه را build می‌کنیم، و کنسول را چک می‌کنیم. Lighthouse به دلیل قابلیت service worker اضافه شده ما، یک PWA score بهبود یافته را به ما می‌دهد. شما می‌توانید خلاقیت به خرج دهید و کد service worker پیچیده‌تری را بنویسید.

قبل از اینکه secure contexts را اضافه کنیم، باید پیش‌روی برنامه را تقویت کنیم.

قبل از راه‌اندازی برنامه، می‌توانیم بارگیری پیام‌ها یا CSS را با افزودن فایل index.html نمایش دهیم، بنابراین می‌توانیم ایمپورت کردن رفرنس‌های فایل‌های CSS را از فایل‌های app.js و index.js حذف کنیم (نام فایل‌ها ممکن است از سیستمی به سیستم دیگر متفاوت باشد) و عملکرد برنامه را بهبود بخشیم.

افزودن secure contexts و manifest file

ابزار Create React App شامل یک manifest file در پوشه public برای استفاده در پروژه‌هایی است که شامل گزینه‌های اولیه پیکربندی هستند. فایل public/manifest.json را می‌توان تغییر داد تا ویژگی‌هایی مانند آیکون‌ها، گزینه‌های نصب،‌ و ذخیره آیکون‌های PWA بر روی home screen یا دسکتاپ برای دسترسی آسان، را اضافه کنیم.

اکنون زمان آن رسیده تا آنچه را که ایجاد کرده‌ایم را deploy کنیم. Firebase یک ابزار مرجح برای بسیاری از توسعه‌دهندگان است تا برنامه‌های مبتنی بر React خود را deploy کنند، و این همان چیزی است که ما نیز برای deploy کردن برنامه PWA توصیه می‌کنیم. با تغییر مقدار doCache به true کشینگ را فعال کنید، Firebase را نصب کرده و ماژول Firebase را مقداردهی و راه‌اندازی کنید.

پس از اتمام مراحل، برنامه خود را با اجرای کد زیر در ترمینال deploy کنید.

ابزار Firebase CLI آدرس (URL) را به شما می‌دهد، که می‌توانید در مرورگر وب خود باز کنید. هاستینگ URL یک HTTPS URL می‌شود که مشکل secure contexts را حل می‌کند. مثل آنچه که در زیر نشان داده شده است.

ابزار Lighthouse را یک بار دیگر اجرا کنید. تبریک می‌گوییم شما اولین برنامه وب پیش‌رونده خود را با استفاده از React ساختید!