אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » HTML 5 » HTML5 appcache

HTML5 appcache

רן בר-זיק נובמבר 6, 2011 7:45 am אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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 כבר היום, או לפחות בעתיד המאד מאד קרוב. שווה להתנסות – זה כיף, קל וגם פשוט!

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
»שעשועים עם HTML5 Video Tag
»localStorage vs sessionStorage
HTML 5

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

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

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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