העברת דף שלם למצב אופליין באמצעות HTML5 FileSystem API

אריק בידלמן

באמת מעצבן שמטמון האפליקציה הוא מעצבן ויש בו בעיות [1, 2, 3]. מגבלה גדולה אחת היא העובדה שלא ניתן לשמור נכסים באופן דינמי במטמון לפי דרישה. בעיקרון, זה הכל או לא כלום כשמדובר בהורדת אפליקציה למצב לא מקוון. כל מה שבמניפסט נשמר מראש או ששום דבר לא נשמר במטמון.

FileSystem API מסוג HTML5 הופך לפתרון אטרקטיבי לחסרונות של AppCache. אפשר לאחסן באופן פרוגרמטי היררכיות של קבצים ותיקיות במערכת הקבצים המקומית (שמופעלת בארגז חול) ולאחר מכן להוסיף/לעדכן/להסיר משאבים נפרדים לפי הצורך. הקולגה שלי, בוריס סמוס, אפילו כתב ספרייה נחמדה לניהול סוג כזה של שמירה במטמון אופליין בהקשר של משחקים. ניתן לבצע אקסטרפולציה של אותו רעיון לעבודה עם כל סוג של אפליקציית אינטרנט.

crbug.com/89271 הוא תיקון חשוב עבור FileSystem API, שהופך נתיבים יחסיים של filesystem: כתובת אתר לעבוד כמו קסם.

לדוגמה, נניח ששמרתי את index.html בתיקיית הבסיס של מערכת הקבצים (fs.root), יצרתי תיקיית img ושמרתי בה את "test.png". כתובת ה-URL של filesystem: לשני הקבצים האלה תהיה filesystem:http://example.com/temporary/index.html ו-filesystem:http://example.com/temporary/img/test.png, בהתאמה. לאחר מכן, כדי להשתמש ב-"test.png" ל-img.src, היה צורך להשתמש בנתיב המוחלט המלא שלו: <img src="filesystem:http://example.com/temporary/img/test.png">. כלומר, שכתוב של כל כתובות ה-URL היחסיות ב-index.html כך שיפנו לכתובת ה-URL filesystem: של הקובץ המתאים. לא מגניב! עכשיו, אחרי תיקון הבאג, אוכל לשמור את הנתיב היחסי לקובץ (<img src="img/test.png">), כי תהיה לו גישה תקינה למקור של מערכת קבצים.

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