تکامل و ضرورت برنامه های وب پیشرو (PWA)

معرفی

اینترنت به طور رسمی در 1 ژانویه 1983 راه اندازی شد و در ابتدا فقط از طریق رایانه های رومیزی قابل دسترسی بود. این دریچه ای به دنیای اطلاعات و ارتباطات بود. با این حال، با ظهور گوشی‌های هوشمند در اواخر دهه 2000، اینترنت تقریباً از هر نقطه‌ای قابل دسترسی شد و نحوه تعامل ما با محتوای دیجیتال را متحول کرد.

تا سال 2014، تعداد کاربرانی که از طریق اپلیکیشن های موبایلی به اینترنت دسترسی داشتند، به طرز چشمگیری افزایش یافت. طبق گزارش Flurry Analytics، استفاده از اپلیکیشن موبایل ۸۶ درصد از زمانی را که مصرف‌کنندگان تلفن همراه ایالات متحده صرف گوشی‌های هوشمند خود کرده‌اند، در سال ۲۰۱۴ تشکیل می‌دهد، در حالی که استفاده از وب موبایل تنها ۱۴ درصد از آن زمان را به خود اختصاص داده است. علاوه بر این، Smart Insights از این ادعا پشتیبانی می‌کند و خاطرنشان می‌کند که کاربران گوشی‌های هوشمند به طور متوسط ​​2 ساعت و 19 دقیقه در روز را روی برنامه‌ها صرف می‌کنند، در حالی که این مدت در مرورگرهای وب تلفن همراه تنها 22 دقیقه است.

با ترکیب بینش از این منابع، آشکار است که برنامه های تلفن همراه تا سال 2014 به طور عمده بر استفاده از اینترنت در تلفن های هوشمند تسلط داشتند، که نشان دهنده ترجیح قابل توجه برنامه ها نسبت به مرور وب تلفن همراه در آن دوره است. این زمینه را برای ظهور فراهم کرد برنامه وب پیشروs (PWAs) در سال 2015، که با هدف پر کردن شکاف بین دسترسی گسترده مرورگرهای وب و عملکرد برتر برنامه های تلفن همراه بومی است.

منابع:

آشنایی با برنامه های وب پیشرو (PWA)

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

• عملکرد آفلاین: PWA ها می توانند به صورت آفلاین یا در شرایط شبکه کم کار کنند، زیرا سرویس دهندگان منابع ضروری را در حافظه پنهان ذخیره می کنند.
• قابلیت نصب: آنها را می توان مستقیماً از مرورگر بدون نیاز به توزیع فروشگاه برنامه روی صفحه اصلی دستگاه نصب کرد.
• طراحی تعاملی: PWA ها با اندازه ها و جهت گیری های مختلف صفحه نمایش سازگار می شوند و تجربه ای ثابت را در همه دستگاه ها تضمین می کنند.
• امنیت: از طریق HTTPS، PWA ها اتصالات ایمن را تضمین می کنند و از یکپارچگی داده ها محافظت می کنند.
• Push Notifications: مانند برنامه های بومی، PWA ها می توانند اعلان های فشار ارسال کنند تا کاربران را درگیر و مطلع نگه دارند.
• بروزرسانی های خودکار: کارگران خدمات به روز رسانی پس زمینه را فعال می کنند و مطمئن می شوند که کاربران همیشه آخرین نسخه را بدون دخالت دستی دارند.

مراحل اجرای دقیق

• ایمن بمانید (HTTPS):
  برای محافظت از داده‌های کاربر و جلوگیری از دستکاری، اطمینان حاصل کنید که برنامه از طریق HTTPS ارائه می‌شود.

• ایجاد کارگران خدماتی:
  Service Workers اسکریپت هایی هستند که در پس زمینه اجرا می شوند، درخواست های شبکه را مدیریت می کنند و برای استفاده آفلاین ذخیره می کنند. در اینجا یک مثال ساده از اسکریپت Service Worker آورده شده است:

// service-worker.js
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('app-cache').then(cache => {
      return cache.addAll([
        "https://dev.to/",
        '/index.html',
        '/styles.css',
        '/script.js',
        '/offline.html'
      ]);
    })
  );
});

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

فقط باید فایل service-worker.js خود را در فهرست اصلی پروژه خود قرار دهید. این تضمین می کند که کنترل کل دامنه برنامه شما را در اختیار دارد. در نهایت، آن را در فایل اصلی جاوا اسکریپت خود ثبت کنید:

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

• یک فایل مانیفست ایجاد کنید:
  فایل مانیفست یک فایل JSON است که حاوی ابرداده‌هایی درباره برنامه وب شما است، از جمله جزئیاتی مانند نام برنامه، نام کوتاه، رنگ طرح زمینه و نمادها. این فایل برای نصب برنامه وب شما بر روی دستگاه کاربر بسیار مهم است. می توانید آن را به صورت دستی ایجاد کنید یا از ابزارهای آنلاین برای تولید فایل استفاده کنید. برخی از ابزارهای مفید عبارتند از:

نمونه فایل مانیفست:

{
  "name": "My Progressive Web App",
  "short_name": "MyPWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/images/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

. نام و نام کوتاه: نام و نام کوتاه برنامه شما.
. start_url: نشانی اینترنتی که برنامه هنگام راه اندازی باید از آن شروع شود.
. نمایش دادن: حالتی را که در آن PWA نمایش داده می شود (مثلاً مستقل، تمام صفحه) را مشخص می کند.
. رنگ پس زمینه: رنگ پس زمینه صفحه نمایش چلپ چلوپ.
. تم_رنگ: رنگ نوار ابزار برنامه
. نمادها: آرایه ای از نمادها برای PWA در اندازه های مختلف.

فایل manifest.json را در دایرکتوری اصلی پروژه خود یا در دایرکتوری که می توانید مستقیماً به آن مراجعه کنید، ذخیره کنید.
در نهایت، مطمئن شوید که فایل مانیفست را در of your HTML: