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

در طی سال‌های اخیر، افزایش قابل توجهی در تعداد تلفن‌های همراه وجود داشته است. امروزه، بیش از 60 درصد کل مصرف اینترنت، بر روی موبایل‌ها اتفاق می‌افتد. واضح است که دلایل آن قابل حمل بودن، سخت‌افزار ارزان، دسترسی آسان به اینترنت و افزایش تعداد خدمات اینترنتی هستند. با کاربران بیشتر بر روی دستگاه‌های موبایل، بهینه‌سازی تجربه کاربر بر روی موبایل یک امر ضروری است. برای شرکت‌های کوچک‌تر که معمولا به علت هزینه بالا برنامه خصوصی‌ای ندارند، وب‌اپلیکیشن فرصت کلیدی‌ای برای جذب مشتری با فراهم کردن بهترین تجربه ممکن است.

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

برای یادگیری pwa میتوانید از دوره آموزشی پیشرفته pwa در سایت راکت استفاده کنید

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

بیایید برنامه Whatapp‌ را به عنوان مثال خود در نظر بگیریم. وقتی که شما به اینترنت متصل نیستید، همچنان می‌توانید برنامه را باز کنید، پیام‌های گذشته را مرور کنید و حتی پیامی را پاسخ دهید. (reply کنید) وقتی که تلفن به اینترنت متصل می‌شود، پیام‌ها به طور خودکار در پس‌زمینه ارسال می‌شوند. این همان چیزی است که یک وب‌اپلیکیشن پیش‌رونده فراهم می‌کند؛ یعنی برنامه را قادر می‌سازد تا وقتی که اینترنتی وجود ندارد بارگذاری شود و در پس‌زمینه همگام‌سازی شود.

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

بیایید برخی امکانات هسته‌ای که در وب‌اپلیکیشن‌های غیر پیش‌رونده وجود ندارند را بررسی کنیم.

1. قابل اعتماد بودن
   برنامه باید سریعا بارگذاری شود و وقتی که اینترنتی وجود ندارد یا شبکه ضعیفی مانند 2G وجود دارد، بارگذاری شود. تحقیقات گوگل نشان می‌دهند که ۵۳ درصد کاربران وقتی بارگذاری یک صفحه وب بیش از ۳ ثانیه طول بکشد، آن صفحه را ترک می‌کنند.
2. سریع بودن
   اسکرول کردن‌ها و transitionهای صفحه باید وقتی که کاربر با آن تعامل می‌کند، نرم باشند. همه از اسکرول‌های ضعیف بدشان می‌آید.
3. پاسخگو بودن
   برنامه باید در تمام سایزها و دستگاه‌های مختلف جا بگیرد. یک وب‌اپلیکیشن خوب باید مثل مایع باشد، که شکل ظرف را به خود می‌گیرد.
4. قابل نصب بودن
   اگر می‌خواهید وب‌اپلیکیشن‌ها را به برنامه‌های بومی نزدیک کنید، باید قابل نصب باشند و به همراه دیگر برنامه‌ها، در صفحه خانه قرار بگیرند، تا کاربر بتواند با یک کلیک به آن‌ها دسترسی داشته باشد.
5. قابل درگیری بودن
   برنامه مورد نظر باید بتواند کاربر را درگیر همه چیز نگه دارد. مثلا دارای اعلانات باشد.

تمام موارد بالا در یک وب‌اپلیکیشن پیش‌رونده، قابل اعمال هستند.

وب‌اپلیکیشن پیش‌رونده و فریم‌وورک‌های رابط کاربری مدرن

برخی فکر می‌کنند که یک وب‌اپلیکیشن پیش‌رونده با به کارگیری آخرین فریم‌وورک‌ها مانند React.js، Angular 6 یا Vue.js ساخته شده است. اما لزوما نباید اینطور باشد. یک وب‌اپلیکیشن پیش‌رونده هیچ ربطی به فریم‌وورک مورد استفاده شما ندارد، بلکه فقط باید کامپوننت‌های مورد نیاز آن را داشته باشید.

یک وب‌اپلیکیشن‌ پیش‌رونده چگونه یک وبسایت را به صورت آفلاین قابل دسترسی می‌کند؟

این دقیقا اولین فکر من درباره یک وب‌اپلیکیشن پیش‌رونده بود. وب‌اپلیکیشن‌های پیش‌رونده دقیقا چگونه بدون اینترنت باز می‌شوند؟

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

یک وب‌اپلیکیشن پیش‌رونده، فایل‌های HTML، فایل‌های CSS و عکس‌های موجود را در cache‌ مرورگر ذخیره می‌کند و توسعه‌دهندگان می‌توانند کاملا آن را کنترل کنند. تمام این موارد، با استفاده از Service Workerها به دست می‌آیند.

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

یک وب‌اپلیکیشن پیش‌رونده، برخی کامپوننت‌های فنی مهم دارد که با هم کار می‌کنند و وب‌اپلیکیشن معمولی را انرژی می‌دهند. این کامپوننت‌ها برای یک وب‌اپلیکیشن پیش‌رونده خوب مورد نیاز هستند:

حال بیایید هر کدام را مورد بررسی قرار دهیم.

1. Service Worker

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

در اینجا فرصتی برای بهینه‌سازی این روند وجود دارد. در اولین بارگذاری، Service Worker تمام منابع مورد نیاز را در cache‌ مرورگر ذخیره می‌کند. وقتی که کاربر برای بار بعدی از برنامه دیدن می‌کند، Service Worker کش را بررسی کرده، و قبل از این که حتی اتصال شبکه اینترنت را بررسی کند، پاسخ را به کاربر بر می‌گرداند.

یک Service Worker، فقط یک کامپوننت JavaScript است که به عنوان یک پروکسی بین مرورگر و شبکه کار می‌کند. Service Worker همچنین اعلانات را مدیریت می‌کند.

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

حتی می‌توانید پس از این که فرایند caching تمام شد و برای مشاهده آفلاین آماده شد، با یک اعلان کوچک به کاربر اطلاع دهید.

2. فایل manifest

فایل manifest، یک فایل پیکربندی JSON است که شامل اطلاعاتی درباره برنامه شما مانند آیکون، نام کوتاه برنامه، رنگ‌ پس‌زمینه یا تم می‌شود.

اگر فایل manifest وجود داشته باشد، مرورگر Chrome به طور خودکار نصب برنامه را شروع می‌کند. اگر کاربر موافقت کند، آیکون برنامه به صفحه اصلی اضافه می‌شود و وب‌اپلیکیشن پیش‌رونده نصب می‌شود.

کد زیر، نمونه ساده‌ای از فایل manifest است:

{
  "short_name": "Spinner",
  "name": "Fidget spinner",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/home/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/home/",
  "theme_color": "#3367D6"
}

در اسکرین‌شات زیر، روند کار فایل manifest را می‌بینید:

3. HTTPS

Service Workerها قابلیت رهگیری درخواست‌های شبکه و تغییر پاسخ آن‌ها را دارند. Service Workerها تمام کارها را در سمت کاربر انجام می‌دهند. از این رو، یک وب‌اپلیکیشن پیش‌رونده به پروتکل HTTPS نیاز دارد.

Service Workerها قابلیت دریافت اعلانات و همگام‌سازی در پس‌زمینه را دارند، که قطعا تجربه کاربری را ارتقا می‌دهند. این دو مورد اختیاری هستند، اما برای فراهم کردن یک تجربه بومی مانند مناسب هستند.

ابزار و کتابخانه‌ها

تعداد کمی ابزار اوپن سورس وجود دارند که توسعه وب‌اپلیکیشن‌های پیش‌رونده را آسان‌ می‌کنند.

1. Lighthouse ابزاری است که می‌توانند در قبال هر صفحه وبی اجرا شود، و یک گزارش تهیه کند. این قابلیت می‌تواند در حین توسعه استفاده شود.
2. Workbox مجموعه‌ای از کتابخانه‌هایی است که توسط Google اوپن سورس شده است و می‌تواند برای ایجاد فایل‌های Service Worker استفاده شود. Workbox همچنین استراتژی‌های caching‌ مختلفی برای عکس و دیگر منابع را در خود دارد.

خلاصه می‌توانید مطمئن باشید که یک وب‌اپلیکیشن پیش‌رونده می‌تواند به شما کمک کند. امیدوارم این مقاله برای شما پرکاربرد بوده باشد.

برای یادگیری pwa میتوانید از دوره آموزشی پیشرفته pwa در سایت راکت استفاده کنید

منبع