mithril.js PWA 完整指南：用 8.93KB 框架搭出可安装的离线应用

mithril.js PWA 完整指南：用 8.93KB 框架搭出可安装的离线应用

【免费下载链接】mithril.jsA JavaScript Framework for Building Brilliant Applications项目地址: https://gitcode.com/gh_mirrors/mi/mithril.js

mithril.js 是一个构建单页应用的 JavaScript 框架，gzip 后仅 8.93KB，路由和数据请求模块开箱即用。本文按可安装性、离线能力、性能表现三个维度拆解 mithril.js PWA 的落地路径，你能拿到一份可核对的配置清单和可复现的基准数字。

先划清边界：框架给什么、缺什么

mithril.js 本体覆盖的是"轻量躯干"：虚拟 DOM 渲染、路由（api/router.js）、XHR 封装（request/request.js）、响应式数据流（stream/stream.js）。它不包含 Service Worker，也不带 manifest——这两样是浏览器标准能力，PWA 的可安装性完全靠它们，需要自己补上几十行代码。把这一点和"框架自带 PWA 全家桶"的说法区分开，后面就不会踩坑。

可安装性：manifest 与 Service Worker 两件事

manifest.json 最小字段

清单文件本质上是告诉浏览器"这是个应用"：name和short_name决定安装名，icons至少给 192px 与 512px 两档，display: "standalone"让它以应用窗口而非网页标签启动，theme_color和background_color控制启动屏配色。文件放站点根目录，HTML 里用link rel="manifest"引入即可。

Service Worker 的注册时机

Service Worker 是浏览器与网络之间的拦截层，所有资源请求先经它决定是否走缓存。建议等首屏渲染完成后再注册，避免抢占首屏请求；同时注意它只在 HTTPS（或 localhost）下生效，内网 HTTP 环境会直接失效。

离线能力：先缓存静态资源，再处理数据回退

静态资源走缓存优先

JS、CSS、图片这类不常变的资源适合缓存优先策略：命中缓存直接返回，未命中时回源并写入缓存，可在后台更新下一版。mithril.js 打包产物就 24KB 左右的原始体积（gzip 后 8.93KB），加上路由模块整体很小，首屏资源一次缓存基本就够离线跑了。

数据请求做"最后一次成功值"回退

接口数据不建议长缓存。实用做法是用内置的 request 模块发请求，失败时回退到 localStorage 里存的最后一次成功响应；数据到达后通过 stream 模块 更新，UI 层自动重渲染，重连时用户无感知。

性能底数：基准数字怎么查

仓库自带一份 性能测试脚本（源自 preact 的基准用例），本地一条命令就能跑：

npm run perf

它覆盖 20,000 个虚拟节点的渲染场景，同场景下 mithril.js 整体快于 React；框架加载耗时约 4.5ms，平均单次渲染在 6.4ms 量级。对 PWA 的意义很直接：首屏速度和安装耗时都受益于此，轻量包体是三项 PWA 指标里最容易拉开差距的一项。

动手前的五步清单

1. npm install mithril --save，或git clone https://gitcode.com/gh_mirrors/mi/mithril.js拿源码研究构建；
2. 根目录放 manifest.json 并在 HTML 中引用；
3. 写几十行的 Service Worker 并在首屏后注册；
4. 全站上 HTTPS；
5. 跑一遍npm run perf，确认基准数字在你的环境可复现。

mithril.js 做 PWA 的路径就是"小框架 + 两份标准配置"：8.93KB 的运行时负责快，manifest 与 Service Worker 负责可安装与离线。下一步建议直接 clone 仓库跑一次基准测试，再动手写你的 manifest.json。

【免费下载链接】mithril.jsA JavaScript Framework for Building Brilliant Applications项目地址: https://gitcode.com/gh_mirrors/mi/mithril.js