אפליקציות רבות מציגות נתונים בצורת רשימות, ובעת התאמת האפליקציות לדפדפן סלולרי עלינו להשקיע מחשבה לגבי איך יראו הרשימות באפליקציה הסלולרית. jQuery Mobile מכילה תמיכה מצויינת ברשימות, ובפוסט זה נראה זאת ע”י בניית אפליקציה המציגה רשימה מעוצבת שלמשתמשים בטוויטר התומכת בקטגוריות, סינון ועוד, שנראית כך:
בסוף הפוסט תמצאו את ה- HTML המלא של הדוגמא.
רשימה פשוטה
נתחיל מרשימה פשוטה של הכינויים בטוויטר של מספר אנשי מיקרוספוט מוכרים וכן מספר MVP’s, הבנוייה מתגיות HTML סטנדרטיות.
<div data-role="content">
<ul>
<li>@bursteg</li>
<li>@maordp</li>
<li>@scottgu</li>
<li>@shanselman</li>
<li>@shai_rai</li>
<li>@gilfink</li>
<li>@arikpoz</li>
</ul>
</div>
בגלישה לדף הזה נקבל את התוצאה הבאה:
הגדרת הרשימה ("data-role="listview)
כדי להפוך את הרשימה הפשוטה לתצוגת רשימה ב- jQuery Mobile נוסיף את ההגדרה "data-role="listview:
<ul data-role="listview">
...
</ul>
ונקבל את התוצאה הבאה:
תוכן פריטים ברשימה
כל פריט ברשימה מצויין ע”י תגית li שיכולה להכיל תוכן נוסף מלבד טקסט פשוט. נוסיף לכל פריט כותרת וטקסט עם שם המשתמש:
<ul data-role="listview">
<li>
<h3>Guy Burstein</h3>
<p>@bursteg</p>
</li>
<li>
<h3>@maordp</h3>
<p>Maor David-Pur</p>
</li>
...
</ul>
ונקבל את התוצאה הבאה:
נוסיף לכל משתמש גם את מספר האנשים שהוא עוקב אחריהם, ונצמיד את המספר הזה לימין. ישנן 2 דרכים לעשות זאת: ע”י שימוש ב- class ששמו ui-li-count עבור מספר המציין מספר, וע”י ה- class ששמו ul-li-aside עבור כל טקסט אחר שנרצה להציג בצד.
<ul data-role="listview">
<li>
<h3>Guy Burstein</h3>
<p>@bursteg</p>
<p class="ui-li-count">729</p>
</li>
<li>
<h3>@maordp</h3>
<p>Maor David-Pur</p>
<p class="ui-li-aside">533</p>
</li>
...
</ul>
ונקבל:
נוסיף גם תמונה עבור כל משתמש – תמונת פרופיל הטוויטר שלו, בתור Icon לאיבר ברשימה, ונוסיף את ה- class ששמו ui-li-icon.
<ul data-role="listview">
<li>
<img src="http://a2.twimg.com/profile_images/1461601398/twitter_normal.JPG"
alt="Guy Burstein" class="ui-li-icon" />
<h3>Guy Burstein</h3>
<p>@bursteg</p>
<p class="ui-li-count">729</p>
</li>
<li>
<img src="http://a2.twimg.com/profile_images/1239419922/TechEd2008_normal.jpg"
alt="Maor David-Pur" class="ui-li-icon" />
<h3>@maordp</h3>
<p>Maor David-Pur</p>
<p class="ui-li-count">533</p>
</li>
...
</ul>
כעת, נקבל את התוצאה הבאה:
ניתן לראות שלא קיבלנו את התוצאה הרצויה. Icon ב- jQuery Mobile מוגדר להיות בגודל ברירת מחדל של 32x32 ותמונת הפרופיל בטוויטר היא 48x48, ולכן היא מסתירה חלק מהטקסט. כדי לפתור זאת, נציג את הדף בדפדפן Desktop ונשתמש בכלי הפיתוח של אינטרנט אקספלורר כדי לתחקר את ה- css שמשפיע על מיקום התמונה.
בעת שימוש בכלי הפיתוח של אינטרנט אקספלורר, נוכל לתחקר את ה- css שמשפיע על הדרך בה מוצג כל פריט ברשימה, ולזהות מהן הגדרות ה- css שעלינו לשנות כדי להתאים את העיצוב.
במקרה שלנו, נוסיף לדף את הגדרת ה- css הבאה, המשנה את העיצוה לפריטים ברשימה שיש להם Icon.
<style type="text/css">
.ui-li-has-icon.ui-li-static
{
padding-left: 60px;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
</style>
לאחר השינוי, נקבל את התוצאה הבאה, בה התמונות והטקסט ממוקמים כראוי.
הגדרת רשימה מעוצבת פנימה (inset)
ניתן לשנות את עיצוב הרשימה כולה כך שלא תתפוס את כל שטח המסך, אלא יהיו לה גבולות, וזה ע”י הוספת התכונה "data-inset=”true להצהרת הרשימה.
<ul data-role="listview" data-inset="true">
...
</ul>
כעת תיראה הרשימה כך:
הוספת קטגוריות / מפרידים לרשימה (list-divider)
הרשימה מכילה משתמשים בשתי קטגוריות – אנשי מיקרוסופט ו- MVP’s. נוסיף לרשימה אלמנטים נוספים ונתייג אותם כמפרידים:
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Microsoft</li>
<li>
<img src="http://a2.twimg.com/profile_images/1461601398/twitter_normal.JPG"
alt="Guy Burstein" class="ui-li-icon" />
<h3>Guy Burstein</h3>
<p>@bursteg</p>
<p class="ui-li-count">729</p>
</li>
...
<li data-role="list-divider">MVP's</li>
<li>
<img src="http://a0.twimg.com/profile_images/57280018/Untitled_normal.jpg"
alt="Shai Raiten" class="ui-li-icon" />
<h3>Shai Raiten</h3>
<p>@shai_rai</p>
<p class="ui-li-count">194</p>
</li>
...
</ul>
עם המפרידים, הרשימה תיראה עתה כך:
חיפוש ברשימה (data-filter)
jQuery Mobile מאפשרת להוסיף חיפוש ברשימה באופן פשוט ביותר, ע”י הוספת המאפיין "data-filter="true להצהרת הרשימה:
<ul data-role="listview" data-inset="true" data-filter="true">
...
</ul>
הוספת אפשרות החיפוש תגרום להוספת שדה חיפוש בראש הרשימה, שבהזנת קלט מהמשתמש יוצגו רק הפריטים ברשימה העונים למחרוזת שהוקשה, תוך שמירה על החלוקה לקטגוריות. בדוגמא מטה, חיפוש האות g מביא לצמצום הרשימה לפריטים המתאימים:
שינוי עיצוב הרשימה ל- Theme אחר
jQuery Mobile תומכת במספר Themes לעיצוב האפליקציות, ששמן a עד d. ניתן להגדיר לרשימה את סגנון העיצוב ע”י הוספת המאפיין data-theme להצהרת הרשימה:
<ul data-role="listview" data-inset="true" data-filter="true" data-theme="a">
...
</ul>
עם ה- Theme ששמו a, תיראה כעת הרשימה כך:
ה- HTML המלא של הדוגמא הנ”ל הוא:
<!DOCTYPE html>
<html>
<head>
<title>Twitter Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="Scripts/jquery.mobile-1.0rc1.js" type="text/javascript"></script>
<link href="Content/jquery.mobile-1.0rc1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.ui-li-has-icon.ui-li-static
{
padding-left: 60px;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Twitter Mobile</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true" data-theme="a">
<li data-role="list-divider">Microsoft</li>
<li>
<img src="http://a2.twimg.com/profile_images/1461601398/twitter_normal.JPG"
alt="Guy Burstein" class="ui-li-icon" />
<h3>Guy Burstein</h3>
<p>@bursteg</p>
<p class="ui-li-count">729</p>
</li>
<li>
<img src="http://a2.twimg.com/profile_images/1239419922/TechEd2008_normal.jpg"
alt="Maor David-Pur" class="ui-li-icon" />
<h3>@maordp</h3>
<p>Maor David-Pur</p>
<p class="ui-li-count">533</p>
</li>
<li>
<img src="http://a0.twimg.com/profile_images/565139568/redshirt_normal.jpg"
alt="Scott Guthrie" class="ui-li-icon" />
<h3>Scott Guthrie</h3>
<p>@scottgu</p>
<p class="ui-li-count">729</p>
</li>
<li>
<img src="http://a2.twimg.com/profile_images/1463303502/image_normal.jpg"
alt="Scott Hanselman" class="ui-li-icon" />
<h3>Scott Hanselman</h3>
<p>@shanselman</p>
<p class="ui-li-count">49,061</p>
</li>
<li data-role="list-divider">MVP's</li>
<li>
<img src="http://a0.twimg.com/profile_images/57280018/Untitled_normal.jpg"
alt="Shai Raiten" class="ui-li-icon" />
<h3>Shai Raiten</h3>
<p>@shai_rai</p>
<p class="ui-li-count">194</p>
</li>
<li>
<img src="http://a1.twimg.com/profile_images/1311002472/GilFink100_150_normal.jpg"
alt="Gil Fink" class="ui-li-icon" />
<h3>Gil Fink</h3>
<p>@gilfink</p>
<p class="ui-li-count">90</p>
</li>
<li>
<img src="http://a0.twimg.com/profile_images/1152201658/new-main-smaller_normal.jpg"
alt="Arik Poznanski" class="ui-li-icon" />
<h3>Arik Poznanski</h3>
<p>@arikpoz</p>
<p class="ui-li-count">59</p>
</li>
</ul>
</div>
<div data-role="footer">
Copyright 2011
</div>
</div>
</body>
</html>
בפרק הקודם במדריך jQuery Mobile יצרנו אפליקציה בסיסית המורכבת מדף בודד וראינו את המבנה הבסיסי שלו. בפרק הזה נרחיב את האפליקציה למספר דפים ונדבר על הניווט ביניהם.
ניווט בסיסי בין דפים באפליקציה
נוסיף לאפליקציה 3 דפים נוספים: products.html, services.html ו- about.html.
בתור תוכן לדפים האלה, נשתמש בתבנית הבסיסית של עמוד באפליקציית jQuery Mobile עם מעט תוכן, כדי שנוכל להבדיל בין הדפים (שינוי ה- title ותוכן ה- h1 באיזור ה- header). לדוגמא, תוכן עמוד ה- about יהיה:
<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="Scripts/jquery.mobile-1.0rc1.js" type="text/javascript"></script>
<link href="Content/jquery.mobile-1.0rc1.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>About Us</h1>
</div>
<div data-role="content">
Here is some content for the "About Us" page.
</div>
<div data-role="footer">
Copyright 2011
</div>
</div>
</body>
</html>
כעת, בעמוד הראשי (index.html) נוסיף רשימת קישורים לדפים האחרים ע”י שימוש בתגיות HTML סטנדרטיות.
<div data-role="content">
<a href="about.html">About Us</a><br />
<a href="products.html">Products List</a><br />
<a href="services.html">Services</a><br />
</div>
נריץ ונראה את האפליקציה בדפדפן הסלולרי, ונראה את רשימת הקישורים מוצגת באופן בסיסי.
איך jQuery Mobile מטפלת בניווט בין דפים?
אם נריץ את האפליקציה בדפדפן Desktop ולא בדפדפן מובייל, ונלחץ על הקישור About נקבל אמנם את התוצאה הרצויה, אך נשים לב שבשורת הכתובת לא קיבלנו את הכתובת אותה ציפינו לקבל:
הסיבה היא ש- jQuery Mobile לא מבצע גלישה אל דף היעד, אלא התשתית טוענת את תוכן דף היעד, ומכניסה אותו לתוך ה- DOM של הדף הנוכחי. התשתית מוסיפה את הנתיב אליו רצינו להגיע לשורת הכתובת כחלק ממנגנון הסטוריית הגלישה, שמאפשרת לנו לחזור אחורה לדפים קודמים בהם ביקרנו. למעשה אפליקציית jQuery Mobile היא אפליקציה של עמוד אחד.
שימוש בכפתורים
באתרי אינטרנט המותאמים לדפדפן Desktop אנחנו רגילים להשתמש בקישורים, אך באתרים סלולרים השימוש בהם אינו נוח כיוון שהם דורשים רמת דיוק כלשהי שקשה להגיע אליה בממש מבוסס מגע. לכן, בדר”כ נרצה שפעולות נפוצות באפליקציות המובייל שלנו יופעלו דרך כפתורים שמותאמים ללחיצת אצבע ולא דורשים דיוק רב.
כדי להפוך קישור פשוט לכפתור, נוסיף את ההגדרה "data-role=”button לקישורים:
<div data-role="content">
<a href="about.html" data-role="button">About Us</a><br />
<a href="products.html" data-role="button">Products List</a><br />
<a href="services.html" data-role="button">Services</a><br />
</div>
ונקבל את התוצאה הבאה, שהיא הרבה יותר ידידותית למגע:
הוספת Icons לכפתורים
לכפתורים ב- jQuery Mobile ניתן להוסיף אייקונים ולמקם אותם במיקומים שונים, ע”י שימוש בהגדרה "data-icon="delete כאשר "delete" מציין את שם האייקון לכפתור.
jQuery מגיעה עם רשימת אייקונים בסיסית אותם ניתן להוסיף לאפליקציה בצורה הזאת, כאשר שמות הכפתורים (משמאל לימין) הם:
-
arrow-l, arrow-r, arrow-u, arrow-d
-
delete, plus, minus, check
-
gear, refresh, forward, back
-
grid, star, alert, info
-
home, search
מיקום ה- Icon ע”ג הכפתור
ניתן למקם את האייקון ע”ג הכפתור במספר מקומות ע”י שימוש בהגדרה data-iconpos וציון המיקום.
לדוגמא תוכן הדף הבא:
<div data-role="content">
<a href="about.html" data-role="button"
data-icon="arrow-l" data-iconpos="left">About Us</a>
<a href="products.html" data-role="button"
data-icon="star" data-iconpos="top">Products List</a>
<a href="services.html" data-role="button"
data-icon="home" data-iconpos="right">Services</a>
</div>
יביא לתוצאה הזאת:
כמוכן, ניתן גם להציג כפתור ללא טקסט ועם אייקון בלבד. הוספת הקישור:
<a href="/" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
תביא להוספת הכפתור העליון:
תהנו!
jQuery Mobile מאפשרת ליצור אפליקציות מובייל בטכנולוגיות Web עם HTML ו- JavaScript. התשתית, בקוד פתוח, המבוססת על ספריית ה- JavaScript הפופולרית jQuery, הופכת את יצירת אפליקציות מובייל התומכות במגוון פלטפורמות המובייל הקיימות היום למשהו פשוט, נוח ויפה.
במדריך jQuery Mobile זה, לאורך מספר פרקים, נכיר את התשתית משלב יצירת אתר חדש ועד לקבלת אפליקציית מובייל עשירה.
יצירת פרוייקט חדש
נתחיל ביצירת אתר ריק חדש. ב- Visual Studio 2010 ניצור Web Site חדש (לא New Project, אלא New Site):
במסך ה- New Web Site שנפתח, נבחר בתבנית של אתר ריק (ASP.NET Empty Web Site), ובמיקום האתר (Web Location בחלק התחתון) נבחר ב- HTTP.
נלחץ על Browse כדי ליצור אתר חדש תחת IIS Express. אם אתם עוד לא מכירים את IIS Expres - הגיע הזמן!
במסך שנפתח נבחר ב- Node של IIS Express ונלחץ על הכפתור Create New Site.
נזין את שם האתר החדש שנרצה ליצור (בדוגמא – jqm) ונלחץ על Open.
לסיום, נאשר את יצירת האתר החדש בחלון ה- New Web Site.
נקבל אתר ריק ללא שום דף HTML.
נוסיף דף HTML לאתר, בשם index.html.
לצורך בדיקה בלבד, נוסיף לדף ה- HTML תוכן כלשהו, לדוגמא:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Title</title>
</head>
<body>
<h1>This is a test content.</h1>
</body>
</html>
הרצה ובדיקה בדפדפן
בדיקת האתר בדפדפן יכולה להתבצע בשתי דרכים:
1. שימוש בדפדפן Desktop
נריץ את האתר שלנו בדפדפן. ונוודא שאנחנו מקבלים את התוצאה הרצויה.
נפעיל את כלי הפיתוח של אינטרנט אקספלורר 9 (ע”י לחיצה על F12), ובתפריט Tools נבחר באפשרות Resize ואז Custom.
במסך שנפתח, נוסיף את גודל הדפדפן של הטלפון הסלולרי, לדוגמא, במקרה של Windows Phone: רוחב 480, גובה 800 פיקסלים.
נזין את הרוחב והגובה ונלחץ על Add.
כעת נבחר את הרזולוציה ברשימה ונלחץ על Resize כדי לשנות את גודל הדפדפן לגודל דפדפן סלולרי.
2. שימוש באמולטור של Windows Phone
האופציה הרצויה היא כמובן לבדוק את האתר שלנו עם דפדפן סלולרי, לדוגמא ע”י שימוש באמולטור של Windows Phone המגיע עם כלי הפיתוח של Windows Phone.
נפעיל את האמולטור מתפריט ההתחל.
נפעיל את אינטרנט אקספלורר באמולטור של Windows Phone. כאשר ננסה להזין כתובת ע”י שימוש במקלדת נגלה שכברירת מחדל אנחנו לא יכולים לעשות זאת, ועלינו להשתמש במקלדת של הטלפון באמולטור.
כדי בכל זאת לאפשר שימוש במקלדת של המחשב נשתמש בקיצור המקשים Ctrl + PgUp.
נזין את כתובת האתר שלנו (בדוגמא: http://localhost:47300), והדפדפן באמולטור יציג את האתר.
הורדה והתקנה של jQuery Mobile
הדרך הפשוטה ביותר להוריד ולהתקין את הגירסא העדכנית של jQuery Mobile היא להשתמש ב- NuGet.
ב- Visual Studio 2010, נסמן את האתר שלנו, נלחץ על הכפתור הימני של העכבר ונבחר באפשרות Manage Nuget Packages.
בחלון שנפתח, נבצע חיפוש לחבילה jQuery Mobile ונקבל את החבילות העונות לקריטריון החיפוש.
החבילה בה אנחנו מעוניינים היא jQuery Mobile 1.0. בדוגמא מופיעה גירסת RC שהיא הגירסא העדכנית של jQuery Mobile נכון ליום כתיבת המדריך.
נסמן את החבילה הזאת ונלחץ על Install. כיוון שהחבילה עושה שימוש ב- jQuery, ויז’ואל סטודיו יבצע את כל ההורדות וההתקנות הנדרשות עבורנו.
בסוף התהליך יראה האתר שלנו כך:
נוספה ספריית Content ובה קבצי ה- css של jQuery Mobile וכן מספר אייקונים. הספרייה Scripts מכילה את קבצי הספרייות של jQuery ו- jQuery Mobile.
דף בסיסי של jQuery Mobile
לאחר שהוספנו את הספריות jQuery ו- jQuery Mobile לאתר שלנו, ניתן להתחיל לבנות את האפליקציה.
נשנה את הדף index.html שבנינו קודם:
1. ה- Doctype
דף אפליקציית jQuery Mobile תמיד יתחיל ב- doctype של HTML5, כיוון שהתשתית עושה שימוש במגוון יכולות של HTML5.
2. Viewport meta tag
בתוך איזור ה- head נשים את הגדרת ה- Viewport המגדירה לדפדפן הסלולרי כיצד להתאים את מרחק התצוגה עבור תצוגת האתר. באופן ברירת מחדל הדפדפן הסלולרי מבצע zoom out כדי להציג אתר שלם לפי הגודל אליו הותאם.
<head>
<title>Test Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
לדוגמא: האתר שלנו כרגע מוצג בדפדפן הסלולרי באופן הבא:
|
האתר כרגע ללא שימוש בתבית ה- viewport
|
האתר עם הגדרת ה- viewport
 |
3. קישור לספריות jQuery ו- jQuery Mobile
עוד בתוך איזור ה- head נוסיף את הקישור לסקריפטים ל- CSS של ספריות ה- jQuery ו- jQuery Mobile ע”י גרירת הקבצים המתאימים מה- Solution Explorer לתוך עורך הקוד:
<head>
<title>Test Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="Scripts/jquery.mobile-1.0rc1.js" type="text/javascript"></script>
<link href="Content/jquery.mobile-1.0rc1.css"
rel="stylesheet" type="text/css" />
</head>
4. הגדרת דף בסיסי באפליקציה
באיזור ה- body, כל דף באפליקציה יזוהה ע”י תגית (בדר”כ div) עם התכונה: "data-role="page.
<body>
<div data-role="page">
...
</div>
</body>
תגיות ה- data מאפשרות להוסיף כל מידע חופשי לאלמנטים של HTML5 כדי שספריות JavaScript יוכלו לעשות בהם שימוש. מומלץ לקרוא את הפוסט בנושא HTML5: הוספת מידע חופשי לאלנטים עם data- attributes ו- datasets.
בתוך איזור ה- page, ניתן להשתמש בתגיות HMTL תקניות, אך דף טיפוסי ב- jQuery Mobile יכיל 3 איזורים בסיסיים: header, footer ו- content.
<div data-role="page">
<div data-role="header">
...
</div>
<div data-role="content">
...
</div>
<div data-role="footer">
...
</div>
</div>
בסה”כ יראה הדף הבסיסי באפליקציית jQuery Mobile כך (מעתה, ניתן להעתיק את התוכן הזה לכל דף חדש שניצור):
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="Scripts/jquery.mobile-1.0rc1.js" type="text/javascript"></script>
<link href="Content/jquery.mobile-1.0rc1.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
This is some content </div>
<div data-role="footer">
Copyright 2011 </div>
</div>
</body>
</html>
נציג את הדף הזה בדפדפן הסלולרי שלנו ונקבל את התוצאה הבאה:
סיכום
בפרק זה במדריך jQuery Mobile יצרנו אפליקציה בסיסית וראינו את המבנה הבסיסי של דף באפליקציה. ראינו איך לסדר את סביבת העבודה כדי שנוכל לבדוק איך נראית האפליקציה שלנו בדפדפן ה- Desktop ובדפדפן הסלולרי.
בפרקים הבאים נמשיך בבניית אפליקצית ה- Web למובייל ונעשיר את הדוגמא עוד יותר.
עם עליית הפופולריות של התקנים ניידים (טלפונים חכמים, מחשבי לוח ועוד), אפליקציות Web התומכות בעבודה Offline הופכות נפוצות יותר ויותר. HTML5 מגדיר דרך סטנדרטית לשמירת משאבים (קבצים, תמונות וכו’) ב- Cache מקומי ע”י ה- Application Cache (בקיצור AppCache).
עם ה- HTML5 Application Cache ניתן לשפר את ביצועי האפליקציות ע”י הורדת כמות הפניות לרשת ולתמוך בעבודה Offline כאשר האתר או החיבור לרשת לא זמינים.
הכירות עם HTML5 AppCache
HTML5 Application Cache מאפשר לדפים לשמור משאבים (קבצים, תמונות) באופן מקומי. את המשאבים שנרצה לשמור נגדיר בתוך קובץ manifest אליו נפנה מכל דף באפליקציה שירצה לעשות שימוש במשאבים האלה כאשר האפליקציה במצב Offline. הדפדפן יקרא את קובץ ה- manifest, יוריד את המשאבים באופן אסינכרוני שלא פוגע בטעינת הדף, וישמור אותם לשימוש עתידי.
קובץ ה- manifest
קובץ ה- manifest הוא קובץ טקסט פשוט המגדיר את המשאבים שיש לשמור למצב offline. הרשימת יכולה להכיר תנאים לשמירת המשאבים, הוראות להתמודדות עם מצבים בהם אין גישה למשאבים כלשהם וכן רשימת משאבים שאין לשמור אותם ב- cache.
דוגמא לקובץ manifest:
כל הוראה בקובץ ה- 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.
תהנו!