一言 PWA——一个展示一句话的网站

[tomato3]

先放网址： 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 写的，代码没有根据业余分割到各自的文件夹（为了使用类型提示），为了安全性暂时不公开后台源码，一年后再公开。

前端还存在的问题是

1. 我 webpack production 的配置不能开启 uglifyPlugin，我不知道为什么 是因为 commonChunck 吗？我想让 ServiceWorker 增量更新资源，只更新 bundle，vender 使用以前的，不知道 OfflinePlugin 的逻辑是不是这样写的。
2. 在 fullscreen 模式下，软键盘会遮住输入框。
3. React 未做优化，有一些不必要的渲染。
4. 24MB 的字体文件第一次解析时会导致页面卡顿。

[BearD01001]

赞👍🏻

[lingtings]

好漂亮

[tomato3]

@irainsoft 😂是的。现在改回默认解析，可能十多分钟后可以访问

[jisibencom]

和我的站有一些类似，虽然没我的简单，但技术比我高太多。

[Patrick95]

很棒

[cyancat0525]

看了一下很不错，一页一个才有意境

[stebest]

之前有人想把一言接入 live2d 的说，不知道后来怎样了。https://github.com/EYHN/hexo-helper-live2d

[jinzhe]

下载字体进度怎么做的？

[quietjosen]

适合展示读书笔记、书摘。

[tomato3]

@jinzhe XHR2.0 的 process 事件。

[quietjosen]

点子不错。现在大段大段的内容，人都懒得读了。少，反而更容易被接受。

参考你的创意，用户从 Klib 中分享精彩的书摘或读书笔记，这些公开的笔记生成一个广场，每次打开都随机抽选一条。不算抄袭吧？😂

利益相关：我是 Klib 作者。

[Thiece]

@tomato3
@misaka19000

我记得最早的一言是这个 http://hitokoto.us/ 然后作者弃坑停止维护了。

[zhanziyang]

简简单单，也能让人眼前一亮！支持！

[tomato3]

@quietjosen 😃请随意~ 好点子值得分享~

[SamWanng]

很好看，可以做个小程序啊。

然后可以生成图片分享到朋友圈，附带二维码。

[woshinide300yuan]

挺好的。

[xshwy]

@tomato3 哈哈哈 这么快就添加上了啊 已经看到空格可以换下一句了

[tomato3]

@Thiece 是的。不知道最近网站为啥不能访问。

@SamWanng 没有考虑过做小程序。如果要生成图片分享的话，要自带截图的库文件，使用频率并不高，手机截图或者电脑截图不就可以了吗？分享的话，一个 url 不就可以了吗? hitokoto.heitaov.cn 暂时没考虑吸引用户，这是个小众应用。如果要考虑社交，我一个人不适合运营，还有监管问题。要么庸俗，要么孤独。

[quietjosen]

@tomato3 哈哈，我也就这么一说；真做起来，可没这么轻松。比如，监管风险。

[cattrace]

不错，挺喜欢的，收藏了