الاتصال في تطبيقات pwa

ليس بتلك البساطة، لا يكفي فقط تغيير موقع الويب وتوقع ظهور التغييرات في التطبيق.

لفهم عملية تحديث PWA يجب استيعاب آلية عمل عامل الخدمة Service Worker، فهو قلب تطبيق PWA، وهو ملف جافا سكريبت يعمل في الخلفية ويعمل كوسيط بين متصفح المستخدم وموقع الويب الخاص بك، حيث يتولى مهام مثل تخزين المحتوى في ذاكرة التخزين المؤقت، وإدارة الوظائف دون اتصال بالإنترنت، وإدارة التحديثات.

وعندما تقوم بإجراء تغييرات على موقع الويب لديك، يحتاج عامل الخدمة إلى معرفة تلك التغييرات، هنا يأتي دور إزالة ذاكرة التخزين المؤقت Cache Busting، أي يجب عليك التأكد من أن عامل الخدمة يمكنه التعرف على المحتوى الجديد وتحديث ذاكرة التخزين المؤقت الخاصة به وفقًا لذلك.

ويستمع عامل الخدمة إلى أحداث محددة تتعلق بالتحديثات، أحد الأحداث الرئيسية هو "updatefound"، والذي يتم تشغيله عندما يكتشف عامل الخدمة إصدارًا جديدًا من تطبيق PWA لديك، ومن خلاله تستطيع إبلاغ المستخدم بتوفر تحديث، و يسمح ذلك للمستخدم باختيار وقت تثبيت التحديث.

ستحتاج إلى إنشاء service worker وهو ملف sw.js وإليك مثال:

// sw.js
const CACHE_NAME = 'my-pwa-v1'; // قم بتحديث رقم الإصدار لكل تحديث


self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/style.css',
        '/script.js',
        // أضف ملفات أخرى إلى ذاكرة التخزين المؤقت
      ]);
    })
  );
});


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


self.addEventListener('updatefound', () => {
  const installingWorker = self.registration.installing;


  installingWorker.addEventListener('statechange', () => {
    if (installingWorker.state === 'installed') {
      if (navigator.serviceWorker.controller) {
        console.log('تحديث جديد متوفر. قم بتحديث الصفحة.');
        // تستطيع عرض إشعار أو مطالبة المستخدم بتحديث الصفحة
      }
    }
  });
});