Javascript 如何有效地满足这个用例？

我有一个使用Python和Flask编写的web应用程序。此web应用仅在用户连接到内部VPN时运行。现在让我们假设用户连接到internet和VPN，并且正在浏览web应用程序，他的VPN断开连接。在这种情况下，他将无法再访问web应用程序。我想通过我的应用程序通知用户再次连接他的VPN。我已经编写了一个Javascript，其中我正在对应用程序进行一个头部ajax调用，并根据响应的状态告诉他是否连接到VPN。以下是两个功能

function isConnectedToVpn(){
    var xhr = new (window.ActiveXObject || XMLHttpRequest)("Microsoft.XMLHTTP");
    var status;
    xhr.open("HEAD", "//" + window.location.hostname , false);
    try{
        xhr.send();
        return (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304));
    }catch (error){
       return false;
    }
}

function isOnline()
{
    return navigator.onLine;
}

函数isConnectedToVpn（）{
var xhr=new（window.ActiveXObject | | XMLHttpRequest）（“Microsoft.XMLHTTP”）；
var状态；
xhr.open（“HEAD”和“/”+window.location.hostname，false）；
试一试{
xhr.send（）；
返回（xhr.status>=200&（xhr.status<300 | | xhr.status==304））；
}捕获（错误）{
返回false；
}
}
函数isOnline（）
{
返回navigator.onLine；
}

---

现在，我如何让最终用户下载这个JS，然后运行它，直到他的整个会话，并在站点无法连接时提醒他。此外，我将如何能够减少误报，例如，如果他连接到VPN，并且应用程序中存在实际问题。任何指针都很有用。

将js代码放在静态文件夹中，然后将js代码更改为isOnline

document.onload = function isOnline()
{
    if !(isConnectedToVpn())
    {
        alert('Your not connected to the VPN');
    }
}

现在，让所有模板从导入js的主（base.html）模板继承：

基于base.html

`<script src="{{url_for('yourapp.static',filename='js/yourjsfile.js')}}"></script>`

---

但是如果我的浏览器没有连接到VPN，页面就不会显示，那么JS将如何下载和执行。我已经将我所有的JS放在body标记之后，并且我验证了它们是否被缓存，但这仍然不会执行脚本。

{% extends "yourapp/base.html" %}
..
..
..