پیش کش با کارگر سرویس Angular

از Angular Service Worker استفاده کنید تا برنامه خود را در شبکه هایی با اتصال ضعیف سریعتر و قابل اعتمادتر کنید.

مینکو گچف

مقابله با اتصال محدود

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

در این پست نحوه تنظیم پیش کش در یک برنامه Angular توضیح داده شده است. فرض بر این است که شما از قبل با پیش کش و کارگران خدماتی به طور کلی آشنا هستید. اگر به یک تجدید کننده نیاز دارید، سرویس کارگران و پست API حافظه کش را بررسی کنید.

معرفی کارگر سرویس Angular

تیم Angular یک ماژول Service Worker با عملکرد پیش کش ارائه می دهد که به خوبی با چارچوب و رابط خط فرمان Angular (CLI) یکپارچه شده است.

برای اضافه کردن سرویس‌کار، این دستور را در CLI اجرا کنید:

ng add @angular/pwa

@angular/service-worker و @angular/pwa اکنون باید در برنامه نصب شده باشند و در package.json ظاهر شوند. شماتیک ng-add همچنین فایلی به نام ngsw-config.json را به پروژه اضافه می کند که می توانید از آن برای پیکربندی سرویس دهنده استفاده کنید. (فایل شامل یک پیکربندی پیش فرض است که کمی بعد آن را سفارشی خواهید کرد.)

اکنون پروژه را برای تولید بسازید:

ng build --prod

در دایرکتوری dist/service-worker-web-dev فایلی به نام ngsw.json پیدا خواهید کرد. این فایل به کارمند سرویس Angular می‌گوید که چگونه دارایی‌های موجود در برنامه را کش کند. فایل در طول فرآیند ساخت بر اساس پیکربندی ( ngsw-config.json ) و دارایی های تولید شده در زمان ساخت تولید می شود.

اکنون یک سرور HTTP را در دایرکتوری حاوی دارایی های تولید برنامه خود راه اندازی کنید، URL عمومی را باز کنید و درخواست های شبکه آن را در Chrome DevTools بررسی کنید:

  1. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
  2. روی تب Network کلیک کنید.

توجه داشته باشید که برگه شبکه دارای مجموعه‌ای از دارایی‌های ثابت است که مستقیماً در پس‌زمینه توسط اسکریپت ngsw-worker.js دانلود می‌شوند:

نمونه برنامه

این کارگر سرویس Angular است که دارایی های ثابت مشخص شده در فایل مانیفست ngsw.json ایجاد شده را پیش کش می کند.

اما یک دارایی مهم گم شده است: nyan.png . برای پیش کش کردن این تصویر، باید الگویی را اضافه کنید که شامل آن به ngsw-config.json است که در ریشه فضای کاری زندگی می کند:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js",
        "/assets/*.png"
        ]
      }
    },
    ...
}

این تغییر همه تصاویر PNG را در پوشه /assets به گروه دارایی منبع app اضافه می کند. از آنجایی که installMode برای این گروه دارایی روی prefetch تنظیم شده است، سرویس‌کار تمام دارایی‌های مشخص‌شده را پیش کش می‌کند—که اکنون شامل تصاویر PNG هستند.

تعیین سایر دارایی‌هایی که باید از پیش ذخیره شوند به همین سادگی است: الگوها را در گروه دارایی منبع app به‌روزرسانی کنید.

نتیجه گیری

استفاده از یک سرویس دهنده برای پیش کش می تواند عملکرد برنامه های شما را با ذخیره دارایی ها در حافظه پنهان محلی بهبود بخشد، که باعث می شود آنها در شبکه های ضعیف قابل اعتمادتر باشند. برای استفاده از پیش کش با Angular و Angular CLI:

  1. بسته @angular/pwa را به پروژه خود اضافه کنید.
  2. با ویرایش ngsw-config.json آنچه را که سرویس‌کار در حافظه پنهان ذخیره می‌کند، کنترل کنید.