בניית אפליקציות Offline ב- HTML5: שימוש ב- Application Cache (בקיצור AppCache)

2 באוקטובר 2011

no comments

HTML5 Application Cache appcacheעם עליית הפופולריות של התקנים ניידים (טלפונים חכמים, מחשבי לוח ועוד), אפליקציות Web התומכות בעבודה Offline הופכות נפוצות יותר ויותר. HTML5 מגדיר דרך סטנדרטית לשמירת משאבים (קבצים, תמונות וכו’) ב- Cache מקומי ע”י ה- Application Cache (בקיצור AppCache).

עם ה- HTML5 Application Cache ניתן לשפר את ביצועי האפליקציות ע”י הורדת כמות הפניות לרשת ולתמוך בעבודה Offline כאשר האתר או החיבור לרשת לא זמינים.

הכירות עם HTML5 AppCache

HTML5 Application Cache מאפשר לדפים לשמור משאבים (קבצים, תמונות) באופן מקומי. את המשאבים שנרצה לשמור נגדיר בתוך קובץ manifest אליו נפנה מכל דף באפליקציה שירצה לעשות שימוש במשאבים האלה כאשר האפליקציה במצב Offline. הדפדפן יקרא את קובץ ה- manifest, יוריד את המשאבים באופן אסינכרוני שלא פוגע בטעינת הדף, וישמור אותם לשימוש עתידי.

קובץ ה- manifest

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

דוגמא לקובץ manifest:

CACHE MANIFEST
# This is a comment

CACHE:
style.css
script.js
index.htm
http://example.com/css/styles.css

FALLBACK:
/status.html /offline.html

NETWORK:
*

כל הוראה בקובץ ה- manifest מתחילה בשורה חדשה, כאשר הערות מתחילות בסימן #. השורה הראשונה CACHE MANIFEST מציינת לדפדפן שמדובר בקובץ manifest. השורות עם סינן הנקודותיים בסופן מציינות section של חוקים בקובץ.

ישנם מספר sections בקובץ ה- manifest:

  • CACHE – מציין את רשימת המשאבים שיש לשמור מקומית. בדוגמא יש 3 נתיבים יחסיים לכתובת השורש של האתר ועוד נתיב מפורש למשאב חיצוני לאתר. כאשר הדפדפן יקרא את קובץ ה- manifest, הוא יוריד את המשאבים האלה וישמור אותם ב- cache לשימוש עתידי.
  • FALLBACK – מה יש לעשות כאשר מנסים לגשת לקובץ שלא קיים ב- cache. כל שורה בסט החוקים הזה מכילה שני חלקים מופרדים בתו רווח. החלק הראשון מציין את המשאב שהאפליקציה תחפש והחלק השני את המשאב שיש להחזיר במידה והמשאב המבוקש לא שמור מקומית.
  • NETWORK – רשימת המשאבים שאין לשמור אותם מקומית וניתנים לגישה רק כאשר יש גישה לרשת.

קישור לקובץ ה- manifest

ניתן לקשר לקובץ ה- manifest בכל דף באפליקציה ע”י הוספת המאפיין manifest לתגית ה- <html> הראשית של הדף. הדפדפן ישמור ב- cache גם את הדף הנוכחי המפנה אל קובץ ה- manifest (בנוסף למשאבים המצויינים ב- manifest עצמו).

<!DOCTYPE html>
<html lang="en" manifest="manifest.appcache">
    ...
</html>

חשוב! לוודא ששרת ה- web יודע להחזיר קבצי manifest של HTML5 AppCache עם ה- mime-type הנכון. כדי להוסיף את ה- mime-type לאפליקציה, יש להוסיף את התוכן הבא לקובץ ה- web.config של האפליקציה, או לחילופין לערוך את קובץ הקונפיגורציה של ה- IIS כולו ובכך להחיל את השינוי על כל האפליקציות.

בדוגמא הזאת אני מראה קובץ web.config המגדיר את ה- mime-type מסוג text/cache-manifest לקבצי appcache שזו הסיומת המומלצת לקבצי HTML5 AppCache.

<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".appcache" mimeType="text/cache-manifest" />
    </staticContent>
  </system.webServer>
</configuration>

טיפים לשימוש ב- HTML5 Application Cache

1. התאמת משאבים מרובים באיזור ה- FALLBACK בקובץ ה- manifest

הזכרנו קודם שאיזור ה- FALLBACK בקובץ ה- manifest מכיל חוקים המורכבים משני חלקים. החלק הראשון מציין את חוק ההתאמה – לאילו משאבים האפליקציה תרצה לגשת והחלק השני את המשאב שיש להחזיר במידה והמשאב המבוקש לא קיים ב- cache. לדוגמא:

FALLBACK: 
/status.html /offline.html

במצב offline, כאשר האפליקציה תנסה לגשת לדף status.html שאינו נשמר ב- cache, הדפדפן יחזיר את הדף offline.html.

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

FALLBACK: 
/ /offline.html

חוק ההתאמה יתפוס פניה לכל דף באתר, בין אם בספריית השורש של האתר, כמו about.html/ או לדפים פנימיים כגון about/contact.html/.

2. עדכון ה- cache

כאשר הדפדפן הוריד את כל המשאבים המצויינים בקובץ ה- manifest ושמר אותם מקומית, הם ישמרו מקומית עד שהמשתמש ינקה את ה- cache או שהאפליקציה תעדכן את ה- manifest.

חשוב! עדכון המשאבים עצמם שקובץ ה- manifest עצמו מפנה אליהם לא מספיק כדי לגרום לאפליקציה לרענן את ה- cache.

עדכון יזום של ה- cache

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

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

CACHE MANIFEST

# Version 3

CACHE:
/css/main.css

סיכום

HTML5 Application Cache מאפשר לאפליקציה לחסוך בגישות לרשת וכן לתמוך בעבודה במצב offline, ע”י הגדרת חוקים פשוטים בקובץ manifest וקישור אליו מדפי האפליקציה.

HTML5 AppCache נתמך בין היתר בגירסת המפתחים השלישית של אינטרנט אקספלורר 10 הכלולה ב- Windows 8 Developer Preview, ומאפשרת לאפליקציות מטרו של Windows 8 לתמוך בעבודה offline.

תהנו!

Add comment
facebook linkedin twitter email