先放网址: https://hitokoto.heitaov.cn
这是一个展示一句话的渐进式网页应用,emmm.....可能有点鸡肋。如果你喜欢宋体,为了更好的视觉效果,建议在应用中开启思源宋体选项。
开发时间
今年 2 月就开始惦记,7 月开始编写代码,打算 9 月中旬写完然后发布到 V2 上来寻求面试机会的,结果 8 月底去网易面试然后通过了。然后从 9 月底继续编写,现在已经部署到线上了。
初衷
一开始是使用别人的一言 API,然后就惦记着单独做一个 PWA 应用。恰好看完了《松浦弥太郎的 100 个基本》,当时觉得书里这么多想法,自己一下子记不住,记住过段时间又会忘,那么有没有地方能够循环展示这些内容呢?
我一开始是打算做一个 PWA 版的 一个(就是韩寒工作室出的那个应用),但是在图文排版上不太好处理,图片的来源没有,而且使用的一言 API 也没有图片,最终还是回到了「展示一句话」这样的基本点上。
关于句子,有一个收集网站叫做句子迷,句子内容丰富,但是网页设计还停留在 Web2.0,移动端网页中也是传输的 HTML 页面,而不是常见 JSON 接口。很希望句子迷能够改版。
所以这个网页应用能够像句子迷网站那样收集自己喜欢的句子,并且能够展示出来。针对句子,采用了竖着排版和横着排版两种布局,不适合整篇文章。
怎么使用在「关于」选项里面有介绍,首页播放展示是以模式为主的。
技术
开启 gzip 后,网站大小为 200KB 左右,字体资源 24MB 是放在 CDN 上的。每次更新最多只会使用 200KB 的流量,字体资源下载后只要不被清理掉,就再也不会向网络请求获取。 网站采用的前端技术也没什么新鲜的东西,可能就多了一个 indexedDB 缓存 20m 的字体文件吧,indexedDB 非 https 的网站也能使用。 后台是用 restify+mongodb 写的,代码没有根据业余分割到各自的文件夹(为了使用类型提示),为了安全性暂时不公开后台源码,一年后再公开。
前端还存在的问题是
- 我 webpack production 的配置不能开启 uglifyPlugin,我不知道为什么 是因为 commonChunck 吗?我想让 ServiceWorker 增量更新资源,只更新 bundle,vender 使用以前的,不知道 OfflinePlugin 的逻辑是不是这样写的。
- 在 fullscreen 模式下,软键盘会遮住输入框。
- React 未做优化,有一些不必要的渲染。
- 24MB 的字体文件第一次解析时会导致页面卡顿。