کاوش برنامه های وب پیشرفته (PWA): ایجاد تجربیات آماده آفلاین

Summarize this content to 400 words in Persian Lang

اینو تصور کن…

شما در یک پرواز طولانی هستید و در یک برنامه پیمایش می کنید، اما Wi-Fi وجود ندارد. انتظار دارید برنامه از کار بیفتد، اما اینطور نیست. همچنان می‌توانید مرور کنید، تعامل کنید و از ویژگی‌های آن استفاده کنید – درست مثل آنلاین بودن. این جادوی برنامه‌های وب پیشرو (PWA) است و طرز فکر ما را در مورد ساخت برنامه‌های وب تغییر می‌دهد. در این راهنما، بررسی خواهیم کرد که PWA چیست، چگونه کار می‌کند و چگونه می‌توانید یکی بسازید.

برنامه های وب پیشرو چیست؟

PWA ها برنامه های کاربردی وب هستند که شبیه برنامه های بومی هستند اما در مرورگر اجرا می شوند. آنها بهترین های هر دو جهان را ترکیب می کنند: دسترسی به وب و عملکرد برنامه های بومی. یکی از ویژگی های کلیدی PWA ها توانایی آنها برای کار آفلاین است که بدون در نظر گرفتن شرایط شبکه، تجربیات یکپارچه کاربر را ارائه می دهد.

مفاهیم اصلی PWA ها

PWA ها بر سه فناوری اصلی متکی هستند:

1. کارگران خدماتی

کارکنان خدمات را به عنوان خدمه پشت صحنه برنامه خود در نظر بگیرید. آنها حافظه پنهان را مدیریت می کنند، درخواست های شبکه را مدیریت می کنند و اطمینان می دهند که برنامه شما به صورت آفلاین کار می کند.

کاری که آنها انجام می دهند: درخواست‌های شبکه را رهگیری کنید، فایل‌های حافظه پنهان را ذخیره کنید و در صورت آفلاین آنها را ارائه کنید.

نحوه پیاده سازی:

self.addEventListener(‘install’, (event) => {
event.waitUntil(
caches.open(‘my-cache’).then((cache) => {
return cache.addAll([‘/index.html’, ‘/styles.css’, ‘/script.js’]);
})
);
});

self.addEventListener(‘fetch’, (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

📄 مستندات: کارگران خدماتی

2. ذخیره سازی

حافظه پنهان تضمین می کند که برنامه شما به سرعت بارگیری می شود، حتی در شبکه های کند یا غیر قابل اعتماد.

چه چیزی را در حافظه پنهان کنیم: HTML، CSS، جاوا اسکریپت، تصاویر، و هر دارایی دیگری که برای ارائه برنامه به صورت آفلاین لازم است.

مثال:

caches.open(‘my-cache’).then((cache) => {
cache.addAll([‘/offline.html’, ‘/styles.css’]);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

📄 مستندات: Cache API

3. قابلیت های آفلاین

عملکرد آفلاین چیزی است که PWA ها را متمایز می کند. این شامل ارائه فایل‌های ذخیره‌شده در حافظه پنهان و فعال کردن تعاملات اولیه برنامه بدون اتصال به اینترنت است.

ساخت یک برنامه وب پیشرفته

در اینجا یک راهنمای گام به گام برای تبدیل یک برنامه وب اولیه به PWA آورده شده است:

مرحله 1: یک فایل Manifest اضافه کنید

را manifest.json فایل به مرورگر درباره برنامه شما از جمله نام، نمادها و URL شروع می‌گوید.

{
“name”: “My PWA”,
“short_name”: “PWA”,
“start_url”: “/index.html”,
“display”: “standalone”,
“background_color”: “#ffffff”,
“theme_color”: “#000000”,
“icons”: [
{
“src”: “icon.png”,
“sizes”: “192×192”,
“type”: “image/png”
}
] }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

📄 مستندات: مانیفست برنامه وب

مرحله 2: ثبت نام یک Service Worker

کارکنان خدمات برای فعال کردن عملکرد آفلاین ضروری هستند.

if (‘serviceWorker’ in navigator) {
navigator.serviceWorker
.register(‘/service-worker.js’)
.then(() => console.log(‘Service Worker registered’))
.catch((error) => console.error(‘Service Worker registration failed:’, error));
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 3: HTTPS را فعال کنید

PWA ها به اتصال ایمن نیاز دارند. از HTTPS برای اطمینان از امنیت برنامه خود استفاده کنید.

مرحله 4: تست عملکرد آفلاین

برنامه خود را در کروم باز کنید.
به Developer Tools > Application > Service Workers بروید.
«آفلاین» را علامت بزنید و برنامه خود را بازخوانی کنید تا ببینید بدون اتصال شبکه کار می کند.

بهترین روش ها برای PWA ها

بهینه سازی عملکرد

از بارگذاری تنبل برای تصاویر و اسکریپت ها استفاده کنید.
فایل های CSS و JavaScript را کوچک کنید.

از Push Notifications استفاده کنید

با استفاده از Push API کاربران را با به‌روزرسانی‌های به موقع درگیر کنید.
مثال:

self.registration.showNotification(‘New Message’, {
body: ‘You have a new message!’,
icon: ‘/icon.png’
});

تست بر روی چندین دستگاه

مطمئن شوید که PWA شما در اندازه های مختلف صفحه نمایش و مرورگرها عالی به نظر می رسد و کار می کند.

چک لیست برنامه وب را دنبال کنید

چرا PWA ها مهم هستند

PWA ها شکاف بین وب و برنامه های بومی را پر می کنند. آنها سریع، قابل اعتماد و جذاب هستند و تجربه کاربری ثابتی را در همه دستگاه ها ارائه می دهند. با ویژگی‌هایی مانند پشتیبانی آفلاین، اعلان‌های فشاری و رابط‌های برنامه‌مانند، PWA‌ها برای توسعه‌دهندگان وب مدرن باید بدانند.

نتیجه: آن را امتحان کنید!

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

اگر از این مقاله لذت بردید، از کار من حمایت کنید:

  self.addEventListener('install', (event) => {
    event.waitUntil(
      caches.open('my-cache').then((cache) => {
        return cache.addAll(['/index.html', '/styles.css', '/script.js']);
      })
    );
  });

  self.addEventListener('fetch', (event) => {
    event.respondWith(
      caches.match(event.request).then((response) => {
        return response || fetch(event.request);
      })
    );
  });

  caches.open('my-cache').then((cache) => {
    cache.addAll(['/offline.html', '/styles.css']);
  });

{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/service-worker.js')
    .then(() => console.log('Service Worker registered'))
    .catch((error) => console.error('Service Worker registration failed:', error));
}