ذخیره سازی

ذخیره سازی کش یک ابزار قدرتمند است. این باعث می شود برنامه های شما کمتر به شرایط شبکه وابسته شوند. با استفاده خوب از حافظه پنهان، می توانید برنامه وب خود را به صورت آفلاین در دسترس قرار دهید و دارایی های خود را با بیشترین سرعت ممکن در هر شرایط شبکه ارائه دهید. همانطور که در Assets and Data ذکر شد، می‌توانید بهترین استراتژی را برای ذخیره کردن دارایی‌های ضروری انتخاب کنید. برای مدیریت حافظه پنهان، سرویس‌دهنده شما با API حافظه پنهان تعامل دارد.

پشتیبانی مرورگر

43
16
41
11.1

منبع

Cache Storage API در زمینه های مختلف در دسترس است:

زمینه پنجره (رشته اصلی PWA شما).
کارگر خدمات.
از هر کارگر دیگری که استفاده می کنید.

یکی از مزیت‌های مدیریت حافظه پنهان با استفاده از سرویس‌دهنده‌ها این است که چرخه عمر آن به پنجره متصل نیست، به این معنی که شما رشته اصلی را مسدود نمی‌کنید. توجه داشته باشید که برای استفاده از Cache Storage API بیشتر این زمینه ها باید تحت یک اتصال TLS باشند.

چه چیزی را در حافظه پنهان کنیم

اولین سوالی که ممکن است در مورد کش کردن داشته باشید این است که چه چیزی را در حافظه پنهان نگه دارید. در حالی که هیچ پاسخ واحدی برای این سوال وجود ندارد، می توانید با حداقل منابعی که برای ارائه رابط کاربری نیاز دارید شروع کنید.

این منابع باید شامل موارد زیر باشد:

صفحه اصلی HTML (start_url برنامه شما).
شیوه نامه های CSS مورد نیاز برای رابط کاربری اصلی.
تصاویر استفاده شده در رابط کاربری
فایل های جاوا اسکریپت برای ارائه رابط کاربری مورد نیاز است.
داده هایی مانند فایل JSON برای ارائه یک تجربه اولیه مورد نیاز است.
فونت های وب
در یک برنامه چند صفحه ای، سایر اسناد HTML که می خواهید به سرعت یا در حالت آفلاین ارائه شوند.

آماده آفلاین

در حالی که آفلاین بودن یکی از الزامات یک برنامه وب پیشرفته است، درک این نکته ضروری است که هر PWA به یک تجربه کامل آفلاین نیاز ندارد، به عنوان مثال راه حل های بازی ابری یا برنامه های دارایی های رمزنگاری شده. بنابراین، ارائه یک رابط کاربری اساسی که کاربران خود را در آن شرایط راهنمایی کند، مشکلی ندارد.

PWA شما نباید پیغام خطای مرورگر را ارائه دهد که می گوید موتور رندر وب نمی تواند صفحه را بارگیری کند. در عوض از سرویس‌کار خود برای نشان دادن پیام‌های خود استفاده کنید و از یک خطای عمومی و گیج‌کننده مرورگر اجتناب کنید.

بسته به نیاز PWA خود، استراتژی‌های ذخیره‌سازی مختلفی وجود دارد که می‌توانید از آنها استفاده کنید. به همین دلیل مهم است که استفاده از کش خود را برای ارائه یک تجربه سریع و قابل اعتماد طراحی کنید. به عنوان مثال، اگر همه دارایی های برنامه شما سریع دانلود می شوند، فضای زیادی مصرف نمی کنند و نیازی به به روز رسانی در هر درخواست ندارید، ذخیره تمام دارایی های شما یک استراتژی معتبر خواهد بود. از طرف دیگر اگر منابعی دارید که باید آخرین نسخه باشد، ممکن است بخواهید به هیچ وجه آن دارایی ها را در حافظه پنهان نکنید.

با استفاده از API

از Cache Storage API برای تعریف مجموعه ای از کش ها در مبدأ خود استفاده کنید، که هر کدام با نام رشته ای که می توانید تعریف کنید مشخص می شود. از طریق شی caches به API دسترسی پیدا کنید، و روش open ایجاد یا باز کردن کش از قبل ایجاد شده را امکان پذیر می کند. متد open یک وعده برای شیء کش برمی گرداند.

caches.open("pwa-assets")
.then(cache => {
  // you can download and store, delete or update resources with cache arguments
});

دانلود و ذخیره دارایی ها

برای درخواست از مرورگر برای دانلود و ذخیره دارایی ها از روش های add یا addAll استفاده کنید. متد add یک درخواست ایجاد می کند و یک پاسخ HTTP را ذخیره می کند و گروهی از پاسخ های HTTP را به عنوان یک تراکنش بر اساس آرایه ای از درخواست ها یا URL ها addAll .

caches.open("pwa-assets")
.then(cache => {
  cache.add("styles.css"); // it stores only one resource
  cache.addAll(["styles.css", "app.js"]); // it stores two resources
});

توجه: هر دو add() و addAll() یک وعده بدون آرگومان برمی گردانند. اگر انجام شود، می‌دانید که دارایی‌ها دانلود و ذخیره شده‌اند، و در صورت عدم موفقیت، API نمی‌تواند یک یا چند منبع را دانلود کند و حافظه پنهان را تغییر نداده است.

رابط ذخیره سازی کش کل پاسخ شامل تمام سرصفحه ها و بدنه را ذخیره می کند. در نتیجه، می‌توانید بعداً با استفاده از یک درخواست HTTP یا یک URL به عنوان کلید، آن را بازیابی کنید. نحوه انجام این کار را در فصل سرویس خواهید دید.

چه زمانی باید حافظه پنهان شود

در PWA خود، شما مسئول تصمیم گیری در مورد زمان ذخیره فایل ها هستید. در حالی که یک رویکرد ذخیره تا حد امکان دارایی ها هنگام نصب سرویس دهنده است، معمولا بهترین ایده نیست. کش کردن منابع غیر ضروری، پهنای باند و فضای ذخیره‌سازی را هدر می‌دهد و می‌تواند باعث شود برنامه شما به منابع قدیمی ناخواسته سرویس دهد.

نیازی نیست همه دارایی ها را یکجا ذخیره کنید، می توانید دارایی ها را چندین بار در طول چرخه عمر PWA خود کش کنید، مانند:

در نصب کارگر خدمات.
پس از بارگذاری صفحه اول
هنگامی که کاربر به یک بخش یا مسیر حرکت می کند.
وقتی شبکه بیکار است.

می‌توانید فایل‌های جدید را در رشته اصلی یا در زمینه سرویس‌کار درخواست کنید.

ذخیره دارایی ها در یک کارگر خدماتی

یکی از رایج‌ترین سناریوها، ذخیره حداقل مجموعه‌ای از دارایی‌ها هنگام نصب سرویس‌کار است. برای انجام این کار، می‌توانید از رابط ذخیره‌سازی حافظه پنهان در رویداد install در سرویس‌کار استفاده کنید.

از آنجایی که رشته Service Worker می‌تواند در هر زمانی متوقف شود، می‌توانید از مرورگر بخواهید که منتظر اتمام وعده addAll باشد تا فرصت ذخیره همه دارایی‌ها و ثابت نگه داشتن برنامه افزایش یابد. مثال زیر نحوه انجام این کار را با استفاده از متد waitUntil آرگومان رویداد دریافتی در شنونده رویداد service worker نشان می دهد.

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", event => {
   event.waitUntil(
      caches.open("pwa-assets")
      .then(cache => {
         return cache.addAll(urlsToCache);
      });
   );
});

متد waitUntil() یک وعده دریافت می کند و از مرورگر می خواهد تا قبل از خاتمه فرآیند service worker منتظر بماند تا وظیفه موجود در وعده حل شود (اجرا شده یا ناموفق). ممکن است لازم باشد وعده‌ها را زنجیره‌ای کنید و فراخوانی‌های add() یا addAll() را برگردانید تا یک نتیجه به متد waitUntil() برسد.

همچنین می توانید با استفاده از دستور async/wait به وعده ها رسیدگی کنید. در آن صورت، باید یک تابع ناهمزمان ایجاد کنید که بتواند await فراخوانی کند و پس از فراخوانی، یک وعده به waitUntil() برمی گرداند، مانند مثال زیر:

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", (event) => {
   let cacheUrls = async () => {
      const cache = await caches.open("pwa-assets");
      return cache.addAll(urlsToCache);
   };
   event.waitUntil(cacheUrls());
});

درخواست های بین دامنه ای و پاسخ های غیر شفاف

PWA شما می‌تواند دارایی‌ها را از مبدا و دامنه‌های متقابل شما، مانند محتوای CDN‌های شخص ثالث، بارگیری و ذخیره کند. با یک برنامه متقاطع دامنه، تعامل حافظه پنهان بسیار شبیه به درخواست های همان منبع است. درخواست اجرا می شود و یک کپی از پاسخ در حافظه پنهان شما ذخیره می شود. مانند سایر دارایی‌های ذخیره‌شده، فقط برای استفاده در مبدا برنامه شما در دسترس است.

دارایی به عنوان یک پاسخ غیر شفاف ذخیره می شود، به این معنی که کد شما نمی تواند محتویات یا سرصفحه های آن پاسخ را ببیند یا تغییر دهد. همچنین، پاسخ‌های غیرشفاف اندازه واقعی خود را در API ذخیره‌سازی نشان نمی‌دهند و بر سهمیه‌ها تأثیر می‌گذارند. برخی از مرورگرها اندازه های بزرگ مانند 7 مگابایت را نشان می دهند، مهم نیست که فایل فقط 1 کیلوبایت باشد.

احتیاط: به یاد داشته باشید که وقتی پاسخ‌های غیر شفاف را از دامنه‌های متقابل ذخیره می‌کنید، اگر پاسخ‌ها با کد وضعیت 2xx برنگردند cache.add() و cache.addAll() ناموفق خواهند بود. بنابراین، اگر یک CDN یا بین دامنه‌ای از کار بیفتد، تمام دارایی‌هایی که دانلود می‌کنید کنار گذاشته می‌شوند، حتی دانلودهای موفق در همان عملیات.

به روز رسانی و حذف دارایی ها

می توانید دارایی ها را با استفاده از cache.put(request, response) به روز کنید و دارایی ها را با delete(request) حذف کنید.

برای جزئیات بیشتر ، اسناد شیء Cache را بررسی کنید.

اشکال زدایی حافظه کش

بسیاری از مرورگرها راهی برای اشکال زدایی محتویات حافظه پنهان در برگه DevTools Application خود ارائه می دهند. در آنجا، می توانید محتویات هر کش را در مبدا فعلی مشاهده کنید. در بخش ابزارها و اشکال زدایی بیشتر درباره این ابزارها توضیح خواهیم داد.

Chrome DevTools در حال رفع اشکال محتویات حافظه پنهان حافظه پنهان.