‫ב-2010 אנחנו עוברים ל-Offline‬

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

חשוב לדעת שעל-מנת לראות את הדוגמא שהכנתי, אתם צריכים לגלוש בדפדפן Firefox, החל מגרסה 3 ומעלה. בעתיד שתקן HTML 5 ישוחרר, כל הדפדפנים יתמכו, בצורה זו או אחרת בשירותים לא-מקוונים, בינתיים, אני לא ממליץ להשתמש בטכנולוגיות לא-מקוונות באתרים שתכינו (כמובן מחוסר תמיכה בשאר הדפדפנים).

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

למה אנחנו צריכים את זה?

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

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

כיצד זה עובד?

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

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

הגדרת קבצי האתר שישמרו ב-catch באמצעות קובץ manifest.
שמירת נתוני הגולש באמצעות אובייקט localStorage.
טיפול בהתחברות והתנתקות הגולש באמצעות אירועי התחברות-התנתקות.

קובץ manifest

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

1	CACHE MANIFEST

1
2
3
4
5
6

# v2
index.htm
style.css
offline.js
canvas.js
images/pattern8-pattern-58a.png

כפי שאתם רואים, הקובץ מכילה רשימה של קבצים שאותם אני מעוניין לשמור במחשב הגולש לאפשרות בו הוא יעבוד במצב לא-מקוון. שמרתי קובץ תמונה, קובץ CSS, קבצי JS וקובץ htm. השורה השלישית היא כמובן הערה, חשוב לשים לב שהדפדפן פיירפוקס ישמור את רשימת הקבצים שמופיעים במאניפסט רק בפעם הראשונה שהוא מגיע לאתר ובכל פעם שנוצר שינוי בקובץ המאניפסט, כך שאם עדכנתם קובץ ואתם מעוניינים שהדפדפן ישמור מחדש את הקבצים ב-catch שנו פרט כלשהו בקובץ המאניפסט, לדוגמא: שנו את הערת הגרסה ל"v3".

לאחר שהבנו את הנקודה הזו נעבור לנקודה השנייה.

שמירת נתונים במחשב הגולש

ישנן שתי דרכים לשמור נתונים במחשב הגולש:

window.sessionStorage – שמירת נתונים כל עוד הדפדפן פתוח. ברגע שייסגר ימחקו כל הנתונים.
window.localStorage – שמירת נתונים לאורך זמן. הנתונים ישמרו גם לאחר יציאה מהדפדפן ואף כיבוי המחשב.

לשני האובייקטים הללו ישנם אותן פעולות ומאפיינים:

setItem(שם מפתח, ערך) – הוסף או עדכן ערך באובייקט האחסון.
getItem(שם מפתח) – אחזור ערך מתוך אובייקט האחסון.
removeItem(שם מפתח) – מחיקת ערך מתוך אובייקט האחסון.
length - מספר הערכים ששמורים.
key(אינדקס) – שם המפתח באינדקס.
clear() – אתחול אובייקט האחסון (מחיקת כל הערכים).

לדוגמא:

1 2	//שמירת ערך חדש window.sessionStorage.setItem("key", "my data");

1 2	// אחזור ערך - יחזיר "my data", מחרוזת. window.sessionStorage.getItem("key");

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

אירועי אונליין/אופליין

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

1
2
3

// הדרך הרגילה לקריאה לאירועי אונליין/אופליין
window.addEventListener("online", function() { ... });
window.addEventListener("offline", function() { ... });

1 2	// אפשרות לקריאה דרך jQuery $(window).bind("online offline", function() { ... });

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

בנוסף המאפיין navigator.onLine, מחזיר true או false כאשר הדפדפן במצב אונליין, אופליין בהתאמה. המאפיין הזה נתמך ברוב הדפדפנים.

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

סיכום ודוגמא

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

<דוגמא><קוד>

בדוגמא, עברו למצב אופליין (file-> Work Offline) שנו את שורת הטקסט ולחצו save. כאשר תעברו חזרה למצב אונליין הדפדפן יעלה את התוכן שהזנתם אוטומטית לשרת ויעדכן את מסד הנתונים. שימו לב שבמצב אופליין תוכלו לגשת לעמוד האינטרנט של הדוגמא למרות שהוא נמצא בשרת מרוחק (כי למעשה קבצי האתר שמורים אצלכם במחשב בזכות קובץ המאניפסט).

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