zdzen

zdzen 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

var newJsCoder =zd;

个人动态

zdzen 关注了用户 · 2月18日

智联大前端 @zpfe

您好, 我们是【智联大前端​】。
作为智联招聘的前端架构团队,我们开创了细粒度的前端研发和发布模式,统一了移动端和桌面端的技术栈,搭建了灵活可靠的Serverless运行环境,率先落地了微前端方案,并且还在向FaaS和轻研发等方向不断迈进。
我们帮助芸芸众生找到更好的工作,当然也不愿错过走在前端之巅的您。
我们在 zpfe@group.zhaopin.com.cn 恭候您的简历。

关注 3800

zdzen 关注了专栏 · 2月18日

智联大前端

作为智联招聘的前端架构团队,我们开创了细粒度的前端研发和发布模式,统一了移动端和桌面端的技术栈,搭建了灵活可靠的Serverless运行环境,率先落地了微前端方案,并且还在向FaaS和轻研发等方向不断迈进。 我们帮助芸芸众生找到更好的工作,当然也不愿错过走在前端之巅的您。 我们在 zpfe@group.zhaopin.com.cn 恭候您的简历。

关注 78

zdzen 赞了文章 · 2020-08-31

如何为Electron应用实现自动更新

背景

我们使用 Electron 开发了一个桌面端开发工具 Ada 工作台,提速增效前端开发,在更新比较频繁的情况下,为了使整个更新体验更为顺畅、提升工作台的升级比率,需要优化当前的更新机制,尽量做到 VSCode 的无感知更新。

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生应用的框架,使用Electron这个框架创建的桌面应用程序就是Electron应用。

Electron现有的相关类库:

打包工具:

更新服务器:

现状

介绍了一些通用的背景知识之后,来看看我们现有的版本升级方案:

  • 打包工具:通过electron-builder进行应用的打包和签名
  • 分发服务器:打包后的安装程序上传到一个自建的服务器electron-release-server
  • 升级逻辑:应用内自行编写更新逻辑,通过定时器查询是否有新的版本可供下载,如果有,将一个完整的安装程序下载到本地,下载完成后提示用户,用户确认后可以启动新的安装程序安装覆盖原有的版本

目前版本升级时的效果:

  • Windows: 应用关闭,并出现一个小小的安装进度条用于等待应用安装完毕,安装完毕后自动启动新的应用
  • macOS: 应用关闭,并出现安装界面,需要手动拖拽到应用文件夹,然后手动从应用文件夹内打开应用

看起来不错,已经实现了基本的更新逻辑,但是效果上让人不满意,与同样是Electron应用的VSCode的升级效果相差甚远,希望实现的效果是:让用户不用再等待一个新的安装过程,我们替用户去安装。每当有新版本发布时,用户只需要重新启动应用程序就能体验到最新的版本。

那么怎么才能实现这个效果呢?

调研

现有的打包工具和更新服务器已经在稳定运行,我们先看看它们能不能实现我们要的效果,如果不能,我们再去尝试别的类库。

我们使用的electron-builderelectron-release-server的文档中都有对auto update的描述。从这里可以看到服务器对更新文件是有类型要求的,比如OS X系统上,安装文件只支持dmg,更新文件只支持zip,Windows系统上,安装文件只能是exe,更新文件只能是完整的nupkg。而我们的打包工具是支持生成这些文件的(打包工具要求macOS应用要使用自动更新的话必须签名)。在应用代码中,则有electron-updater和官方的autoUpdater可供选择,用来检查是否需要更新,并处理具体的更新过程。

实施

  1. 文档中看到macOS要实现自动更新的话,签名是必须的。

    • macOS机器上打包:electron-builder会从系统的钥匙串里找到配置里或者环境变量CSC_LINK(CSC_NAME)的对应的证书来进行签名
    • Windows机器上打包:一般有两种类型的证书,我们使用的是带USB加密器的EV Code Signing Certificate

签名之后也能让用户知道应用开发者的身份,不至于是来历不明的软件。

  1. 准备好签名证书之后,我们将现有的升级逻辑进行优化,这里直接使用了官方的autoUpdater

    1. 使用autoUpdater中的方法替换现有方案中的升级逻辑
    2. 考虑自动升级失败的备用方案,在自动升级失败时,使用原有的升级逻辑中的方案,让用户重新安装完整的安装包
    autoUpdater.on('checking-for-update', () => {
      // 开始检查是否有新版本
      // 可以在这里提醒用户正在查找新版本
    })
    
    autoUpdater.on('update-available', (info) => {
      // 检查到有新版本
      // 提醒用户已经找到了新版本
    })
    
    autoUpdater.on('update-not-available', (info) => {
      // 检查到无新版本
      // 提醒用户当前版本已经是最新版,无需更新
    })
    
    autoUpdater.on('error', (err) => {
      // 自动升级遇到错误
      // 执行原有升级逻辑
    })
    
    autoUpdater.on('update-downloaded', (ev, releaseNotes, releaseName) => {
      // 自动升级下载完成
      // 可以询问用户是否重启应用更新,用户如果同意就可以执行 autoUpdater.quitAndInstall()
    })
  2. 为了配合electron-release-server对更新文件的要求,我们需要修改打包配置。

    打包工具现有的打包配置mac关键词的target是default,也就是打包mac应用时默认会生成dmg和zip文件,而win关键词的target是默认的nsis,打包后只生成了exe文件,并没有nupkg文件。于是尝试将target改为squirrel,会按照server的要求生成nupkg文件用于更新,autoUpdater.quitAndInstall之后具体的效果是:

    • Windows: 应用关闭,并出现一个可自定义的gif图片用于等待应用安装完毕,安装完毕后自动启动新的应用
    • macOS: 应用关闭,大约一秒就启动了新的应用

对比我们现有的效果,在Windows上差别不大,但进度条相对于gif来说更好一点。在macOS上明显是新方案占优。于是我将Windows和macOS分别做了升级的逻辑,在Windows上依旧走旧的升级逻辑,在macOS上通过autoUpdater来升级,并用旧逻辑作为备用方案。到此为止,我们的更新方案就完成啦,最终的效果:

  • Windows: 应用关闭,并出现一个小小的安装进度条用于等待应用安装完毕,安装完毕后自动启动新的应用
  • macOS: 应用关闭,大约一秒就启动了新的应用

踩坑

大部分情况下我们不会是第一个遇到问题的人,无数前辈在互联网上留下了他们解决问题的方案,等着我们从搜索引擎中将他们找到,然而”定义问题“本身就不是一件容易的事。留下一些开发过程中遇到的问题的解决方案,当作后来者的宝藏。

  • autoUpdater.setFeedURL出错。

    autoUpdater.on('error', (err) => {
      console.log(err) //"Error: The resource could not be loaded because the App Transport Security policy requires the use of a secure connection."
    })

    第一个遇到的问题出现得猝不及防,错误的描述其实已经很清晰,App Transport Security 要求资源通过安全的连接来加载,也就是通过HTTPS协议。autoUpdater.setFeedURL的url地址一看是https的,然后就略过了这里,殊不知后来发现这个接口中我们又对electron-release-server的接口进行了封装,而electron-release-server的接口并不是https的。然后将appUrl改成https即可,btw,这个文档的位置可真难找。

  • electron-release-server更新接口的检查更新逻辑问题。

    ${ADA_AUTOUPDATE_FEED_API}${platform}/${version}/${channel}

    channel为beta时,预期是不管任何时候,只要version不是最新的beta版本,接口应该返回最新的beta版本。但是实际发现这个接口的实现跟上传时间有关,比如version为2.18.0-beta.202008051710时,接口返回2.18.0-beta.202008142217。这是正常的。但是version为2.18.0-beta.202008051438时,接口返回2.18.0,返回的是stable的版本,并且没有按预期找到最新的beta版本。这是因为在接口内获取最新版本时,会根据版本创建时间去进行一次筛选,并且对channel采取了优先级过滤,比如我们这里是beta版本,在获取新版本时会把优先级更高的rc,以及stable版本都包含进来。

    没有考虑提交MR是因为看得出来作者在这里是有自己的考虑的,只是预期结果与我们希望的不一样而已,所以这里的解决方案是自行提供一个符合我们预期的接口。

  • Windows上通过命令行打包乱码问题。

    因为证书中有中文,所以需要修改命令行编码模式为utf-8,通过命令:chcp 65001 ,然后再次尝试即可。

总结

整体而言,Electron的开发体验还是很不错的,不管是官方文档还是第三方类库都比较完善,还有VSCode、Twitch、Facebook Messenger为它背书。桌面跨平台软件在可见的未来依旧是有不小的市场需求的,大家学起来吧!

招聘

我们是智联大前端,作为智联招聘的前端架构团队,我们在过去的几年中开创了细粒度的前端研发和发布模式,统一了移动端和桌面端的技术栈,搭建了灵活可靠的Serverless运行环境,率先落地了微前端方案,并且还在向FaaS和轻研发等方向不断迈进。

诚招前后端架构师和高级工程师,如果您也和我们一样热爱技术、热爱学习、热爱探索,就请加入我们吧!请将简历请发送至邮箱zpfe@group.zhaopin.com.cn,或者微信扫码了解详情。

image

查看原文

赞 12 收藏 5 评论 8

zdzen 关注了用户 · 2017-12-22

这波能反杀 @meetbo

我的公众号:不知非攻

关注 1973

zdzen 赞了文章 · 2017-07-28

Vue 基于 NUXT 的 SSR

SSR

首先说下 SSR,最近很热的词,意为 Server Side Rendering(服务端渲染),目的是为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息。

抓取页面的前提是 html 含有被抓取内容,我们不妨看看基于 vue 的线上 SPA 页面请求时返回了什么

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>iDareX敢玩</title>
    <meta name=keywords content="敢玩, iDareX, 敢玩TV, 敢玩活动, 敢玩自频道, 敢玩主题, 户外, 极限运动, 周边游, 探险, 时尚, 新潮, 运动视频, 体育, 新奇, 生活方式, 刺激, 惊险, 户外装备, 达人, 90后">
    <meta name=description content=自2014年10月创办以来,敢玩专注于极限户外和娱乐体育。从顽童、玩具、玩法三个方面,产出更专注于‘玩’的内容,已打造了一系列深受喜爱的娱乐体育真人秀和引爆网络的运动视频。!>
    <meta name=renderer content=webkit>
    <meta name=force-rendering content=webkit>
    <meta name=viewport content="width=1140">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <link rel="shortcut icon" href=static/favicon.ico type=image/x-icon>
    <link href=/static/css/app.eef5b81a3d1bee5054a791f452a34147.css rel=stylesheet>
  </head>
  <body>
    <div id=app></div>
    <script type=text/javascript data-original=/static/js/manifest.6d0adb8f2d8884be1c03.js></script>
    <script type=text/javascript data-original=/static/js/vendor.ec1cc90c9847c434ba7d.js></script>
    <script type=text/javascript data-original=/static/js/app.d7fd10ae7e4a68598037.js></script>
  </body>
</html>

我们的组件都是这个 html 文件返回后再渲染到 <div id=app></div> 里的。这就合理的解释了 SEO 缺陷的原因。

既然说到 SSR 可以解决 SEO 的问题,不难想到原理就是将我们的 html 在服务端渲染,合成完整的 html 文件再输出到浏览器。

另外 SSR 还适用以下场景

  • 客户端的网络比较慢

  • 客户端运行在老的或者直接没有 JavaScript 引擎上

vue 官网给出了 SSR 原理图片

对于这幅图的原理官网有详细解释,此类文章也很多,这里不赘述。

NUXT

我们进入正题说下 NUXT

Nuxt.js is a minimalistic framework for server-rendered Vue applications (inspired by Next.js)

作用就是在 node.js 上进一步封装,然后省去我们搭建服务端环境的步骤,只需要遵循这个库的一些规则就能轻松实现 SSR

安装流程

Nuxt.js 团队提供了 vue-cli 的初始化模板。前提安装 vue-cli,安装过的忽略此步

npm install -g vue-cli

完成后在需要创建的目录下执行以下

vue init nuxt/starter <project-name>
cd <project-name>
npm install

依赖安装完成后

npm run dev

打开浏览器 http://localhost:3000

说明:Nuxt.js 会监听 pages 目录下的改变,添加新 page 的时候不需要重启服务

目录结构

完成上面命令后你的目录结构会如下

Nuxt.js 给出了最简单的目录结构

|-- pages
    |-- index.vue
|-- package.json

也就是说,至少需要一个 page 来作为展示页。

文件的路径建议都采用绝对路径,表格如下

例:怎么在 /pages/user/me.vue 引入一个 static 文件夹里的图片

<img data-original="~static/img/logo.png" alt="Logo"/>

路由

Nuxt.js 根据 pages 目录结构去生成 vue-router 配置,也就是说 pages 目录的结构直接影响路由结构

例1:

|-- pages
    |-- posts
        |-- index.vue
        |-- welcome.vue
    |-- about.vue
    |-- index.vue

会生成

routes: [
  {
    path: '/posts',
    component: '~pages/posts/index.vue'
  }, {
    path: '/posts/welcome',
    component: '~pages/posts/welcome.vue'
  }, {
    path: '/about',
    component: '~pages/about.vue'
  }, {
    path: '/',
    component: '~pages/index.vue'
  }
]

例2:隐藏路由

在文件名前加 _

|-- pages
    |-- _about.vue
    |-- index.vue

会生成

routes: [
  {
    path: '/',
    component: '~pages/index.vue'
  }
]

配置文件

目录下的 nuxt.config.js 是我们唯一的配置入口,这里不建议修改 .nuxt 目录,除非特殊需求

默认的给力我们三个配置 ·head·css·loading· 分别是头部设置,全局css,loading进度条

nuxt.config.js 的全部的配置如下,点击查看具体例子

  1. cache

  2. loading

  3. router

  4. css

  5. plugins

  6. head

另外还提供了 vuex 等配置,感兴趣可以去 github 和官网。

NUXT 能为我们做什么

对于使用就说上面这么多(官网上都有,这里给大家一个概览),说下为什么选择 NUXT 来做 SSR

问题1:就是我们无需为了路由划分而烦恼,你只需要按照对应的文件夹层级创建 .vue 文件就行
问题2:无需考虑数据传输问题,nuxt 会在模板输出之前异步请求数据(需要引入 axios 库),而且对 vuex 有进一步的封装
问题3:内置了 webpack,省去了配置 webpack 的步骤,nuxt 会根据配置打包对应的文件

还有很多便捷之处,可以尝试去写一写,读读源码

总结

本篇主要介绍 nuxt 的便捷之处,在使用上目前不推荐使用,几个原因:

  • 文档不完善还有许多是空的,不是说我们什么信息都得不到,可以看文档的 examples,里面列举的比较全面。

  • 目前是 0.8.0 版本,而且 README 里介绍 1.0 即将到来,可能会添加新功能,文档也会完善,待到版本稳定后再部署也不迟。

文章出自 orange 的 个人博客 http://orangexc.xyz/

查看原文

赞 49 收藏 130 评论 27

认证与成就

  • 获得 0 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-02-24
个人主页被 51 人浏览