מדריך מקיף ל-Progressive Web Apps (PWAs): כיצד להפוך את האתר שלך לאפליקציה מתקדמת

PWA (Progressive Web App) הוא יישום אינטרנט שמציע חוויית משתמש דומה לאפליקציות מובייל, כולל יכולת עבודה במצב לא מקוון, התראות פוש, והתקנה במסך הבית, תוך שימוש בטכנולוגיות כמו Service Workers ו-Manifest.

מבוא

Progressive Web Apps (PWAs) הן הדור הבא של אפליקציות אינטרנט. הן משלבות את הנגישות של אתרי אינטרנט עם היכולות של אפליקציות מובייל מסורתיות. במדריך זה, נלמד בפירוט כיצד להפוך את האתר שלך ל-PWA, כולל יישום של התראות דחיפה.

אגב גם היא אפליקצית PWAs

PWAs app

1. יצירת Web App Manifest

ה-Web App Manifest הוא קובץ JSON שמגדיר כיצד האפליקציה שלך תיראה ותתנהג כשהיא מותקנת על מכשיר המשתמש.

1. צור קובץ בשם manifest.json בתיקיית השורש של הפרויקט שלך.

2. הוסף את התוכן הבא:

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

3. הסבר על השדות:

  • name: השם המלא של האפליקציה.

  • short_name: שם קצר לשימוש במקומות עם מקום מוגבל.

  • start_url: הדף שייטען כשהאפליקציה נפתחת.

  • display: כיצד האפליקציה תוצג (standalone = כמו אפליקציה רגילה).

  • background_color: צבע הרקע בזמן טעינת האפליקציה.

  • theme_color: צבע הנושא של האפליקציה.

  • icons: רשימה של אייקונים בגדלים שונים.

    • 4. קשר את ה-manifest ל-HTML שלך על ידי הוספת השורה הבאה בתוך תג ה-<head>:

    <link rel="manifest" href="/manifest.json">

    2. יצירת Service Worker

    Service Worker הוא סקריפט JavaScript שרץ ברקע ומאפשר תכונות מתקדמות כמו עבודה במצב לא מקוון והתראות דחיפה.

    1. צור קובץ בשם sw.js בתיקיית השורש של הפרויקט.

    2. הוסף את הקוד הבא:

    const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js'
];

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

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

    3. הסבר על הקוד:

  • אנחנו מגדירים רשימה של קבצים לשמירה במטמון.

  • ב-install event, אנחנו פותחים מטמון חדש ומוסיפים את כל הקבצים אליו.

  • ב-fetch event, אנחנו בודקים אם הבקשה קיימת במטמון. אם כן, אנחנו מחזירים את הגרסה מהמטמון. אם לא, אנחנו מבצעים בקשת רשת רגילה.

    • 4. רשום את ה-Service Worker בקובץ ה-JavaScript הראשי שלך:

    if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then((registration) => {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      }, (err) => {
        console.log('ServiceWorker registration failed: ', err);
      });
  });
}

    אפליקציית PWAs לדוגמה

    3. יישום והפעלת Push Notifications

    כדי לשלוח התראות דחיפה, נצטרך להשתמש ב-Push API ו-Notifications API. הנה השלבים המפורטים:

    1. בקש הרשאה מהמשתמש:

    function requestNotificationPermission() {
  return new Promise((resolve, reject) => {
    if (!('Notification' in window)) {
      reject(new Error('Browser does not support notifications'));
    } else {
      Notification.requestPermission().then((permission) => {
        if (permission === 'granted') {
          resolve();
        } else {
          reject(new Error('Permission not granted for Notification'));
        }
      });
    }
  });
}

    2. הרשם לשירות Push:

    function subscribeToPushService() {
  navigator.serviceWorker.ready
    .then((registration) => {
      const subscribeOptions = {
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_VAPID_KEY')
      };
      
      return registration.pushManager.subscribe(subscribeOptions);
    })
    .then((pushSubscription) => {
      console.log('Received PushSubscription: ', JSON.stringify(pushSubscription));
      // שלח את ה-pushSubscription לשרת שלך
      return sendSubscriptionToBackEnd(pushSubscription);
    });
}

// פונקציה עזר להמרת מפתח VAPID
function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/\-/g, '+')
    .replace(/_/g, '/');

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

    3. טפל בהתראות ב-Service Worker:

    הוסף את הקוד הבא ל-sw.js:

    self.addEventListener('push', (event) => {
  const options = {
    body: event.data.text(),
    icon: 'icon.png',
    vibrate: [100, 50, 100],
    data: {
      dateOfArrival: Date.now(),
      primaryKey: '2'
    }
  };
  
  event.waitUntil(
    self.registration.showNotification('Push Notification', options)
  );
});

    4. שליחת התראות מהשרת:

    בצד השרת, תצטרך להשתמש ב-web-push או ספרייה דומה לשליחת התראות. הנה דוגמה בסיסית ב-Node.js:

    const webpush = require('web-push');

const vapidKeys = webpush.generateVAPIDKeys();

webpush.setVapidDetails(
  'mailto:your@email.com',
  vapidKeys.publicKey,
  vapidKeys.privateKey
);

// הפונקציה הזו תקרא כשאתה רוצה לשלוח התראה
function sendNotification(subscription, dataToSend) {
  webpush.sendNotification(subscription, dataToSend)
    .catch((err) => {
      console.error("Error sending notification, reason: ", err);
    });
}

    זכור להחליף את 'YOUR_PUBLIC_VAPID_KEY' במפתח האמיתי שלך.

    סיכום

    הפיכת האתר שלך ל-PWA כוללת מספר שלבים חשובים:

    1. יצירת Web App Manifest

    2. יישום Service Worker

    3. הפיכת האתר לרספונסיבי

    4. אופטימיזציה לביצועים

    5. יישום עבודה במצב לא מקוון

    6. הפעלת Push Notifications

    כל אחד מהשלבים הללו תורם ליצירת חווית משתמש טובה יותר ומתקדמת יותר. זכור לבדוק את ה-PWA שלך באופן קבוע עם כלים כמו Lighthouse ולהתאים אותה לפי המשוב של המשתמשים.

    יתכן שחלק מהתמונות בדף זה נלקחו מהאתר freepik.com
    שיתוף