بناء PWA للقرآن الكريم يعمل بدون إنترنت

بنيت PWA للقرآن الكريم — قارئ، وحاسبة مواقيت الصلاة، وأذكار، وعدّاد مسبحة، وآية وحديث يوميان — بشرط واحد لا يقبل المساومة: أن يعمل بلا أي اتصال. يلجأ إليه الناس أثناء الصلاة وفي المواصلات وفي أماكن إشارتها ضعيفة. العمل بدون إنترنت ليس ميزة إضافية هنا؛ بل هو المنتج نفسه.

Offline-first، وليس offline-ربما

التطبيق كله بـ JavaScript خالصة مع service worker يخزّن app shell في الـ cache عند التثبيت. الزيارة الأولى تهيّئ الـ cache، وفي كل زيارة بعدها يقلع التطبيق من الـ cache ولا يلمس الشبكة إلا لما لا يملكه بعد فعلًا.

const SHELL = 'quran-shell-v1';
const ASSETS = ['/', '/index.html', '/app.css', '/app.js'];

self.addEventListener('install', (e) => {
  e.waitUntil(caches.open(SHELL).then((c) => c.addAll(ASSETS)));
});

self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then((hit) => hit || fetch(e.request)),
  );
});

استراتيجية cache-first للـ shell تعني تحميلًا فوريًا وواجهة لا تصبح فارغة لمجرد انقطاع الشبكة.

مواقيت الصلاة بدون خادم

تُحسب مواقيت الصلاة على الجهاز من إحداثيات المستخدم، فتعمل بدون إنترنت أيضًا. وبصلاحية الموقع يغطي التطبيق طرق الحساب المعتمدة في أكثر من 30 دولة، وتشير واجهة البوصلة المغناطيسية إلى القبلة. وكل ما يختاره المستخدم — الموقع والخطوط والثيم — يُحفظ في localStorage، فيتذكره التطبيق دون حساب ودون backend.

الخطأ الذي علّمني التواضع

الـ service workers رائعة حتى لا تعود كذلك. أسوأ أخطائي كان حلقة toast التحديث: كنت أعرض رسالة 'نسخة جديدة متاحة' عندما ينتظر worker جديد، لكن اكتشافي كان يعمل مع كل تنقّل، فيرى المستخدمون الـ toast في حلقة متكررة. كان الحل أن أستمع إلى الـ worker المنتظر بالشكل الصحيح، وأعرض الرسالة مرة واحدة، وأعيد التحميل فقط عندما يتغير المتحكم فعلًا.

navigator.serviceWorker.addEventListener('controllerchange', () => {
  window.location.reload(); // the new worker took over — refresh once
});

تعلمت أيضًا أن أضع رقم إصدار في اسم الـ cache وأحذف الـ caches القديمة عند activate، وإلا بقيت ملفات الأمس عالقة للأبد بصمت.

الدرس

العمل offline-first يغيّر طريقة تفكيرك. تتوقف عن افتراض وجود الشبكة وتبدأ بمعاملتها كتحسين إضافي. والمكافأة تطبيق يبدو فوريًا ويواصل العمل عندما يستسلم كل شيء آخر في الهاتف — وهذا، لشيء يعتمد عليه الناس كل يوم، هو لبّ الموضوع.