How to refresh an angular app with new js and html from the server, but without reloading the browser window

So, this answer is going to be a little more complicated than you might like, but will be the best way to handle the problem, in my opinion.

Yes, you could set up some kind of poll to detect when to update the app, then swap out the html with the new html, but, you can't scrub the JS from a page. So it's going to get nasty after a few updates.

Here's what you do, set up a WebSocketServer. When you need to update your app, do a ws.send to tell the app to refresh itself.

I'm assuming a refresh isn't bad, just inconvenient since your app is located in a tablet on the store floor somewhere.

Server Side:

const WebSocket = require('ws');

class WebSocketServer {
  constructor() {
    this.wss = new WebSocket.Server({port:8282, perMessageDeflate:false});
    console.log(`Websocket on: ${8282}`);
    this.clients = {};
    this.wss.on('connection', (ws) => {
    ws.on('message', (message) => {//collect clients for later messages
      this.myWebApp = ws;
    });
    ws.send("Connected to websocket");
  })
}
  updateApp(port, message) {
    this.myWebApp.send("refresh");
  }
}


const express = require('express');
const cors = require('cors');
const cookieParser = require('cookie-parser');
let bodyParser = require('body-parser');


class ExpressServer {
  constructor() {
    this.port = 8181;
    this.websocketServer = new WebsocketServer();
    let server = express();
    this.router = express.Router();
    this.router.use(cookieParser());
    server.use(cors());
    this.setupRoutes(server);
    server.listen(this.port);
    console.log(`Server listening on: ${this.port}`);
  }
  setupRoutes(server) {
    server.post('/updateApp', (req, res, next) => {
      this.websocketServer.updateApp();
      res.sendStatus(200)
    });
  }
}

let server = new ExpressServer();

Client Side:

let ws = new WebSocket('ws://ip.of.websocket.server:8282');
ws.onmessage = (data, flags) => {
  if(data === "refresh") {
    window.location.reload()
  }
}

The code here isn't intended to work, per se, but it should point you in the right direction.

I've assumed that you'll only have one app running. If you have multiple, you'd need to do a broadcast, as described here:

https://github.com/websockets/ws

The idea is that you can hit the updateApps endpoint and that will trigger a websocket send to your app.

This should avoid your 404/500 problem, since the app will never be asked to update when the server is down, since the server drives the updates.

You'll want to implement some stuff to maintain the websocket connection, but I'll let you do the digging on that.

Bonus Points: Look into Progressive Web Apps. They enable offline use, ensure http calls complete even if the connection goes down for a while, and allow push notifications.

The way I'm handling this is I return a version number within a custom header option of each http response made to the backend. If the response header version mismatches my frontend's local app version then it would force a window.location.reload()

So whenever a change is made that requires reloading the frontend, just update the version on the backend, which you should have control of.

In this case I think that your best choice is to have the schedule reload function. This could be a function that periodically check from the server if a new version is available. If you get an 404 or 500 error, you just schedule the function in a short time after the error.

Only when a successful 200 response with a version change is detected you proceed to reload the page.

Example:

angular.app('app', [])
.run(['$timeout', '$http', '$window', function($timeout, $http, $window){

    var standardCheckInterval = 360000, criticalCheckInterval = 4000;
    var currentVersion = 0;

    // obtain the current version from the server
    function getCurrentVersion() {
        return $http.get('/app/version');
    }

    // get the current version
    getCurrentVersion().then(function(response) { currentVersion = response.Data; })

    // check an app version change
    function checkAppVersionChange() {

        getCurrentVersion()

                .then(function (response) {

                    // we get a different version, reload   
                    if(currentVersion != response.Data) {

                        $window.location.reload(); 
                    }
                    else {

                        // all good, just schedule again for a future update
                        $timeout(checkAppVersionChange, standardCheckInterval);

                    }

                }, function(error) {

                    // something bad happen 404 or 500, recheck soon
                    $timeout(checkAppVersionChange, criticalCheckInterval);

                });

    }

    // schedule the check function
    $timeout(checkAppVersionChange, standardCheckInterval);

}]);