HTML 5 מאפשר לנו יכולת שליטה מתקדמת ב-cache עם Application cache. כל הדפדפנים למעט אינטרנט אקספלורר מגרסה 9 ומטה כבר תומכים באפשרות הזו. אך אם הדפדפן לא תומך ביכולת הזו, הוא פשוט לא ישתמש ב-cache שלנו – זה לא ימנע ממנו לנהל את ה-cache של האתר באופן עצמאי כרגיל.
חלק גדול מהתוכן ומצילומי המסך הוצגו בהרצאתי בכנס HTML5Fest של ה-W3C.
אז מה בעצם application cache נותן לנו? פשוט יכולת טובה לנהל את ה-cache של הדפדפן. עד כדי יכולת לאפשר גלישה מלאה ב-offline ואפילו fallback במקרה שהמשתמש מנסה להכנס לדף שהוא לא יכול להכנס אליו. למרות שלכל דפדפן יש cache משלו, לא תמיד הוא מושלם. אנו, שמכירים יותר טוב מהדפדפן את המשתמש ואת האפליקציה שלנו, יכולים לנהל את ה-cache באופן אופטימלי. אני בוודאי שלא צריך לומר לכם כמה ניהול cache מסייע לנו – מעזרה גדולה ב-Server Side בכל הנוגע למשאבי שרת ועד חווית משתמש טובה ומהירה הרבה יותר.
כרגע יש מגבלה של עד חמישה מגהבייט לכל אתר – לפחות בכרום.
אז איך עושים את זה? אנחנו יוצרים קובץ appcache, על מנת שהוא יעבוד אנחנו חייבים לגרום לכך ששרת האינטרנט שלנו ידע להחזיר אותו כקובץ שהדפדפן ידע לזהות. פשוט מוודאים שכל קובץ עם סיומת appcache יקבל את הזהות של text/cache-manifest.
אם זה נשמע לכם מסובך – לא לדאוג! עושים את זה בקלות יתרה גם בשרתי חלונות וגם בשרתי לינוקס.
שרת לינוקס
בשרתי Apache שיש בהם mod_rewrite
יש להוסיף את השורה:
AddType text/cache-manifest appcache
אל קובץ ה-htaccess שנמצא ב-root של האפליקציה.
בשרתי Apache שאין בהם mod_rewrite
הוספת השורה:
text/cache-manifest appcache;
אל קובץ mime.types שנמצא בדרך כלל פה
/user/local/etc/httpd/conf/mime.types
בשרתי nginx מוסיפים את השורה אל: /etc/nginx/mime.types
גם בשרתי IIS (שרתים מבוססי חלונות) מאד קל לעשות את זה, אם יש לכם IIS manager, יש שם מקום להוסיף סוגי mime, כל מה שצריך זה להגדיר שכל קובץ עם סיומת appcache יוגש עם MIME בשם text/cache-manifest.
אחרי שהוספנו את השורה הזו לשרת שלנו, אנו יכולים לבדוק את זה באמצעות יצירת קובץ בשם test.appcache והורדה שלו באמצעות cURL או כלי אחר ולראות את ה-MIME Type שלו.
בדיקת MIME עם cURL
לא להכנס ללחץ אם אתם לא מבינים מה זה cURL ומה אני רוצה מהחיים שלכם. זה כלי של אנשי לינוקס. אפשר לבדוק MIME גם בדרכים אחרות – תוכנות שונות ומשונות גם לחלונות.
אחרי שסיימנו עם זה, אנחנו יכולים ליצור קובץ appcache ולהציב אותו במקום כלשהו – לצורך העניין ב-root שלנו. על מנת לקשר בין דף HTML ל-appcache שלנו, כל מה שאנו צריכים לעשות זה להכניס פרמטר בשם manfiest הכולל את הנתיב היחסי לקובץ שלנו. זה הכל.
<!DOCTYPE html>
<html lang="en" manifest="/my.appcache">
// your html document
</html>
נשאלת השאלה, מה בדיוק יש בקובץ הזה? הקובץ מחולק לשלושה חלקים – ה-cache, אותם דפים שהדפדפן טוען ישירות ל-cache שלו ומגיש אותם למשתמש, ה-fallback, אותם דפים שהדפדפן מגיש למשתמש במידה והוא מנותק מהאינטרנט ומנסה לגשת למשאבים שלנו בכל זאת וה-network, אותם דפים שאנו מגדירים שאסור לגשת אליהם במצב offline.
הנה דוגמה לקובץ appcache:
CACHE MANIFEST
# cache version 1.2
# This is a comment
CACHE:
/css/some.css
/css/some_offline.css
/js/some_screen.js
/img/logo.png
http://example.com/css/styles.css
/my/example.html
FALLBACK:
/ /offline.html
login.php offline-login.html
NETWORK:
login.php
update.php
ה-cache הוא חלק פשוט למדי – אנו מציינים את הנתיב היחסי או אפילו את כתובת הרשת המלאה של הדף שלנו. אנחנו לא יכולים להשתמש ב-wildcards. שימו לב שהדפדפן שומר באופן אוטומטי את הדף שמקושר ל-manifest שלנו באופן אוטומטי ב-cache ואין צורך להכניס כל עמוד ועמוד של האפליקציה שלנו ל-manifest אם אנו מעוניינים לתת למשתמש גישת אופליין לכל הדפים שהוא היה בהם בעבר.
ה-FALLBACK הוא קצת יותר מעניין. בדוגמה שלי הראיתי איך אני שם עמוד offline לכל דף ודף באפליקציה שלי, אבל אפשר לפרט דפים מסוימים ולתת להם גרסאות אופליין משלהם – תלוי בעמוד.
ה-NETWORK הוא יותר פשוט, שימו לב שאפשר להשתמש בכוכבית. זה לא wildcard אלא הוראה שכל משאב שלא מאוחסן ב-cache יצטרך חיבור לאינטרנט על מנת שנוכל לגשת אליו – אלא אם כן יש לו גרסת offline.
נשאלת השאלה איך לגרום לדפדפן לרפרש את ה-cache. התשובה היא מאד ברורה, פשוט לשנות את הקובץ. בגלל זה נהוג להכניס את מספר הגרסה בהערות – ובכל פעם שיש שינוי בקובץ ה-manifest, הדפדפן אמור לנקות את ה-cache ולטעון את כל המידע שוב.
עוד כמה דברים קטנים בנוגע ל-appcache. יש דפדפנים מסוימים, כמו פיירפוקס, שמבקשים מהמשתמש אישור לשמירת נתונים אופליין במידה ואנו משתמשים ב-appcache.
כרגע ניתן לדבג את כל העסק עם כלי המפתחים של כרום. יש API נוח יחסית לגישה אל ה-cache ובו אנו יכולים גם לראות אם המשתמש מחובר, עשה שימוש ב-cache ועוד.
דיבוג של appcache בכלי המפתחים של כרום
כפי שציינתי, אפשר להשתמש ביכולות של appcache כבר היום, או לפחות בעתיד המאד מאד קרוב. שווה להתנסות – זה כיף, קל וגם פשוט!
אהבתם? לא אהבתם? דרגו!
(אין הצבעות)
כותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
תשארו בקשר!