CODEWITHSUNDEEP
angularsingle-page-application
supreme Pooba
supreme Pooba

Reputation: 988

Proper way to refresh Single Page Application

I have an angular2 Single Page app. I want to prompt the user to reload the page when I have rolled a new version out to the production server. I have heard about AppCache. I have heard about Service Workers.

What is the accepted practice for this operation?

What process do you go through to detect a change and then force the refresh?

Is there something already in the browser that supports this?

Thank you.

Upvotes: 1

Views: 1811

Answers (1)

JB Nizet
JB Nizet

Reputation: 691765

Idon't know if there's a standard practice, but here's how I've done it once, successfully:

When I deploy version 123, I ensure that the main index.html file contains this line:

<script>var MYAPP_VERSION=123;</script>

and that the backend sends, as a header of all the responses to AJAX requests, the header x-myapp-version=123.

In the application (angular1, but you can something similar with angular 2), every time I receive an AJAX response from the backend, I check that the version in the header is identical to the version in MYAPP_VERSION.

If the versions differ, that means that a new version has been deployed, but that the user is still using an old version (i.e. has not refreshed the main page). I then display an alert message or a popup (or I force a refresh), to make sure the page is refreshed. That, combined with a version of hash in the JS files and templates (or proper cache configuration, allows making sure the user gets the new versions of the files.

Upvotes: 1

Related Questions