How to deal with not found assets for new deploying If we set dynamicStartUrl false.

[meotimdihia]

Summary

When a new deploying and CDN cleared assets like JS, CSS. And the service worker still serves the old homepage version.

This is a screenshot:

Versions

• next-pwa: 5.2.24
• next: 11.1.0

Do we have a way to force service workers to delete the old version of the start page?

[meotimdihia]

I think to change the path "/" to StaleWhileRevalidate is required for this problem?

{
  urlPattern: "/",
  handler: "StaleWhileRevalidate",
  options: {
    cacheName: "start-url",
    expiration: {
      maxEntries: 4,
      maxAgeSeconds: 1
    }
  }
}

[meotimdihia]

@shadowwalker I wonder why with default settings dynamicStartUrl: true.
When the service worker was installed. The path "/" behavior is not the same as without a service worker.
For example, it always has to refetching home page:

It is different from the default next.js behavior. This is an example: https://stackblitz.com/edit/github-dn74e4?file=pages/about.js

I think we shouldn't change this behavior with default settings when it works well for everyone.

[shadowwalker]

Hi, @meotimdihia !

For the doc

dynamicStartUrl - if your start url returns different HTML document under different state (such as logged in vs. not logged in), this should be set to true.
default: true
recommend: set to false if your start url always returns same HTML document, then start url will be precached, this will help to speed up first load.

This was there to solve a particular problem with a common pattern. When a user sign in the web app, cookies is set and redirect back to home page. With SSR, server received the cookie and determined the user is signed in and render the HTML on server and send back a different HTML than the cached one.

The option set to true solved the problem that user get confused after sign in and still see old HTML.

You can play this use case using the https://github.com/shadowwalker/next-pwa/tree/master/examples/cookie example, just try turning this option off and see how things goes.

[meotimdihia]

@shadowwalker: But the problem "re-fetch" doesn't happen with other static pages but the static homepage. Its behavior is different from Next.js without PWA.

[shadowwalker]

I think what you have mentioned coming from here:

next-pwa/register.js

Lines 51 to 56 in 54bbba6

	return fetch(__PWA_START_URL__).then(function(response) {
	if (!response.redirected) {
	return caches.open('start-url').then(cache => cache.put(__PWA_START_URL__, response))
	}
	return Promise.resolve()
	})

And start url is defined here:

next-pwa/index.js

Line 80 in 54bbba6

__PWA_START_URL__: dynamicStartUrl ? `'${basePath}'` : undefined,

I'm not sure if I should change the logic here, as it was meant to solve the particular problem, and maintain the usability by default. Do you have any good suggestions how this should be implemented without breaking anyone?

[meotimdihia]

@shadowwalker Sorry, I don't really understand exactly how workbox works 😅.
But I think this problem is important. But people just don't know it.
For example, sites like Facebook, Twitter. The users always click to view photos or comments then go back to the homepage multiple times.
Currently, go back to the homepage add an extra request, the site will be slow.

[meotimdihia]

The config dynamicStartUrl: false has broken my websites multiple times until now. I couldn't figure out exactly the problem.

const cache = require("next-pwa/cache")

cache.push({
  urlPattern: "/",
  handler: "StaleWhileRevalidate",
  options: {
    cacheName: "start-url", // CHANGE THIS TO start-url
    expiration: {
      maxEntries: 10,
      maxAgeSeconds: 36400
    }
  }
})

  pwa: {
    dest: "public",
    disable: process.env.NODE_ENV !== 'production',
    // register: false,
    // swSrc: 'service-worker.js',
    buildExcludes: [/static\/media\/.*\.svg$/],
    // runtimeCaching: cache,
    dynamicStartUrl : false,
    skipWaiting: true
  }

When I change the homepage, and it takes forever for the browser with an existing worker to update the new version page.
the homepage will be changed only when a new version worker is installed.

I think StaleWhileRevalidate will update the cache after the first request?

......

Currently, the best way is to set dynamicStartUrl: true. But it causes another problem as I said.

[meotimdihia]

We can reproduce the problem by these steps:

1. build the site : yarn build && yarn start with {dynamicStartUrl: false}
2. And go to the local site.
3. Modify the homepage for visible.
4. And build it again with {disable: true}
5. You can't see the change in step 3

[meotimdihia]

I solved this problem by updating:
__PWA_START_URL__: dynamicStartUrl ? '${basePath}' : undefined, to __PWA_START_URL: undefined
at line:

next-pwa/index.js

Line 80 in 67e4d58

__PWA_START_URL__: dynamicStartUrl ? `'${basePath}'` : undefined,

with PWA config:

  pwa: {
    runtimeCaching: [],
    dynamicStartUrl : true,
  }

[meotimdihia]

I close this issue since the patch solved it.