به روز رسانی

شما PWA خود را منتشر کرده اید: برخی از کاربران از مرورگر استفاده می کنند، برخی دیگر آن را در دستگاه های خود نصب می کنند. هنگامی که برنامه را به روز می کنید، مهم است که بهترین روش ها را برای جلوگیری از مشکلات به کار ببرید.

می توانید به روز رسانی کنید:

• اطلاعات برنامه.
• دارایی‌هایی که قبلاً در دستگاه‌ها ذخیره شده‌اند.
• فایل Service Worker یا وابستگی های آن.
• فراداده آشکار

بیایید بهترین روش ها را برای هر یک از این عناصر بررسی کنیم.

به روز رسانی داده ها

برای به روز رسانی داده ها، مانند داده های ذخیره شده در IndexedDB، می توانید از ابزارهایی مانند Fetch، WebRTC یا WebSockets API استفاده کنید. اگر برنامه شما از ویژگی های آفلاین پشتیبانی می کند، به یاد داشته باشید که داده هایی را که از ویژگی ها پشتیبانی می کنند نیز به روز نگه دارید.

در مرورگرهای سازگار، گزینه‌هایی برای همگام‌سازی داده‌ها، نه تنها زمانی که کاربر PWA را باز می‌کند، بلکه در پس‌زمینه نیز وجود دارد. این گزینه ها عبارتند از:

• همگام‌سازی پس‌زمینه : درخواست‌هایی را که شکست خورده‌اند ذخیره می‌کند و با استفاده از همگام‌سازی از سرویس‌کار دوباره آنها را امتحان می‌کند.
• همگام‌سازی پس‌زمینه دوره‌ای وب : داده‌ها را به‌صورت دوره‌ای در پس‌زمینه، در زمان‌های خاص همگام‌سازی می‌کند، و به برنامه اجازه می‌دهد تا داده‌های به‌روزرسانی شده را حتی اگر کاربر هنوز برنامه را باز نکرده باشد، ارائه دهد.
• واکشی پس‌زمینه : فایل‌های بزرگ را حتی زمانی که PWA بسته است، دانلود می‌کند.
• فشار وب : پیامی را از سرور ارسال می کند که سرویس دهنده را بیدار می کند و به کاربر اطلاع می دهد. این معمولاً "اعلان فشار" نامیده می شود. این API به اجازه کاربر نیاز دارد.

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

به روز رسانی دارایی ها

به‌روزرسانی دارایی‌ها شامل هرگونه تغییر در فایل‌هایی است که برای ارائه رابط برنامه استفاده می‌کنید، مانند HTML، CSS، جاوا اسکریپت، و تصاویر. به عنوان مثال، تغییر در منطق برنامه شما، تصویری که بخشی از رابط کاربری شما است یا یک شیوه نامه CSS.

الگوها را به روز کنید

در اینجا چند الگوی متداول برای مدیریت به‌روزرسانی‌های برنامه وجود دارد، اما همیشه می‌توانید این فرآیند را بر اساس نیازهای خود سفارشی کنید:

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

چه زمانی به روز رسانی شود

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

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

به روز رسانی زنده

همچنین می‌توانید انتخاب کنید زمانی که برنامه باز است (زنده) یا بسته، به‌روزرسانی اعمال شود. با رویکرد بسته شدن برنامه، حتی اگر برنامه دارایی های جدید را دانلود کرده باشد، هیچ تغییری ایجاد نمی کند و در بارگذاری بعدی از نسخه های جدید استفاده می کند.

به روز رسانی زنده به این معنی است که به محض به روز رسانی دارایی در حافظه پنهان، PWA شما جایگزین دارایی در بار فعلی می شود. این یک کار پیچیده است که در این دوره پوشش داده نمی شود. برخی از ابزارهایی که به اجرای این به‌روزرسانی کمک می‌کنند، livereload-js و به‌روزرسانی دارایی CSS CSSStyleSheet.replace() API هستند.

به روز رسانی کارگر خدمات

زمانی که کارمند سرویس یا وابستگی های آن تغییر می کند، مرورگر یک الگوریتم به روز رسانی را راه اندازی می کند. مرورگر با استفاده از مقایسه بایت به بایت بین فایل های کش و منابعی که از شبکه می آیند، به روز رسانی ها را تشخیص می دهد.

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

تشخیص تغییرات کارگر خدماتی

برای تشخیص اینکه یک سرویس‌کار جدید آماده و نصب شده است، از رویداد updatefound از ثبت نام سرویس‌کار استفاده می‌کنیم. زمانی که سرویس‌کار جدید شروع به نصب می‌کند، این رویداد فعال می‌شود. باید منتظر باشیم تا حالت آن به installed با رویداد statechange تغییر کند. موارد زیر را ببینید:

async function detectSWUpdate() {
  const registration = await navigator.serviceWorker.ready;

  registration.addEventListener("updatefound", event => {
    const newSW = registration.installing;
    newSW.addEventListener("statechange", event => {
      if (newSW.state == "installed") {
         // New service worker is installed, but waiting activation
      }
    });
  })
}

لغو اجباری

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

حتی اگر توصیه نمی‌شود، سرویس‌کار جدید می‌تواند آن دوره انتظار را رد کرده و بلافاصله فعال‌سازی را شروع کند.

self.addEventListener("install", event => {
   // forces a service worker to activate immediately
   self.skipWaiting();
  });

self.addEventListener("activate", event => {
  // when this SW becomes activated, we claim all the opened clients
  // they can be standalone PWA windows or browser tabs
  event.waitUntil(clients.claim());
});

رویداد controllerchange زمانی فعال می شود که سرویس دهنده ای که صفحه فعلی را کنترل می کند تغییر کند. به عنوان مثال، یک کارگر جدید از انتظار صرف نظر کرده و به کارگر فعال جدید تبدیل شده است.

navigator.serviceWorker.addEventListener("controllerchange", event => {
   // The service worker controller has changed
 });

به روز رسانی متادیتا

همچنین می‌توانید فراداده برنامه خود را که عمدتاً در مانیفست برنامه وب تنظیم شده است، به‌روزرسانی کنید. برای مثال، نماد، نام یا URL شروع آن را به‌روزرسانی کنید یا می‌توانید ویژگی جدیدی مانند میانبرهای برنامه اضافه کنید. اما برای همه کاربرانی که قبلاً برنامه را با نماد قدیمی روی دستگاه های خود نصب کرده اند چه اتفاقی می افتد؟ چگونه و چه زمانی نسخه به روز شده را دریافت می کنند؟

پاسخ به پلتفرم بستگی دارد. بیایید گزینه های موجود را پوشش دهیم.

سافاری در مرورگرهای iOS، iPadOS و Android

در این پلتفرم‌ها، تنها راه دریافت ابرداده مانیفست جدید، نصب مجدد برنامه از مرورگر است.

Google Chrome در Android با WebAPK

هنگامی که کاربر PWA شما را با استفاده از Google Chrome با فعال بودن WebAPK (بیشتر نصب‌های Chrome PWA) روی Android نصب کرد، به‌روزرسانی براساس یک الگوریتم شناسایی و اعمال می‌شود. جزئیات را در این مقاله به‌روزرسانی‌های مانیفست بررسی کنید.

چند نکته اضافی در مورد فرآیند:

اگر کاربر PWA شما را باز نکند، WebAPK آن به روز نمی شود. اگر سرور با فایل مانیفست پاسخ ندهد (خطای 404 وجود دارد)، Chrome برای حداقل 30 روز به‌روزرسانی‌ها را بررسی نمی‌کند، حتی اگر کاربر PWA را باز کند.

برای مشاهده وضعیت پرچم «نیاز به به‌روزرسانی» به about:webapks در Chrome Android بروید و درخواست به‌روزرسانی کنید. در بخش ابزارها و اشکال زدایی ، می توانید اطلاعات بیشتری در مورد این ابزار اشکال زدایی بخوانید.

اینترنت سامسونگ در اندروید با WebAPK

فرآیند مشابه نسخه کروم است. در این حالت، اگر مانیفست PWA نیاز به به‌روزرسانی داشته باشد، در طول 24 ساعت آینده WebAPK پس از برش WebAPK به‌روزرسانی‌شده روی Wi-Fi به‌روزرسانی می‌شود.

گوگل کروم و مایکروسافت اج روی دسکتاپ

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

هنگامی که ویژگی‌های انتخابی به‌روزرسانی می‌شوند، پس از بسته شدن همه پنجره‌ها، به‌روزرسانی را آغاز می‌کند.

هشدار دادن به کاربر

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

برای اطلاع کاربر، این گزینه ها وجود دارد:

• از DOM یا Canvas API برای ارائه اعلان روی صفحه استفاده کنید.
• از Web Notifications API استفاده کنید. این API بخشی از مجوز فشار برای ایجاد اعلان در سیستم عامل است. برای استفاده از آن، حتی اگر از پروتکل پیام‌رسانی فشار سرور خود استفاده نمی‌کنید، باید مجوز web push را درخواست کنید. این تنها گزینه ای است که در صورت باز نشدن PWA داریم.
• از Badging API برای نشان دادن به‌روزرسانی‌ها در نماد نصب‌شده PWA استفاده کنید

.

اطلاعات بیشتر در مورد Badging API

Badging API به شما امکان می دهد نماد PWA خود را با یک شماره نشان یا یک نقطه نشان در مرورگرهای سازگار علامت گذاری کنید. نقطه نشان یک علامت کوچک در نماد نصب شده است که بیانگر چیزی است که در داخل برنامه منتظر است.

برای تنظیم شماره نشان، باید setAppBadge(count) در شی navigator فراخوانی کنید. وقتی می‌دانید یک به‌روزرسانی برای هشدار به کاربر وجود دارد، می‌توانید این کار را از محیط پنجره یا سرویس‌کار انجام دهید.

let unreadCount = 125;
navigator.setAppBadge(unreadCount);

برای پاک کردن نشان، clearAppBadge() در همان شیء فراخوانی می کنید:

navigator.clearAppBadge();

منابع

• چرخه عمر کارگر خدماتی
• چگونه Chrome به‌روزرسانی‌های مانیفست برنامه وب را مدیریت می‌کند
• یک PWA را در پس‌زمینه همگام‌سازی و به‌روزرسانی کنید
• تجربه‌های آفلاین غنی‌تر با Periodic Background Sync API
• Push API
• نمای کلی اعلان‌های فشاری
• نشان برای نمادهای برنامه
• Workbox 4: پیاده‌سازی جریان نسخه تازه‌سازی برای به‌روزرسانی با استفاده از ماژول workbox-window