بناء تطبيقات الويب التقدمية (PWAs)

في هذا المنشور، سوف نستكشف تطبيقات الويب التقدمية (PWAs)، وهو نهج حديث لبناء تطبيقات الويب التي تقدم تجربة أصلية تشبه التطبيقات. سأغطي أساسيات PWA ومزاياها وخطوات إنشاء PWA من الصفر.

1. مقدمة إلى تطبيقات الويب التقدمية (PWAs)

ما هو تطبيق الويب التقدمي (PWA)؟

تطبيق الويب التقدمي هو نوع من البرامج التطبيقية التي يتم تقديمها عبر الويب، وتم إنشاؤها باستخدام تقنيات الويب الشائعة بما في ذلك HTML وCSS وJavaScript. تهدف تطبيقات PWA إلى العمل على أي نظام أساسي يستخدم متصفحًا متوافقًا مع المعايير.

الميزات الرئيسية لـ PWAs:

• سريع الاستجابة: يعمل على أي جهاز وحجم الشاشة.
• القدرة دون الاتصال بالإنترنت: تعمل دون الاتصال بالإنترنت أو في ظل ظروف الشبكة السيئة باستخدام عمال الخدمة.
• تجربة تشبه التطبيق: توفر تجربة مستخدم تشبه التطبيق مع ميزات مثل تثبيت الشاشة الرئيسية.
• آمن: يتم تقديمه عبر HTTPS لمنع التطفل وضمان سلامة المحتوى.
• قابلة لإعادة التفاعل: لتمكين دفع الإشعارات للحفاظ على تفاعل المستخدمين.

2. مزايا PWAs

لماذا نبني PWA؟

• تحسين الأداء: أوقات تحميل أسرع وتفاعلات أكثر سلاسة.
• تفاعل المستخدم المحسّن : دفع الإشعارات والوصول إلى الشاشة الرئيسية.
• تكاليف تطوير أقل: قاعدة تعليمات برمجية واحدة لكل من تجارب الويب والجوال.
• فوائد تحسين محركات البحث: يمكن اكتشاف تطبيقات PWA بواسطة محركات البحث.

3. إعداد PWA

المتطلبات الأساسية:

• المعرفة الأساسية بـ HTML وCSS وJavaScript.
• تم تثبيت Node.js وnpm/yarn.

إنشاء PWA بسيط:

1. إعداد المشروع:
   

   mkdir my-pwa
   cd my-pwa
   npm init -y
   npm install express
   

2. هيكل المشروع:
   

   my-pwa/
   ├── public/
   │   ├── index.html
   │   ├── styles.css
   │   └── app.js
   ├── server.js
   ├── package.json
   └── manifest.json
   

4. إنشاء ملف البيان

manifest.json:

يوفر ملف البيان بيانات وصفية حول PWA وهو مطلوب لتثبيت التطبيق على الشاشة الرئيسية.

// manifest.json
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

5. إنشاء ملفات HTML وCSS وJavaScript

index.html:

  
Welcome to My Progressive Web App!
  

styles.css:

/* styles.css */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f0f0f0;
  color: #333;
}

app.js:

// app.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('ServiceWorker registered: ', registration);
      })
      .catch(error => {
        console.log('ServiceWorker registration failed: ', error);
      });
  });
}

6. إعداد عامل الخدمة

عامل الخدمة هو برنامج نصي يقوم المتصفح بتشغيله في الخلفية، بشكل منفصل عن صفحة الويب. فهو يعترض طلبات الشبكة ويمكنه تخزين الموارد مؤقتًا لتحسين الأداء والقدرات دون اتصال بالإنترنت.

service-worker.js:

// service-worker.js
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/styles.css',
  '/app.js',
  '/manifest.json',
  '/icon-192x192.png',
  '/icon-512x512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});

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

7. إعداد الخادم

server.js:

const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'public')));

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

تشغيل الخادم:

node server.js

8. اختبار PWA الخاص بك

1. افتح التطبيق:

   • انتقل إلى http://localhost:3000 في متصفحك.

2. تسجيل عامل الخدمة:

   • افتح أدوات المطور (F12 أو انقر بزر الماوس الأيمن وحدد "فحص").
   • انتقل إلى علامة التبويب "التطبيق".
   • ضمن "عمال الخدمة"، يجب أن ترى عامل الخدمة الخاص بك مسجلاً.

3. إضافة إلى الشاشة الرئيسية:

   • على جهاز محمول، افتح PWA الخاص بك في المتصفح.
   • يجب أن تشاهد مطالبة بـ "الإضافة إلى الشاشة الرئيسية".

9. أفضل الممارسات لـ PWAs

أفضل الممارسات:

• استخدم HTTPS: تتطلب تطبيقات PWA سياقات آمنة.
• تحسين الصور: استخدم الصور سريعة الاستجابة والتحميل البطيء.
• تقليل طلبات الشبكة: تخزين الموارد بشكل فعال.
• ضمان الأداء الوظيفي دون اتصال بالإنترنت: توفير تجارب مفيدة دون اتصال بالإنترنت.

10. الاستنتاج

تلخيص النقاط الرئيسية التي تم تناولها:

• مقدمة إلى PWAs وفوائدها.
• إعداد PWA بسيط مع البيان وعامل الخدمة والتخزين المؤقت.
• أفضل الممارسات لبناء تطبيقات PWA قوية.

11. موارد إضافية

• وثائق PWA
• برامج تعليمية وأدلة حول موضوعات PWA المتقدمة.
• منتديات المجتمع والدعم.