nwjs加载远程URL使用笔记

最新推荐文章于 2021-06-25 13:40:20 发布

宁不凡啊

最新推荐文章于 2021-06-25 13:40:20 发布

阅读量1.1k

点赞数 2

分类专栏： nwjs

本文链接：https://blog.csdn.net/u012981972/article/details/109530073

版权

nwjs 专栏收录该内容

9 篇文章 3 订阅

订阅专栏

1. 概述

nwjs+url制作桌面应用的优势在于，所有的页面逻辑都在服务器端，除了nwjs依赖模块的更新，后期新增、更新功能只需更新服务器端页面或者服务即可，维护简单，用户体验更佳。

2.生产环境中遇到过的问题

用户电脑没有网络
用户dns异常，无法正常加载url

3.应对方案

网络断开与连接事件捕捉
dns异常监控与提示

nwjs使用方法略，请自行百度！

本地index.html如下

<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>测试</title>
  </head>
  <body>

  </body>
</html>
<script type="text/javascript">
    //dns异常提示
    function dnsErrorFunc(){
       //dns异常提示
    }
    //断网提示
    function offLineFunc(){
       //断网提示
    }   
    //打开就没有网络提示
    if(!navigator.onLine){
        offLineFunc();
    }
    //断网监听
    window.addEventListener('offline', function(){
        offLineFunc();
    });
    //恢复网络监听
    window.addEventListener('online',  function(){
        document.location.reload();
    });
</script>
//init.js需放置服务器端，主要负责，告知客户端要打开哪个页面，可根据实际情况比如按地域打开不同的url。
<script type="text/javascript" src="https://your.url.com/init.js"></script>
//init.js代码
window.location.href = "https://your.url.com/login"
//init.js代码end
<script type="text/javascript">
	//dns检测方案一：利用js加载顺序，5s内页面没跳转就说明dns有异常，提示下
	setTimeout(function () {
      dnsErrorFunc();
  }, 5000)
   //dns检测方案二：nodejs的dns模块
    try {
        let dns = require("dns");
        dns
        && dns.resolve
        && dns.resolve("your.url.com",function (err, addresses) {
            if(!addresses){
               dnsErrorFunc();
            }
        });
    }catch(e){
        console.log("dns error", e);
    }
    //方案二代码也可以放在init.js中，方便后期维护
</script>

这样nwjs只是负责网络监听、dns检测、加载init.js，其他的都属于远程页面的事儿了，包括升级逻辑。

宁不凡啊

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
nwjs加载远程URL使用笔记

1. 概述nwjs+url制作桌面应用的优势在于，所有的页面逻辑都在服务器端，除了nwjs依赖模块的更新，后期新增、更新功能只需更新服务器端页面或者服务即可，维护简单，用户体验更佳。2.生产环境中遇到过的问题用户电脑没有网络用户dns异常，无法正常加载url3.应对方案网络断开与连接事件捕捉dns异常监控与提示…nwjs使用方法略，自行百度；…本地index.html如下<!DOCTYPE html><html> <head>
复制链接

扫一扫