前端实现新版本发布提示

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

方案原理及使用前提

方案的核心原理是轮询 index.html,对比 html 内容是否一致,若不一致,则提示刷新。故使用该方案的前提是:让 index.html 每次发版前后内容产生不一致。

一般来说,现代化前端项目每次发版,所引用 JS 的文件名 chunkhash 值都会发生变化,故 index.html 中的 script src 属性 一定会发生变化。

如果因技术架构导致无法通过 chunkhash 来判断,那就要考虑通过其他方式让 html 产生变化。

比如:构建时,在 index.html 中,

  1. 注入当前 git-分支的 HEAD hash
  2. 注入当前打包时间
  3. …(任何你能想到的变化标识值)

注入的方式有很多种:

  1. 修改 webpack 配置,加入 process.env 变量(如:增加 process.env.APP_VERSION,在 index.html 中使用该变量)
  2. 在打包机上识别 html 文件并写入内容(如:匹配 </body> 标签,在前面插入 <script> window.buildTime = new Date().valueOf(); </script>
  3. …(任何在打包环节可以变动 html 的钩子)
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 等不赘述
写个 hexo 主题

尝试自己写个 hexo 的主题 themes/baozi,想了解一下实现过程。

目前已经发布到了 hexo.theme 搜索 baozi 可以查看并使用。

完成了以下几项内容,整体完成下来对前端开发者来说还是比较简单的。

  • 首页 展示/文章列表分页/回到顶部按钮
  • 文章页 展示/阅读大纲(TOC)/回到顶部按钮
  • 关于我页 展示个人信息/简历
  • 其他 文章搜索/样式处理(移动端兼容)
  • 分类 为文章设置所属分类/组,跳转到分类列表页

主题源码地址:https://github.com/zzyxka/baozi

预览:https://zzyxka.github.io

参考:

注:许多样式从原文复制粘贴而来、代码块颜色取自于 One Monokai 配色,非商用,若侵犯权益,请联系我整改。

mac 命令行别名设置

通过设置一些命令行别名来提升开发效率,比如:vscode 的 code 命令,结合别名,可以通过终端快速打开某个项目。

默认 mac 终端为 bash 指令,操作步骤如下

  1. 编辑 ~/.bash_profile 增加 alias blog="code ~/Documents/blog"
  2. 重启终端,或者执行 source ~/.bash_profile 使配置文件生效
  3. 在终端输入 blog 即可在 vscode 打开对应的项目

如果安装了 zsh,则需要修改 ~/.zshrc 其他步骤及内容不变。

判断用户环境/是否为 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。