اولین نگاهی به برنامه های وب مترقی

توسعه برنامه‌های وب پیشرو پیچیده‌تر از برنامه‌های کاربردی وب سنتی است، اما در ازای آن تأثیرات زیادی دارند.

• ویژگی‌های برنامه‌های وب پیشرو
• نصب برنامه های وب پیشرفته
• کارمندان خدمات
• نتیجه‌گیری

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

ویژگی های برنامه های وب مترقی

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

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

ویژگی های رایج برنامه های وب مترقی عبارتند از:

• عملکرد آفلاین
• عملکرد پس‌زمینه، از جمله همگام‌سازی
• صفحه اصلی “نصب”
• اعلان‌ها و هشدارها، از جمله زمانی که برنامه اجرا نمی‌شود
• حافظه پنهان تهاجمی (استراتژی برای مبارزه با مشکلات شبکه متناوب)
• طرح‌بندی‌های بین دستگاهی/واکنشی/طراحی‌های اول تلفن همراه
• قابلیت نشانک گذاری و اشتراک گذاری از طریق پیوند

یک مورد استفاده خوب برای یک برنامه وب پیشرفته، انتقال یک برنامه کاربردی تحت وب برای پیاده سازی ویژگی های PWA مانند عملکرد آفلاین است. Google Docs نمونه‌ای از برنامه‌های مبتنی بر مرورگر است که از «حالت آفلاین» در زمانی که شبکه در دسترس نیست، پشتیبانی می‌کند. اساساً، این برنامه می‌تواند همه چیز را به صورت محلی در مرورگر ذخیره کند و سپس وقتی مرورگر آنلاین شد، آن را با قسمت پشتی همگام‌سازی کند.

البته، همگام سازی بخش های توزیع شده یک برنامه ذاتاً پیچیده است. Google Docs یک شرکت بزرگ معماری است، اما یک برنامه کاربردی ساده تر می تواند بسیار ساده تر باشد. الزامات برنامه تعیین می کند که اجرای PWA چقدر باید درگیر باشد.

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

نصب برنامه های وب پیشرفته

یک ویژگی متمایز برنامه های وب مترقی این است که می توان آنها را “نصب کرد” حتی اگر در مرورگر اجرا شوند. در قسمت جلویی، پیوندی را در صفحه اصلی دستگاه قرار می دهید که وب سایت را در مرورگر راه اندازی می کند.

نصب از طریق یک فایل manifest.json انجام می شود که ویژگی های برنامه و نماد صفحه اصلی آن را برای مرورگر توضیح می دهد. در اینجا یک مثال از یک مانیفست ساده آورده شده است:

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

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

کارگران خدمات

سرویس‌کاران راه اصلی برای ارائه ویژگی‌های PWA هستند. شی navigator.serviceWorker به شما امکان دسترسی به Service Worker API را می دهد. فقط در زمینه ایمن (HTTPS) در دسترس است. یک سرویس‌کار شبیه به یک رشته کارگری است، اما چرخه عمر طولانی‌تری دارد و دسترسی کمتری به DOM و APIهای مرورگر دارد.

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

کارمندان خدمات چرخه زندگی منحصر به فردی دارند. شرایط خاص تعیین می کند که آنها چه زمانی خاتمه می یابند. آن‌ها می‌توانند اعلان‌ها را بر اساس به‌روزرسانی‌های فشار اجرا کرده و حتی پس از بسته شدن صفحه‌ای که آنها را ایجاد کرده است، به کاربر ارائه دهند. چرخه عمر کارگر خدمات نمای کلی خوبی ارائه می دهد. همچنین می توانید اطلاعات خاص مرورگر را در مورد خاتمه کارمندان خدمات بیابید. برای مثال، در Chrome.< /p>

رویدادهای کارکنان خدمات

اساساً، کارکنان خدمات، کنترل‌کننده رویداد ناهمزمان هستند. آنها به رویدادها از UI یا از قسمت پشتی پاسخ می دهند. هنگام ساختن آنها، باید برنامه ریزی کنید که زمینه آنها بین رویدادها پاک شود – نمی توانید حالت را در متغیرهای محلی ذخیره کنید تا بین رویدادها به اشتراک گذاشته شود. در عوض، از کش یا پایگاه داده استفاده می کنید. در اینجا همه رویدادهایی وجود دارد که یک سرویس دهنده می تواند به آنها پاسخ دهد:

• install: این رویداد یک بار هنگامی که سرویس‌کار برای اولین بار نصب می‌شود فعال می‌شود. این اغلب برای پیش ذخیره سازی دارایی هایی مانند HTML، CSS، و فایل های جاوا اسکریپت برای فعال کردن عملکرد آفلاین استفاده می شود.
• فعال کردن: این رویداد پس از فعال شدن یک سرویس دهنده فعال می شود. این مکان مناسبی برای پاکسازی حافظه پنهان نسخه‌های قبلی سرویس‌کار یا انجام کارهایی است که باید زمانی که سرویس‌کار کنترل مشتریان را در دست می‌گیرد (صفحات وب کنترل‌شده) انجام دهید.
• واکشی: این رویداد هر زمان که یک صفحه کنترل‌شده درخواستی به شبکه ارسال می‌کند فعال می‌شود. این به کارمند سرویس اجازه می‌دهد تا به عنوان یک واسطه نامرئی برای صفحه اصلی عمل کند، درخواست‌ها را رهگیری کند و به طور بالقوه آنها را تغییر دهد تا نسخه ذخیره‌شده را ارائه کند یا به طور کامل آن را مدیریت کند.
• همگام سازی: این رویداد در فواصل زمانی تعریف شده توسط مرورگر زمانی که اتصال شبکه پایدار است فعال می شود. اغلب برای همگام سازی تغییرات داده های ایجاد شده به صورت آفلاین با سرور استفاده می شود. Sync API به خودکار کردن درخواست‌ها در زمانی که شبکه در دسترس است کمک می‌کند.
• push: این رویداد زمانی فعال می‌شود که کارگر سرویس یک اعلان فشاری از یک سرور دریافت می‌کند. این به کارمند خدمات اجازه می دهد تا اعلان را مدیریت کرده و به کاربر نمایش دهد، حتی اگر صفحه وب بسته باشد.
• notificationclick: این رویداد زمانی فعال می شود که کاربر روی یک اعلان فشار نمایش داده شده کلیک کند. می‌توانید از این رویداد برای مدیریت تعامل اعلان و هدایت کاربر به صفحه خاصی در PWA استفاده کنید.
• خطا: این رویداد می‌تواند در موقعیت‌های مختلفی فعال شود که کارگر سرویس در حین کار با خطا مواجه شود. می‌توانید از این رویداد برای اهداف ورود به سیستم یا اشکال‌زدایی استفاده کنید.
• پخش و ارسال پیام: اینها رویدادهایی هستند که به طور خاص توسط کد جاوا اسکریپت شما در رشته اصلی مطرح می شوند. از آنها برای ارسال داده به کارکنان خدمات شما استفاده می شود.

همراه با این رویدادها، کارکنان خدمات به چندین API دسترسی دارند:

• IndexedDB: پایگاه داده ذخیره اشیاء قوی که از پرس و جو پشتیبانی می کند. بین نمونه های سرویس دهنده زندگی می کند و با رشته اصلی به اشتراک گذاشته می شود. 
• Cache API: Cache API گرفتن اشیاء درخواست و ذخیره پاسخ آنها را آسان می کند. همراه با رویداد fetch، Cache API به راحتی (از دید رشته اصلی) پاسخ‌های حافظه پنهان را برای حالت آفلاین آسان می‌کند. MDN توضیح خوبی از استراتژی‌های حافظه پنهان بالقوه دارد.< /li>
• Fetch and WebSocket API: اگرچه سرویس‌کار به DOM دسترسی ندارد، اما از طریق Fetch و WebSocket API به شبکه دسترسی کامل دارد.
• موقعیت جغرافیایی: بحث در مورد نحوه افشای کارکنان خدمات وجود دارد به موقعیت جغرافیایی و پشتیبانی از موقعیت جغرافیایی در کارکنان خدمات.

مثال کارمند خدمات

کارگر خدمات همیشه با بارگیری در یک فایل جاوا اسکریپت با شی navigator.serviceWorker زندگی خود را آغاز می کند، مانند:

const subscription = await navigator.serviceWorker.register('service-worker.js');

اشتراک‌های رویداد سپس در service-worker.js انجام می‌شوند. برای مثال، برای تماشای یک رویداد fetch و استفاده از حافظه پنهان API، می‌توانید کاری شبیه به این انجام دهید:

self.addEventListener('fetch', (event) => {
  const request = event.request;
  const url = new URL(request.url);

  // Try serving assets from cache first
  event.respondWith(
    caches.match(request)
      .then((cachedResponse) => {
        // If found in cache, return the cached response
        if (cachedResponse) {
          return cachedResponse;
        }

        // If not in cache, fetch from network
        return fetch(request)
          .then((response) => {
            // Clone the response for potential caching
            const responseClone = response.clone();

            // Cache the new response for future requests
            caches.open('my-cache')
              .then((cache) => {
                cache.put(request, responseClone);
              });

            return response;
          });
      })
  );
});

وقتی کارمند سرویس بارگیری می‌شود، self به آن اشاره می‌کند. روش addEventListener به شما امکان می دهد رویدادهای مختلف را تماشا کنید. در داخل رویداد fetch، می‌توانید از Cache API برای بررسی اینکه آیا URL درخواست داده شده را قبلاً در حافظه پنهان دارید یا خیر، استفاده کنید. اگر چنین است، آن را پس خواهید فرستاد. اگر URL جدید است، درخواست خود را به سرور ارسال می کنید و سپس پاسخ را در حافظه پنهان ذخیره می کنید. توجه داشته باشید که Cache API بسیاری از پیچیدگی ها را در تعیین اینکه چه چیزی همان درخواست است یا نیست حذف می کند. استفاده از سرویس‌کار همه این موارد را برای موضوع اصلی شفاف می‌کند.

نتیجه گیری

برنامه‌های وب پیشرو به شما امکان می‌دهند برنامه خود را در یک مرورگر تحویل دهید و قابلیت‌هایی ارائه می‌دهند که در یک برنامه معمولی مبتنی بر مرورگر نمی‌توانید پیدا کنید. از سوی دیگر، هنگام توسعه برنامه های وب پیشرو باید با پیچیدگی بیشتری دست و پنجه نرم کنید. بسیاری از کارهای مشابه بومی که می‌توانید با یک برنامه وب پیشرفته انجام دهید شامل سرویس‌دهندگان است که به کار بیشتری نسبت به انجام همان کار در یک برنامه بومی با استفاده از سیستم عاملی مانند Android یا macOS نیاز دارند.

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