写了一个珠海公交实时信息查询的 PWA 应用(BETA)

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1929 天前的主题，其中的信息可能已经有所发展或是发生改变。

基于现有公交 API 接口构建的线路实时信息查询 PWA 应用

线上地址

Android FireFox 访问时会有掉帧现象，但换成 Chrome 71.0 却没有。希望各位能反馈一下意见

主要是因为现有的微信查询页面实在太难用了，所以就自己写了一个 PWA 应用来玩玩。目前仅仅只是 BETA 版本，还有很多小细节和功能没有完善。但是应该不影响使用。

前端主要用了 Vue 和 UI 框架 Vuetify，GitHub;

后端则是 Koa 和 Redis，但是代码并不打算公开，因为写的实在丑(PS: 页面代码也很丑)。因为想学一门 FP 类型的语言，所以接下来的后端开发打算用 Elixir。到时候发布正式版的时候应该会把后端代码也放出来。

网站则是放在 Amazon Lightsail 新加坡节点,所以各位访问的时候可能不会特别的快。还望见谅！

尚未实现的功能

[ ] 基于 WorkBox,增加常用数据的缓存策略
[ ] 展示线路详情时滚动 Y 轴到离用户当前位置最近的站点
[ ] 将用户经常查询的班次固定至首页
[ ] 用户可以订阅当前线路的巴士信息，当到达指定站点时进行提醒。(推送方式还在考虑当中，目前想到了：Web Push API、邮件、微信 Server 酱，SMS 等，但是每种方式都有各自的局限性导致不能很好的运用在项目中，具体原因不表，有兴趣或者有提议的朋友可以回帖留言)

最后，如果各位在使用过程中有好的建议或者 BUG 反馈亦或者想参与到这个开源项目当中的话可以直接在下面留言或者给我发送邮件

当然，如果各位有珠海的前端工作岗位推荐的话，也可以给我 email 喔~

查询

20 条回复 • 2019-01-07 17:09:43 +08:00

lidfather

2019-01-06 17:01:16 +08:00 via Android

高度限制有点难受

CraxClive

2019-01-06 17:07:55 +08:00 via Android

@lidfather 您说的高度限制指的是？

lidfather

2019-01-06 17:19:39 +08:00 via Android

@CraxClive 搜索结果 panel，
还有，交互逻辑有点奇怪，panel 点一下才能看结果

isCyan

2019-01-06 17:20:47 +08:00 via Android

比官方公众号好看太多了

CraxClive

2019-01-06 17:31:53 +08:00 via Android

@isCyan 哈哈，还好啦。主要是我这个配色也挺寡淡的。

CraxClive

2019-01-06 17:38:46 +08:00 via Android

@lidfather 高度限制应该是我这边没有考虑到的点之一，您说 panel 需要点一下指的是 Show 按钮对嘛？如果是这样的话我明白了，之后的版本中会在点击线路之后直接显示站点信息的。

tygm

2019-01-06 19:56:07 +08:00 via Android

为什么 uc 浏览器没有弹出添加 pwa 的选项

quietjosen

2019-01-06 21:39:03 +08:00 via iPhone

考虑加到实时公交小程序里

CraxClive

2019-01-06 22:44:36 +08:00 via Android

@quietjosen 我这边可以提供接口给你，也可以告诉你官方的接口怎么获取。

CraxClive

2019-01-06 23:10:26 +08:00 via Android

@tygm 这个不太清楚诶，因为我这边还没测试 UC 的兼容性，已知 Chrome 和 Firefox 都是有的。

winterx

2019-01-06 23:21:11 +08:00

珠海人支持一下楼主

未授权的接口建议楼主还是不要公开了，公开了搞不好大家都没得用
珠海公交现在有 3 个官方查询，公交自己是最丑的

rogwan

2019-01-06 23:33:33 +08:00 via Android

@tygm 浏览器弹这个要满足 2 次访问，以及浏览器兼容，我试过不是所有的都能弹。还有一个问题没太清楚：就是浏览器是不是会判断已经添加到桌面了？否则总是弹不是很骚扰？

CraxClive

2019-01-06 23:36:39 +08:00

@rogwan 详见 Lavas 文档 https://lavas.baidu.com/pwa/engage-retain-users/add-to-home-screen/app-install-banners

CraxClive

2019-01-06 23:38:22 +08:00

@winterx 真的有三个接口嘛？我目前的话只知道有两个接口。可否邮件告知这三个接口分别的出处呢？感谢！接口我目前还不打算公开。

rogwan

2019-01-06 23:47:07 +08:00 via Android

@CraxClive 这篇文章以前看过，没有提到已经添加到桌面，之后访问，怎么判断还要不要继续弹？

CraxClive

2019-01-07 00:10:35 +08:00

@rogwan 刚才我翻了翻 Google Developers 才知道，这个判断是由浏览器进行的，开发者无需也不能手动介入。其中的判断原理尚未明确，详见： https://developers.google.com/web/fundamentals/app-install-banners/。
官方的判断条件有提到“ The web app is not already installed"。所以得出这个判断其实是浏览器来完成的这个结论。

quietjosen

2019-01-07 06:05:32 +08:00 via iPhone

@quietjosen 谢，我应该也能搞定，就是城市太多了…另外，就是测试麻烦，毕竟不在当地，准不准不知道。

daguaochengtang

2019-01-07 09:07:21 +08:00

楼主你的数据怎么来的？我输入公交路线的时候，看 Network 面板没有发送任何请求啊？

CraxClive

2019-01-07 13:22:42 +08:00 via Android

@nikolausliu 这个是存在本地的 JSON 里面，后期会改成从服务器获取。具体是从公交官方网站公布的线路信息里面统计出来的。

winterx

2019-01-07 17:09:43 +08:00

@CraxClive #14 其实是 4 个，发你了