前端实现新版本发布提示

系统在发布后,会有希望用户刷新的业务场景。本文仅为 前端发布,纯前端实现提示的场景提供一种思路/方案。如果后端发布也要触发提醒刷新,那一般只能通过接口交互方案来触发前端提示。

react 项目搭建

概述

示例项目地址:https://github.com/zzyxka/fizzy-react

  1. 创建项目:包管理、镜像源
  2. webpack 打包配置:基础打包配置文件、使用 plugin 处理 html
  3. 在项目中使用 CSS:CSS Module, postCSS, 分离打包CSS
  4. 在项目中使用 React 和 TS - Babel
  5. 规范编码 Lint - ESLint, StyleLint
  6. 使用 Prettier 格式化项目
  7. 客户端路由 ReactRouter(Lazy Loading 方案)
  8. 开发生产分离:devServer、HMR;treeShaking、css 压缩;多线程打包、外部 CDN 等等
  9. 扩展
    1. UI 库:ant-design
    2. 状态管理 redux
    3. 其他流行方案:CSS IN JS 的 styled-component、Tailwind CSS 等不赘述
判断用户环境/是否为 Chrome 浏览器

背景

toB 业务系统只打算兼容 Chrome,其他浏览器层出不穷的兼容问题不打算考虑。新版 Edge 和 Chrome 特性基本一致,所以不考虑细分判断 Edge 。

方案

使用下述判断基本满足条件(PC 和 移动端的 Chrome/Edge 访问)。

1
isChrome = /Chrome/.test(navigator.userAgent) || /CriOS/.test(navigator.userAgent);

示例页面:https://zzyxka.github.io/pages/browser-ua/index.html

CriOS 主要是为了判断 IOS 移动端 Chrome,原计划是通过 window.chrome 来判断,但经过测试发现,IOS 下的 Chrome,既没有 window.chrome 对象,又没有 包含 Chrome 的 userAgent。

基于 Electron 的团队任务提醒工具

日常工作线上化后,很多时候需要自动化给团队的同学推送消息。基本上会采用企微机器人的方式,但公司企微机器人服务因为撑不住,故不给非业务诉求使用了,只能退而求其次,想到使用 node-mail 来发邮件,但腾讯企业邮箱又有发信限制,其他没有发信限制的邮箱又不够安全合规。最终有了用 Electron 做一个桌面工具给团队同学安装使用的想法,后台(软件最小化)获取 websocket 消息推送,借助 Electron 能力,弹出 mac 消息提示。

举例一个实际的场景:系统发版申请,现有一个 web 页面,用来填写发版申请单,填写完成后推送提醒给发版执行人

核心处理:

  1. websocket 服务:使用 Node 提供 websocket 服务,web 系统/ node 服务 完成消息交互测试
  2. Eleectron 应用搭建:
    1. 使用 Electron 加载 web 系统,登录后传入 用户ID 连接 socket
    2. 使用 Electron 中 Node 线程获取 sokcket 消息并弹出提醒
Electron 笔记

过去在工作中因需要,匆忙给政企部门封装过一个 Electron 客户端应用,整个过程非常“敏捷“,印象中有很多版本方面的差异和兼容问题,但没有总结,这里对着官网整个基础 mac 应用,学习整理下各方面功能实现及 API 调用。

官网:https://www.electronjs.org/

本文完成 DEMO : https://github.com/zzyxka/electron-demo-app

注:本文以 mac 平台为准,其他平台可能需要增加“补丁”类模板代码。

概述

github打不开的解决办法

问题

常常因为网络环境,遇到 github.com、github.io、raw.githubusercontent.com 等网址打不开,比如:博客用 raw.githubusercontent.com 图床,出现图片裂开等情况。

解决方案

通过多种方式(亲测只有 github520 方案稳定些),改 hosts,让其能够成功解析出 IP 地址,从而访问 github.com 等网址。

github520

https://gitee.com/klmahuaw/GitHub520

刷新 DNS 缓存