How to check if server build has been updated in SSR Nuxt application

Question

I dont know how to solve the problem if SSR Nuxt app in browser is not compatible with server side build cause build has been updated. It means that user have old version of application in the browser and needs to refresh the page. I found something like this: https://dev-clone.nuxtjs.app/alejandroakbal/632139

So I have created pwa-update.js file in the plugins dir and register it in the nuxt.config.js. But I dont see any console.log() in the console. Dont understand how to use it and if it is the right way to do it.

Implementaion looks like pwa-update.js

export default async (context) => {
  const workbox = await window.$workbox;

  if (!workbox) {
    console.debug("Workbox couldn't be loaded.");
    return;
  } else {
    console.log('Workbox has been loaded.');  // Dont see any message.
  }

  workbox.addEventListener('installed', (event) => {
    if (!event.isUpdate) {
      console.log('The PWA is on the latest version.');
      return;
    }

    console.log('There is an update for the PWA, reloading...');
    // window.location.reload();
  });
};

nuxt.config.js

plugins: [
  { src: '~/plugins/pwa-update.js', mode: 'client' },
],

I am kinda confused, please do clarify. The results are for PWA apps specific, is your website a PWA or a SSR ? If it's SSR then manual update should not be needed since everything is rendered on server-side. — Cerceis
– Cerceis, Commented Dec 17, 2021 at 0:12
Yes it is SSR. So you say it is not needed cause all (I am not sure if really all) the stuff is generated on server? — Čamo
– Čamo, Commented Dec 17, 2021 at 8:21

TheFunk · Accepted Answer · 2021-12-20 15:52:46Z

1

If you're regenerating your service worker using workbox during your development build process, a new service worker will be installed after every build. You can check this in your browser's dev tools. I believe the workbox generated service worker callls skipWaiting() in order to install new service workers immediately.

The client should get the new resources automagically because of webpack JS chunk name changes (assuming you're using webpack, the JS chunks it generates get new names after every new build, for cache busting purposes) and service worker version changes (workbox auto-increments service worker version, busting that cache as well). In other words, SSR or not, you won't need to worry about any version mismatches so long as you're using workbox to generate your service worker for you.

answered Dec 20, 2021 at 15:52

TheFunk

1,1183 gold badges19 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Čamo Over a year ago

I am sorry but dont understand it. Is it true that SSR application does not need it cause evertything is generated on the server?

TheFunk Over a year ago

It's not needed regardless of SSR. Even if you weren't using SSR, workbox will make sure that your service worker is updated on your client whenever you push an update. Just make sure you regenerate your service worker on every build. For your UI, because your webpack chunk names will change if you edit your JS, those new chunks will get precached by your service worker on first load, after every build.

TheFunk Over a year ago

The way I do this in React is run && workbox injectManifest workbox-config.js after my build script. That way every time I build, workbox generates a new service-worker. Then when I visit my app, the new service worker immediately installs and then precaches the newly generated webpack JS chunks from my most recent build.

Čamo Over a year ago

Sorry but what it means "regenerate your service worker on every build"? I dont understand what it means. The build is simple call of yarn build. Isnt it enough?

TheFunk Over a year ago

You're making a PWA, which has a JavaScript service worker generated by workbox? Correct? Workbox let's you write code to generate a production service worker. The service worker doesn't just automatically build itself with yarn build. You have to tell it to rebuild. so you add a line like above to your build script and create a config file like workbox-config.js to tell workbox where to find your service worker code and where to place the generated code. Then on every build, the service worker will be regenerated, which will bust cache for you.

|

Collectives™ on Stack Overflow

How to check if server build has been updated in SSR Nuxt application

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related