کش شدن وب اپلیکیشن فلاتری پس از نصب روی دستگاه

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

این مشکل بهویژه زمانی که برنامه را بهصورت PWA (Progressive Web App) روی دستگاههای موبایل نصب میکردم، واضح تر بود. در چنین شرایطی، PWA نصب شده همچنان نسخه کش شده قبلی را بارگذاری میکرد، حتی اگر نسخه جدیدی از برنامه دیپلوی شده بود. این موضوع نه تنها تجربه کاربری را تحت تأثیر قرار میدهد، بلکه ممکن است باعث شود یک کسبوکار به کلی از استفاده از PWA فلاتر منصرف شود.

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

خوشبختانه، راهحل این مشکل بسیار ساده است. کافی است قطعه کد زیر را در فایل index.html پروژه خود قرار دهید:

کد قبلی که در فایل index.htmlباید با کد جدید جایگزین شود :

کد قبلی :

  window.addEventListener('load', function(ev) {
    // Download main.dart.js
    _flutter.loader.loadEntrypoint({
      serviceWorker: {
        serviceWorkerVersion: serviceWorkerVersion,
      },
      onEntrypointLoaded: function(engineInitializer) {
        engineInitializer.initializeEngine().then(function(appRunner) {
          appRunner.runApp();
        });
      }
    });
  });

کدی جدیدی که باید جایگزین کد قبلی در فایل index.html شود:

    window.addEventListener('load', function(ev) {
        // Register the service worker
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/service_worker.js').then((registration) => {
                registration.onupdatefound = () => {
                    const installingWorker = registration.installing;
                    installingWorker.onstatechange = () => {
                        if (installingWorker.state === 'installed') {
                            if (navigator.serviceWorker.controller) {
                                // New update available, reload the page
                                console.log('New content is available; please refresh.');
                                .reload();
                            } else {
                                console.log('Content is cached for offline use.');
                            }
                        }
                    };
                };
            }).catch((error) => {
                console.error('Error during service worker registration:', error);
            });
        }

        // Download main.dart.js
        _flutter.loader.loadEntrypoint({
            serviceWorker: {
                serviceWorkerVersion: serviceWorkerVersion,
            },
            onEntrypointLoaded: function(engineInitializer) {
                engineInitializer.initializeEngine().then(function(appRunner) {
                    appRunner.runApp();
                });
            }
        });
    });

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

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