HTML5 appcache

שימוש ב-Application cache, טכניקת ניהול cache מתקדמת שמפקיעה את ה-cache מהדפדפן לטובת המתכנת.

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
בדיקת 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 בכלי המפתחים של כרום

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

פוסטים נוספים שכדאי לקרוא

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

ספריות ומודולים

להתנסות ב AutoGPT

הטרנד החם בעולם ה-GPT וה-AI – הפעלת אייג׳נטים בקלות עם Auto GPT.

פתרונות ומאמרים על פיתוח אינטרנט

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

גלילה לראש העמוד