כיצד לגרום לאפליקציה שלך לעבוד במצב לא מקוון בכוח JavaScript

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

השפעה שנייה של ניידות זו היא טעינה איטית של אתרים כבדים: אמזון מצאה כי רק 100 אלפיות השנייה של זמן טעינה נוסף עלו להם 1% מהמכירות.

במצבים אלה נרצה לקבל גישה לא מקוונת לתוכן שלנו. לכן קיימים כלים כמו Instapaper ו- Pocket. Spotify ו- Netflix מאפשרים לך גם להוריד מדיה לשימוש לא מקוון.

אנו יכולים לראות בקלות שיש דרישה לתכונה זו וכיצד היא יכולה להועיל לעסק שלך.

הגיע הזמן שהאינטרנט יעבור לאינטרנט.

למרבה המזל אנחנו כבר לא צריכים לבנות אפליקציות מקוריות כדי להשיג מטרה זו. אנו יכולים ליצור אתר מחובר עם עוצמה של JavaScript הודות החדש עובד בשירות ו API Cache תכונות.

מה זה עובד שירות (SW)?

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

הסוכנות BETC ייצרה אתר הדגמה בשם whentheinternetisdown.com עבור חברת הטלקום הצרפתית Bouygues. זה עובד רק במצב לא מקוון ומרגיש סוג של קסם. לך תנסה את זה :)

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

אוקי זה אחלה, תגיד לי איך לעשות את זה אז.

אוקי, נתחיל בכמה תנאים מוקדמים:

  • על מנת להשתמש ב- SWs, עליך להפעיל את https באתר שלך.
  • אתה אמור לקבל הבנה ראויה של אופן הפעולה של הבטחות JavaScript.
  • SWs עובד בכל הדפדפנים המודרניים פרט לחברנו IE.
  • גם אם מדובר ב- JavaScript, הם פועלים בהקשר של עובדי רשת. מה שאומר: אין DOM, ורץ מחוץ לחוט הראשי.
  • להבין כיצד פועלים בסיסי נתונים.
  • הקוד של עובד השירות שלך צריך להיות בקובץ JavaScript נפרד. דוגמה: service-worker.js

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

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

1) רישום

אם זמין, רשום את קובץ ה- SW שלך. זה יחזיר הבטחה, כך שתוכלו לטפל בשגיאות. באפשרותך גם לציין היקף כתובות אתרים באפשרויות ההרשמה.

2) התקנה

עובדי השירות מבוססים על אירועים. בקצרה, עליך לצרף התקשרות חוזרות לאירועים, כפי שהיית עושה עם element.addEventListener. האירוע הראשון שעליו אתה צריך להשתמש הוא אירוע ההתקנה. זה זמן טוב לשמור את כל המשאבים החיוניים שלך במטמון כמו Javascript, CSS, HTML, תמונות ... כאן ממשק ה- Cache מצטרף למסיבה!

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

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

3) הפעלה

זה קצת עדין.

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

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

שלב ההפעלה שימושי בעת עדכון SW. המקרה הנפוץ ביותר הוא ניקוי המטמון של ה- SW הקודם שהותקן.

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

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

לא ממש משנה מתי מתקשרים לדלג SkipWaiting (), כל עוד זה בזמן ההמתנה או לפני כן. זה די נפוץ לקרוא לזה באירוע ההתקנה.

פאי! בואי נעשה הפסקה ונסכם את מה שראינו:

  • עובדי שירות הם חלקים של JavaScript המאפשרים תכונות לא מקוונות כגון מטמון.
  • בחנו את מחזור החיים של SW: רישום, התקנה, הפעלה
  • למדנו כיצד ליישם מקרים של שימוש נפוץ כגון: משאבי מטמון וניקוי מטמון באמצעות ממשק ה- API של המטמון.
  • ראינו ש- self.skipWaiting ו- self.clients.claim מאפשרים לנו להפעיל SWs מהר יותר כדי לתפוס אירועים מהר יותר.

בסדר עוברים ימינה ...

4) אחזור

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

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

איננו יכולים לכסות את כל האפשרויות שמציעים עובדי השירות במאמר אחד. ובכל זאת, אני ממליץ לך לבדוק מה אפשרי: Custom 404, רקע סינכרון API לניתוח לא מקוון, תבנית בצד ServiceWorker .... העתיד נראה מרגש!

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

אחסן נתונים מותאמים אישית באמצעות IndexedDB

הנחיה כללית לאחסון נתונים היא כי יש לאחסן משאבים הניתנים לכתובת URL באמצעות ממשק המטמון, ונתונים אחרים צריכים להיות מאוחסנים באמצעות IndexedDB. לדוגמא קבצי HTML, CSS ו- JS צריכים להיות מאוחסנים במטמון, ואילו נתונים JSON צריכים להיות מאוחסנים ב- IndexedDB. שים לב שזו רק קו מנחה, ולא כלל קבוע. (מָקוֹר)

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

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

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

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

סיכום

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

ראינו כיצד להשתמש בהם דרך מחזור החיים של עובד השירות ומה אתה יכול לעשות באמצעות ה- Cache and Fetch API. האפשרויות כמעט בלתי מוגבלות. אז היו יצירתיים ולא חמדנים מדי באחסון המכשיר.

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

לקריאה נוספת:

  • ספר הבישול הלא מקוון: //developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
  • PWA ומחוצה לה: //developers.google.com/web/ilt/pwa/lab-offline-quickstart
  • מעבדה: קבצים במטמון עם עובד השירות: //developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker
  • מחזור החיים של עובד השירות: //developers.google.com/web/fundamentals/primers/service-workers/lifecycle
  • למחוק את מחזור החיים של עובד השירות: //scotch.io/tutorials/ demystifying-the-service-worker-lifecycle
  • הפעל עובדי שירות מהר יותר: //davidwalsh.name/service-worker-claim
  • נתונים חיים בעובד השירות: //developers.google.com/web/ilt/pwa/live-data-in-the-service-worker
  • אינדקס DBמושגים בסיסיים: //developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
  • תחילת העבודה עם אחסון מקוון מתמשך עם IndexedDB: //itnext.io/getting-started-with-persistent-offline-storage-with-indexeddb-1af66727246c