PWA چیست؟
برنامه وب پیشرو (PWA) یک برنامه وب است که تجربه ای مشابه تجربه یک برنامه موبایل بومی ارائه می دهد. PWAها با استفاده از فناوری‌های وب مدرن مانند سرویس‌دهندگان، مانیفست‌های برنامه وب و اعلان‌های فشاری ساخته می‌شوند که به آنها اجازه می‌دهد به صورت آفلاین یا در اتصالات شبکه ضعیف کار کنند، روی صفحه اصلی کاربر نصب شوند و تجربه‌ای شبیه به برنامه ارائه کنند.
یکی از مزایای کلیدی PWA ها توانایی آنها در بهبود تعامل و رضایت کاربر با ارائه تجربه ای شبیه به برنامه در مرورگر است. PWA ها همچنین می توانند هزینه های توسعه را کاهش دهند و دسترسی به مخاطبان گسترده تری را آسان تر کنند زیرا آنها بر روی دستگاه ها و پلتفرم های مختلف کار می کنند.
نحوه ایجاد PWA در مراحل ساده در React
اگر علاقه مند به ایجاد PWA در React هستید، در اینجا چند مرحله ساده برای شروع آورده شده است:
مرحله 1: یک پروژه React را راه اندازی کنید
اولین قدم این است که یک پروژه React جدید را با استفاده از ابزاری مانند Create React App راه اندازی کنید. این یک برنامه اصلی React را در اختیار شما قرار می دهد که می توانید از آن به عنوان نقطه شروع PWA خود استفاده کنید.
مرحله 2: وابستگی های لازم را نصب کنید
در مرحله بعد، باید وابستگی های لازم را برای ایجاد یک PWA در React نصب کنید. این شامل بسته های “workbox-webpack-plugin” و “web-push” است.
npm install workbox-webpack-plugin web-push
yarn add workbox-webpack-plugin web-push
مرحله 3: یک سرویس دهنده ایجاد کنید
Service Worker یک فایل جاوا اسکریپت است که در پس‌زمینه اجرا می‌شود و وظایفی مانند ذخیره‌سازی منابع و مدیریت اعلان‌های فشار را انجام می‌دهد. برای ایجاد یک سرویس دهنده در React، می توانید از بسته “workbox-webpack-plugin” استفاده کنید.
در فایل پیکربندی بسته وب خود، کد زیر را اضافه کنید:
const WorkboxPlugin = require('workbox-webpack-plugin');
module.exports = {
// ...
plugins: [
new WorkboxPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true,
}),
],
};
با این کار یک سرویس دهنده ایجاد می شود که منابع برنامه شما را در حافظه پنهان ذخیره می کند و عملکرد آفلاین را فعال می کند.
مرحله 4: یک مانیفست برنامه وب ایجاد کنید
مانیفست برنامه وب یک فایل JSON است که اطلاعاتی در مورد برنامه شما، مانند نام، نماد و رنگ طرح زمینه ارائه می دهد. برای ایجاد یک مانیفست برنامه وب در React، می توانید یک فایل manifest.json را به پوشه عمومی خود اضافه کنید و آن را با اطلاعات لازم پر کنید.
در اینجا یک نمونه فایل manifest.json آمده است:
{
"name": "My PWA",
"short_name": "My PWA",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"start_url": ".",
"display": "standalone",
"scope": "https://dev.to/"
}
مرحله 5: اعلان‌های فشاری را فعال کنید
برای فعال کردن اعلان‌های فشاری در PWA خود، باید یک سرویس اعلان فشار مانند Firebase Cloud Messaging (FCM) راه‌اندازی کنید. هنگامی که FCM را راه اندازی کردید، می توانید از بسته “web-push” برای مدیریت اعلان های فشار در برنامه خود استفاده کنید.
در اینجا یک کد نمونه برای مدیریت اعلان‌های فشار آورده شده است:
const publicKey = 'your-public-key';
navigator.serviceWorker.register('/sw.js').then((registration) => {
registration.pushManager
.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(publicKey),
})
.then((subscription) => {
console.log('Subscription successful:', subscription);
console.log(JSON.stringify(subscription));
})
.catch((error) => {
console.log('Subscription failed:', error);
});
});
function urlBase64ToUint8Array(base64String) {
const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
const base64 = (base64String + padding)
.replace(/-/g, '+')
.replace(/_/g, '/');
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
این کد یک سرویس دهنده را ثبت می کند و با استفاده از بسته “web-push” مشترک اعلان های فشار می شود. همچنین کلید عمومی را از یک رشته base64 به یک Uint8Array تبدیل می کند.
مرحله 6: PWA خود را تست کنید
پس از انجام تمام مراحل بالا، می توانید PWA خود را با اجرای آن در مرورگر یا دستگاه تلفن همراه آزمایش کنید. شما باید بتوانید نماد برنامه خود را در صفحه اصلی خود ببینید و باید به صورت آفلاین کار کند و از اعلان های فشار پشتیبانی کند.
نتیجه
در این مقاله یاد گرفتیم که PWA چیست و چگونه در React ایجاد کنیم. ما همچنین یاد گرفته‌ایم که چگونه یک پروژه React را راه‌اندازی کنیم، وابستگی‌های لازم را نصب کنیم، یک سرویس‌کار ایجاد کنیم، یک مانیفست برنامه وب ایجاد کنیم و اعلان‌های فشاری را فعال کنیم.
