Notice: Undefined index: premium-vscroll in /home/codespir/domains/codespire.co.il/public_html/wp-content/plugins/premium-addons-for-elementor/includes/class-addons-integration.php on line 140

מבוא קצר ל-PWA

Progressive Web App או בקיצור pwa היא אפליקציה מבוססת דפדפן שניתן לשמור מאתר אינטרנט בעזרת האפשרות ׳Add to home screen׳ באייפון או באנדרואיד ישירות מהדפדפן. בעזרת טכניקות מסויימות אפשר ממש לפתח ככה אפליקציה שלמה אבל כרגע לא נכנס לזה.

בעזרת הלחצן ״שמירה למסך הבית״ ניתן לשמור קיצור דרך לאתר האינטרנט במכשיר הסלולרי שלכם. הקיצור דרך בצורתו הדיפולטיבית יפתח דפדפן עם האתר שלכם. אך בעזרת מספר ״מניפולציות״ אפשר להפוך את זה כך שייראה בדיוק כמו אפליקציה.

אז מבלי להתעכב, הנה מספר שלבים:

ראשית צריך להכין מספר דברים שהם הכרחיים על מנת שנוכל להקפיץ הודעה בדפדפן שבה הדפדפן מאפשר להוסיף למסך הבית. ללא הפמטרים הללו הגולש יצטרך ללכת לבד לתפריט ולשמור. ואנחנו מעדיפים להקל עליו. לכן על האתר לעמוד בקריטריונים.

1. האתר צריך לעבוד בפרוטוקול https.

2. האתר צריך להכיל קובץ manifest.json

את הקובץ ניתן להכין בעזרת ה״מחולל״ הבא: https://app-manifest.firebaseapp.com/ אך גם ניתן להכינו בצורה ידנית. ולהכניס את תג ה-html הבא לתוך ה-head של האתר:

שימו לב שמדובר בכתובת רלטיבית לעמוד שבו נמצאים ולכן מומלץ לדאוג לכך שהכתובת תהיה אולי הכתובת המלאה של האתר.

בקובץ ישנם מספר פרמטרים כמו צבע, שם וכו׳. אבל אנו נתעכב על האייקון שצריך (חייב) להיות 512 פיקסלים על 512 פיקסלים. חשוב מאוד! בנוסף לכך, ישנו צורך גם להגדיר איזה ״תצוגה״ תהיה לאפליקציה שלנו כאשר האפשרות הדיפולטיבית היא 'Browser' שמדמה דפדפן. אני בחרת באפשרות stanalone אך גם האפשרות fullscreen תתאים. בג׳נרטור שציינתי קודם תמצאו את שלל האפשרויות.

3. הוספת קוד js לטיפול באירועים (events)

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e;

    // Show the prompt
    deferredPrompt.prompt();
    // Wait for the user to respond to the prompt
    deferredPrompt.userChoice
      .then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('User accepted the A2HS prompt');
        } else {
          console.log('User dismissed the A2HS prompt');
        }
        deferredPrompt = null;
      });

});


window.addEventListener('appinstalled', (evt) => {
    app.logEvent('a2hs', 'installed');
});


if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('worker.js');
  }

הקוד מתחיל מהוספת ״האזנה״ לאירוע שקורה בדפדפן כרום בצורה דיפולטיבית. ובהקפצה של prompt ששואל אם תהיה מעוניין להוסיף את האפליקציה למסך הבית. בנוסף ישנה גם הגדרה של service worker שהוא השלב הבא וההכרחי שלנו בהגדרת האפליקציה. ההגדרה נעשית בקובץ worker.js אך כאמור תוכלו לשנות זאת לכל שם שתרצו. גם כאן מדובר בכתובת רלטיבית ולכן מומלץ להזין כתובת מלאה את הקובץ (אם למשל משתמשים בתבנית וורדפרס שבתוכה יושבים הקבצים).

4. קובץ worker.js

הנה קובץ:


var PRECACHE = 'precache-v1';
var RUNTIME = 'runtime';

// list the files you want cached by the service worker
PRECACHE_URLS = [
  './',
];


// the rest below handles the installing and caching
self.addEventListener('install', event => {
  event.waitUntil(
     caches.open(PRECACHE).then(cache => cache.addAll(PRECACHE_URLS)).then(self.skipWaiting())
  );
});

self.addEventListener('activate', event => {
  const currentCaches = [PRECACHE, RUNTIME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
    }).then(cachesToDelete => {
      return Promise.all(cachesToDelete.map(cacheToDelete => {
        return caches.delete(cacheToDelete);
      }));
    }).then(() => self.clients.claim())
  );
});

self.addEventListener('fetch', event => {
  if (event.request.url.startsWith(self.location.origin)) {
    event.respondWith(
      caches.match(event.request).then(cachedResponse => {
        if (cachedResponse) {
          return cachedResponse;
        }

        return caches.open(RUNTIME).then(cache => {
          return fetch(event.request).then(response => {
            // Put a copy of the response in the runtime cache.
            return cache.put(event.request, response.clone()).then(() => {
              return response;
            });
          });
        });
      })
    );
  }
});

ניתן ממש לעשות העתק הדבק לכל קטעי הקוד כאן וזה פשוט יעבוד לכם, אך ההמלצה היא גם לבצע מספר הגדרות. בשורה ה-5 של הקוד תראו מערך של ״כתובת״ רלטיביות לאפליקציה. הכתובות הללו הן למעשה רשימת קבצים ועמודים, בין אם פונטים, תמונות או קבצי js/css שישמרו בקאש במכשיר שהוריד את האפליקציה למסך הבית. המטרה היא שהאפליקציה תמשיך לעבוד ולרוץ גם כאשר אין חיבור לאינטרנט ובכך בעצם לספק חוויה מיטבית עבור הגולשים.

לבסוף, תוכלו לבצע בדיקה ולראות שההודעה קופצת לכם והאתר שלכם נשמר למסך הבית. מכאן ואילך יש לכם אפשרות לעבוד לעומק עם -js על מנת לגשת לכל מיני אלמנטים במכשיר כמו מצלמה, מיקרופון, מיקום וכו׳ (באישור כמובן של הגולש) ואף להקפיץ לו נוטיפיקיישן (גם באתר רגיל זה אפשרי).

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *