Configure service worker not to present stale content for frequently visited landing pages

@alxhub

Repro:

as a user I navigate to https://angular.io and stick around enough for sw to catch everything
Angular developers push an update to the angular.io homepage (e.g. new release announcement)
as a user I go to https://blog.angular.io and find a release announcement, I click on a link to https://angular.io/events that is mentioned in the blog post because of new events coming up

Expected result:

I see the updated version of https://angular.io/events

Current result:

I see an outdated version of https://angular.io/events
If I wait long enough for sw to update and reload https://angular.io/events I see the new content

The tricky thing about this is that we shouldn't do it in a way where it's going to affect our TTI.

The new sw has a feature where we can optimize for freshness, but that affects TTI.

Maybe we should consider a full page reload if we detect that the currently displayed content is stale? I'm not sure...

// @alxhub @StephenFluin

Right now we check for available updates every 6 hours I think. Once an update has been downloaded, the new content should be displayed on new navigations. So, theoretically, the content (after a navigation - either in-app or new page) should not be staler than that.

I can't think of another way to ensure freshness without affecting the TTI.

Wait! What if we show a snackbar when an update is available prompting the user to reload the page 😁
_{(déjà vu)}

What if we show a snackbar when an update is available prompting the user to reload the page

That's precisely what I'm looking to do in my app. Is there docs on how to do this? An event we can listen for perhaps? Bonus points for an event for when an update is installing so the user doesn't navigate away and brick their application.

This is what angular.io used to do, but people where finding it annoying 🤷‍♂️

I could link you to the code, but it used an old version of @angular/service-worker, so that wouldn't be very useful to you.

With the latest @angular/service-worker, you should use the SwUpdate service (see also here for more info).

@rjsteinert It's actually quite simple:

constructor(
  update: SwUpdate,
) {
  update.available.subscribe(event => {
    // show your snackbar
  })
}

@gkalpak

@gkalpak Is this still an issue?

Yes, it is still an issue, but I don't know of a good way to solve it without affecting the TTI.
So, given that (and the fact that this is low in priority), I think we can close it for now.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

Configure service worker not to present stale content for frequently visited landing pages #22080

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Configure service worker not to present stale content for frequently visited landing pages #22080

Description

Activity

gkalpak commented on Feb 8, 2018

rjcorwin commented on Jul 30, 2018

gkalpak commented on Jul 30, 2018

Ploppy3 commented on Jul 31, 2018

jessicajaniuk commented on Mar 28, 2022

gkalpak commented on Mar 29, 2022

angular-automatic-lock-bot commented on Apr 29, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions