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

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

תכונות אלו מביאות את החוויה החלקה והידידותית למשתמש של אפליקציות מקוריות לדפדפן האינטרנט.

עובדי שירות הם מרכיב בסיסי ביצירת אפליקציות אינטרנט פרוגרסיביות (PWA).

הבנת עובדי שירות

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

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

יישומים מרכזיים לעובדי שירות

ישנן מספר יישומים עבור עובדי שירות. הם כוללים:

  • PWAs: עובדי שירות מספקים כוח רב לאפליקציות אינטרנט פרוגרסיביות. הם מבצעים בקשות רשת מותאמות אישית, הודעות דחיפה, תמיכה במצב לא מקוון וטעינה מהירה.
    • instagram viewer
  • שמירה במטמון: עובדי שירות יכולים לאחסן את נכסי האפליקציה - תמונות, קוד JavaScript וקובצי CSS - באחסון המטמון של הדפדפן. זה מאפשר לדפדפן לאחזר אותם מהמטמון שלו במקום להביא אותם מהשרת המרוחק דרך הרשת. כתוצאה מכך, התוכן נטען מהר יותר, וזה שימושי במיוחד עבור משתמשים עם חיבורי אינטרנט איטיים או לא אמינים.
  • סנכרון ברקע: עובדי שירות יכולים לסנכרן נתונים ולהפעיל משימות רקע אחרות, גם כאשר המשתמש אינו מקיים אינטראקציה פעילה עם האפליקציה או כאשר האפליקציה אינה פתוחה בדפדפן.

שילוב עובדי שירות ביישומי Next.js

לפני שצולל לתוך הקוד, זה עוזר להבין איך עובדי שירות עובדים. ישנם שני שלבים מרכזיים בשימוש בעובדי שירות: הַרשָׁמָה ו הַפעָלָה.

במהלך השלב הראשון, הדפדפן רושם את עובד השירות. הנה דוגמה פשוטה:

const registerServiceWorker = async () => {
if ("serviceWorker"in navigator) {
 registration = await navigator.serviceWorker.register("/sw.js");
 }
};
registerServiceWorker();

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

בשלב ההפעלה, עליך להתקין ולהפעיל שירות עובד על ידי האזנה ל- להתקין ו לְהַפְעִיל אירועים באמצעות מאזיני אירועי JavaScript. הנה איך אתה יכול להשיג זאת:

registration.addEventListener("install", () => {
console.log("Service worker installed");
});
registration.addEventListener("activate", () => {
console.log("Service worker activated");
});

אתה יכול לכלול קוד זה מיד לאחר תהליך ההרשמה. זה אמור לפעול מיד לאחר שתהליך הרישום של Service Worker הצליח.

אתה יכול למצוא את הקוד של הפרויקט הזה בו GitHub מאגר.

צור פרויקט Next.js

כדי להתחיל, הפעל את הפקודה הזו כדי לגייס פרויקט Next.js באופן מקומי:

npx create-next-app next-project

הוספת Service Worker לאפליקציית Next.js כוללת את השלבים הבאים:

  1. רשום עובד שירות בסביבת ההיקף הגלובלי.
  2. צור קובץ JavaScript של Service Worker בספרייה הציבורית.

הוספת שירות עובד

ראשית, רשום עובד שירות. עדכן את src/pages/_app.js קובץ כדלקמן. הכללת הקוד בקובץ זה מבטיחה ש-Service Worker רושם כאשר האפליקציה נטענת ויש לו גישה לכל נכסי האפליקציה.

import { useEffect } from'react';
exportdefaultfunctionApp({ Component, pageProps }) {
 useEffect(() => {
if ('serviceWorker'in navigator) {
 navigator.serviceWorker
 .register('/service-worker.js', { scope: '/' })
 .then((registration) => {
console.log(
'Service worker registered successfully. Scope:',
 registration.scope
 );
 })
 .catch((error) => {
console.error('Service worker registration failed:', error);
 });
 }
 }, []);
return<Component {...pageProps} />;
}

ה useEffect וו מופעל כאשר הרכיב עולה. כמו הדוגמה הקודמת, הקוד בודק תחילה אם הדפדפן של המשתמש תומך בעובדי שירות.

אם התמיכה קיימת, הוא רושם את הסקריפט של service worker שנמצא בנתיב הקובץ שצוין, ומציין את היקפו כ"/”. המשמעות היא של-Service Worker יש שליטה על כל המשאבים באפליקציה. אתה יכול לספק היקף מפורט יותר אם תרצה, למשל, "/products”.

אם הרישום מצליח, הוא רושם הודעת הצלחה, יחד עם היקפו. אם יש שגיאה במהלך תהליך הרישום, הקוד יתפוס אותה וירשום הודעת שגיאה.

התקן והפעל את Service Worker

הוסף את הקוד הבא לקובץ חדש, public/service-worker.js.

const installEvent = () => {
 self.addEventListener('install', () => {
console.log('service worker installed!!!');
 });
};
installEvent();

const activateEvent = () => {
 self.addEventListener('activate', () => {
console.log('service worker activated!!!');
 });
};
activateEvent();

כדי לבדוק אם ה-Service Worker נרשם, הותקן והופעל בהצלחה, הפעל את שרת הפיתוח ופתח את האפליקציה שלך בדפדפן.

npm run dev

לִפְתוֹחַ כלי המפתחים של Chrome חלון (או המקבילה של הדפדפן שלך), ונווט אל יישום לשונית. תחת עובדי שירות בסעיף, אתה אמור לראות את ה-Service Worker שרשמת.

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

משאבי שמירה במטמון עם עובדי שירות

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

כדי לשמור את נכסי האפליקציה במטמון, כלול את הקוד הבא ב- service-worker.js קוֹבֶץ.

const cacheName = 'test-cache';
self.addEventListener('fetch', (event) => {
 event.respondWith(
 caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request).then((response) => {
return caches.open(cacheName).then((cache) => {
 cache.put(event.request, response.clone());
return response;
 });
 });
 })
 );
});

כאשר משתמש ניגש לראשונה לדף הבית, קוד זה בודק אם יש תגובה שמור עבור הבקשה במטמון. אם קיימת תגובה במטמון, השירות מחזיר אותה ללקוח.

אם לא קיימת תגובה במטמון, ה-Service Worker מביא את המשאב מהשרת דרך הרשת. היא משרתת את התגובה ללקוח ומאחסנת אותה עבור בקשות עתידיות.

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

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

שימוש ב-Service Workers לשיפור הביצועים

עובדי שירות הם כלי רב עוצמה לשיפור הביצועים של אפליקציות Next.js. הם יכולים לשמור משאבים במטמון, ליירט בקשות ולספק תמיכה לא מקוונת, כל אלו יכולים לשפר את חווית המשתמש.

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