V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
morethansean
V2EX  ›  PWA

我有一个开发了快两年的 PWA V2EX App 和大家分享……

  morethansean · 2019-05-17 09:26:36 +08:00 · 18944 次点击
这是一个创建于 1777 天前的主题,其中的信息可能已经有所发展或是发生改变。
事情的起因是这样的,在 17 年中旬,体验了一把被称为是 Sketch 竞品的,还处在 beta 阶段的 Adobe XD, 做了一个 V2EX 的移动端 redesign.
然后就开始了断断续续长达两年的开发之旅 _(:з」∠)_


(当时的设计稿)

最初做这个东西的原因,其实是一个很简单的需求:时逢多事之年,各种想要关注的帖子被丢进隐藏节点无法 follow 进度,所以想做一个 follow 帖子的功能把这些帖子的更新直接展示到首页区。
断断续续开发了一个月左右,由于有其他几个内容创作相关的 side project 占据了大量时间,这个项目就停止了,毕竟,当时的半成品已经够自用了……
直到,前段时间突然看到有人发帖问这个 PWA 是什么……于是就抽了点时间,把他做了一个勉强能使用的初版。
这两年发生的事情太多了,包括审美上的变化,让这个 app 的设计很多地方已经显得陈旧过时;随着 Web 的发展,Polymer 也从迈入了 3.0 的时代,它抛掉 html imports 拥抱 ES modules,从 bower 迁移到 npm. 这些种种的更迭,也是当初让我放弃继续开发这个 app 的原因之一:总想把一个东西做到最好,所以要保持所有部分都是最好用的零件……比如过旧的设计无法驱动我获得实现时的快感后,当然就没有动力继续做下去了……所以本来是想再重新更新一下设计以及更新底层框架之后再继续做的……
至于,为什么突然又有了动力,这是另外一个话题了,废话说了一大堆,还是简单介绍一下功能吧:

首先,这是一个手机端的 Web 应用,准确地说是运行在非 iOS 系统下的 Chrome 上的应用(不过交互设计和代码实现都是移动端的,所以 desktop 上很 buggy )。
得益于 Google 自己对 PWA 的推广和支持,你可以把这个 App 像 Native 应用一样安装到 Android 手机里并像 Native 应用一样使用,并实时获取最新提醒的 push 通知。

下面是几张截图预览:





一些小功能:

- 长按快速预览主题
- 楼层内联回复内容
- 图片查看器
- 分享你感兴趣的主题
- 查看历史浏览记录
- 获取新消息通知

一些正在开发的功能:
- 跟踪帖子,并获取他们的更新提醒(咦,这不是当初我的第一功能要求吗)
- PIN 码界面增加使用指纹传感器的选项
- 优化现在的 emoji 输入器

至于,怎么体验这个 PWA 版本的 V2EX 呢?
你需要一个可以提供 https 访问的服务器来部署他,因为 V2EX 并没有提供什么真正可以使用的三方 API.
如果你熟练的话,整个安装过程应该在 10 分钟以内,访问下面的链接获取指引: https://github.com/7nights/get-v2ex

简单介绍一下,这个程序会通过访问 V2EX 来提供 RESTFul 的 API 让你的 PWA 程序调用,出于安全原因考虑,他基本上只支持一个用户(其实支持多用户估计也会被 V2 反爬的)。

再多嘴一句,请使用 https, 不仅仅是因为大部分功能(比如分享、通知推送等等)都需要 https,还是为了你自身账号安全着想……

有任何 bug 或者建议都可以提到 issues 里。谢谢大家啦~
第 1 条附言  ·  2019-05-17 22:28:15 +08:00
修复了一些样式上的问题。
在 bv2ex 的 Releases tab 下下载最新的 zip 包解压到 get-v2ex 文件夹下,然后 cd 进 public 目录运行一次 npm run build 即可。

get-v2ex 的升级需要 git pull 并重新启动服务器。
129 条回复    2020-12-12 08:34:50 +08:00
1  2  
thisisgpy
    1
thisisgpy  
   2019-05-17 09:28:43 +08:00   ❤️ 2
会 UI 的程序员真可怕
1847bell
    2
1847bell  
   2019-05-17 09:29:16 +08:00
会 UI 的程序员真可怕
bokchoys
    3
bokchoys  
   2019-05-17 09:37:08 +08:00 via iPhone
这是啥设计软件
tangStudy
    4
tangStudy  
   2019-05-17 09:37:59 +08:00   ❤️ 1
会 UI 的程序员真可怕
kitalphaj
    5
kitalphaj  
   2019-05-17 09:38:11 +08:00
会 UI 的程序员是真的可怕。而且这个还带一个服务端我的妈呀。。。
kaishi123
    6
kaishi123  
   2019-05-17 09:42:06 +08:00
厉害厉害,佩服佩服。
imchenlong
    7
imchenlong  
   2019-05-17 09:44:22 +08:00
图挂了,看不到啊
Dkngit
    8
Dkngit  
   2019-05-17 09:44:31 +08:00
会 UI 的程序员真可怕
JohnChiu
    9
JohnChiu  
   2019-05-17 09:47:14 +08:00
真的很漂亮,优秀
cheniousl
    10
cheniousl  
   2019-05-17 09:55:26 +08:00 via Android
点赞,中午回去装一下看看。
zhang1215
    11
zhang1215  
   2019-05-17 09:57:41 +08:00
会 UI 的程序员真可怕
SpiderXiantang
    12
SpiderXiantang  
   2019-05-17 09:59:50 +08:00
会 UI 的程序员真可怕
Navee
    13
Navee  
   2019-05-17 10:01:42 +08:00
会 UI 的程序员真牛逼
dremy
    14
dremy  
   2019-05-17 10:03:28 +08:00 via iPhone
会 UI 的程序员真可怕
chotow
    15
chotow  
   2019-05-17 10:07:31 +08:00   ❤️ 1
看到 PWA 就滚进来了,结果发现 UI 也好看到爆炸,_(:з」∠)_
cheeto
    16
cheeto  
   2019-05-17 10:13:27 +08:00
想和楼主学 UI
Blacate
    17
Blacate  
   2019-05-17 10:18:24 +08:00
会 UI 的程序员真可怕
sheeta
    18
sheeta  
   2019-05-17 10:35:47 +08:00
会 UI 的程序员真可怕
herofire
    19
herofire  
   2019-05-17 10:37:39 +08:00
会 UI 的程序员真可怕!):
sanmmmm
    20
sanmmmm  
   2019-05-17 10:38:01 +08:00
会 UI 的程序员真可怕(复读)
donotquestion
    21
donotquestion  
   2019-05-17 10:40:32 +08:00
为什么看不到图
yuthelloworld
    22
yuthelloworld  
   2019-05-17 10:40:48 +08:00
看了半天,这是一个后台接口服务吧,前台呢?
designer
    23
designer  
   2019-05-17 10:41:15 +08:00 via iPhone   ❤️ 1
你真棒!
malagebidi
    24
malagebidi  
   2019-05-17 10:41:56 +08:00
会 UI 的程序员真可爱
Willjim
    25
Willjim  
   2019-05-17 10:42:29 +08:00 via Android   ❤️ 1
楼主你知道吗?我们找你找的好辛苦啊。之前在少数派里面看到一个朋友用的截图,全网都搜不到。这下终于逮到你了![戴手铐]
jaylee77
    26
jaylee77  
   2019-05-17 10:44:14 +08:00
前端在哪? 你发的不是只有后端 API 吗?
fxk
    27
fxk  
   2019-05-17 10:45:23 +08:00 via iPhone
@Willjim #25 我也是,之前看过那篇文章,截图有这个,结果找不到客户端。
morethansean
    28
morethansean  
OP
   2019-05-17 10:46:38 +08:00 via iPhone
@yuthelloworld
@jaylee77
你们为什么这么凶……前端也在文档里……安装过程中的一步就是安装前端……在配置 nginx 的那个章节……
morethansean
    29
morethansean  
OP
   2019-05-17 10:47:11 +08:00 via iPhone
@Willjim 哈哈哈谢谢你让我有动力把它做完……
Blacate
    30
Blacate  
   2019-05-17 10:59:30 +08:00
用上了 真香 感谢楼主
redford42
    31
redford42  
   2019-05-17 11:05:00 +08:00
好,我要学 UI 了
joooooker21
    32
joooooker21  
   2019-05-17 11:08:06 +08:00
给这 UI 点个赞
morethansean
    33
morethansean  
OP
   2019-05-17 11:11:32 +08:00
@Blacate #30
给你娴熟的动手能力点赞!
niceshoot
    34
niceshoot  
   2019-05-17 11:13:06 +08:00
枯了,太好看了
yggd
    35
yggd  
   2019-05-17 11:15:06 +08:00
会 UI 的程序员真可怕
lsmlive
    36
lsmlive  
   2019-05-17 11:16:40 +08:00
好看,话说现在的 XD 能和 sketch 对打了吗?
blinue
    37
blinue  
   2019-05-17 11:18:34 +08:00 via Android
很久以前就有人求这个 ui,真的好看
https://www.v2ex.com/t/550390
Zealous
    38
Zealous  
   2019-05-17 11:27:00 +08:00
d(゚∀゚ d)点赞!
VENTDOUX
    39
VENTDOUX  
   2019-05-17 11:30:16 +08:00
会 UI 的程序员真可怕
banewu
    40
banewu  
   2019-05-17 11:32:31 +08:00
会 UI 的程序员真可怕
fengc
    41
fengc  
   2019-05-17 11:59:48 +08:00 via iPhone
会 UI 的程序员真可怕
ReysC
    42
ReysC  
   2019-05-17 12:12:56 +08:00
会 UI 的程序员真可怕
WhoCanBeRich
    43
WhoCanBeRich  
   2019-05-17 12:15:00 +08:00
看不到图的 哭了
jason94
    44
jason94  
   2019-05-17 12:18:24 +08:00
会 UI 的程序员是真真真的可怕
morethansean
    45
morethansean  
OP
   2019-05-17 12:24:53 +08:00
@WhoCanBeRich #43
不应该呀,用的微博图床...
Zzdex
    46
Zzdex  
   2019-05-17 12:36:01 +08:00 via iPhone
原来少数派的是你,找了好久
Microi
    47
Microi  
   2019-05-17 12:37:32 +08:00
设计+开发,你是真的强。
DamonLin
    48
DamonLin  
   2019-05-17 12:41:56 +08:00
会 UI 的程序员真可怕
WEBUG
    49
WEBUG  
   2019-05-17 12:44:27 +08:00 via Android
这个设计稿用的那个软件是什么
dcalsky
    50
dcalsky  
   2019-05-17 12:45:07 +08:00
我十分建议楼主部署一下,非常美。
Lin0936
    51
Lin0936  
   2019-05-17 12:47:12 +08:00 via Android
没服务器了,哭了。
goodryb
    52
goodryb  
   2019-05-17 12:48:21 +08:00
有 demo 吗,先体验下
superbai
    53
superbai  
   2019-05-17 13:27:56 +08:00
太优秀了,能讲讲 UI 怎么设计的么?
VENTDOUX
    54
VENTDOUX  
   2019-05-17 13:29:15 +08:00
万分希望楼主可以出个 IOS 版本
doco
    55
doco  
   2019-05-17 13:29:43 +08:00
我的 pwa 只会盗用 app 的 api 然后用 nginx 转发...感觉 low 爆了
fedfrank
    56
fedfrank  
   2019-05-17 13:31:10 +08:00
can we make friend?
PureWhiteWu
    57
PureWhiteWu  
   2019-05-17 13:31:12 +08:00
会 UI 的程序员真可怕
Maboroshii
    58
Maboroshii  
   2019-05-17 13:39:21 +08:00
没有部署好的版本呀
fenx
    59
fenx  
   2019-05-17 13:40:55 +08:00   ❤️ 1
挺好的👍,不过一些页面的几何纹理背景建议还是去掉或者再再淡化,现在和 lable 的灰色重合了;
Nodes 页面的 show all 应该更贴近上方一些,现在居中会造成无法判断 show all 下面还是上面的节点;
评论的灰色背景感觉可以再浅一点;
Member 的 BLOCK 建议收到二级菜单不直接放出来(社区嘛);
头像方形还是圆形也是建议统一 ne ;
----
P.s. 我最近也在想写一个 v2 主题,不过没什么方向也一直没什么时间
fcoolish
    60
fcoolish  
   2019-05-17 13:45:17 +08:00
厉害厉害
hardname
    61
hardname  
   2019-05-17 13:48:30 +08:00
好看~ 已 star😆
arnoldFu
    62
arnoldFu  
   2019-05-17 13:49:25 +08:00
这是什么设计软件?
angith
    63
angith  
   2019-05-17 14:05:07 +08:00
会 UI 的程序员是真儿是可怕
DEANHZED
    64
DEANHZED  
   2019-05-17 14:07:24 +08:00 via iPhone
会 UI 的程序员真可怕 每条五毛,括号删除
wmllll
    65
wmllll  
   2019-05-17 14:08:26 +08:00
好看~
Ixizi
    66
Ixizi  
   2019-05-17 14:09:06 +08:00
最近也在用 Adobe XD 了 Windows 下可以编辑 Sketch 的文件 很舒服
supuwoerc
    67
supuwoerc  
   2019-05-17 14:45:44 +08:00
属实牛批
Mantext1989
    68
Mantext1989  
   2019-05-17 14:51:13 +08:00 via Android
原来是楼主做的
abc1763613206
    69
abc1763613206  
   2019-05-17 14:58:45 +08:00 via Android
会 UI 的程序员真可怕
blufaux
    70
blufaux  
   2019-05-17 15:09:38 +08:00
好麻烦,不会编程,怎么用啊?
morethansean
    71
morethansean  
OP
   2019-05-17 15:11:41 +08:00
@VENTDOUX #54
我...尽量吧... 毕竟 iOS 就是纯网页版了。而且 iOS 的 Safari 简直就是新时代的 IE,需要让我写巨多的 polyfill 或者调试兼容...
wjwwq
    72
wjwwq  
   2019-05-17 15:18:09 +08:00
楼主牛批!
WildCat
    73
WildCat  
   2019-05-17 15:35:51 +08:00 via iPhone
设计稿有什么 license 嘛
SakuraKuma
    74
SakuraKuma  
   2019-05-17 15:37:52 +08:00
adobe xd 真的好用!! 然后拉上蓝灯就可以团队共享了..
andyangyu
    75
andyangyu  
   2019-05-17 15:42:28 +08:00
楼主动手能力真强!可惜光是带 HTTPS 的服务器就让我止步了
xrr2016
    76
xrr2016  
   2019-05-17 15:42:31 +08:00
楼主好 6 啊!膜拜
blufaux
    77
blufaux  
   2019-05-17 15:45:59 +08:00
@morethansean 我们需要 iOS 的
Love4Taylor
    78
Love4Taylor  
   2019-05-17 15:47:47 +08:00 via Android
您可终于放出来了 等了好久 233333
morethansean
    79
morethansean  
OP
   2019-05-17 15:47:49 +08:00
@xrr2016 #76
let's encrypt 无脑部署证书啊...
JQZhang
    80
JQZhang  
   2019-05-17 15:56:13 +08:00
同样是程序员,差距咋就这么大呢,啥时候我要能像楼主这么牛逼就心满意足了,另 ios+1
1762628386
    81
1762628386  
   2019-05-17 16:08:34 +08:00
没有 web 版?
nanau2016
    82
nanau2016  
   2019-05-17 16:10:16 +08:00
如果 IG 上那个 7nights 是楼主的话,不仅有才华,还真 tm 的帅
morethansean
    83
morethansean  
OP
   2019-05-17 16:13:50 +08:00
@nanau2016 #82
哈哈哈哈哈熟人啊,爱你哦。
goodboy886
    84
goodboy886  
   2019-05-17 16:14:11 +08:00 via Android
厉害了,漂亮
daryl
    85
daryl  
   2019-05-17 16:17:49 +08:00
会 UI 的程序员真可怕
wolfie
    86
wolfie  
   2019-05-17 16:19:25 +08:00
好看,第一张图是一个整理软件还是图片管理器。
cccicl
    87
cccicl  
   2019-05-17 16:21:16 +08:00
会 UI 的程序员真可怕
leefly
    88
leefly  
   2019-05-17 16:25:41 +08:00
@VENTDOUX 现在 ios 也支持 PWA 了 (残缺版本
HuasLeung
    89
HuasLeung  
   2019-05-17 16:43:29 +08:00
硬核
ODD10
    90
ODD10  
   2019-05-17 16:46:39 +08:00
对方不想说话,并向你抛出一个错误:

```

(node:661) ExperimentalWarning: The fs.promises API is experimental
task runner established!
get-v2ex is listening on port 3003!
Get task { taskId: 'fetch-notifications',
interval: 600000,
next: 1558082619038,
start: 1558082619038,
runner: '127.0.0.1' }
(node:661) UnhandledPromiseRejectionWarning: Error: User does not sign in
at Object.exports.get (/home/ubuntu/get-v2ex/lib/userrequest.js:39:39)
at taskQueue.onRun (/home/ubuntu/get-v2ex/tasks/index.js:28:60)
at (anonymous function).forEach.func (/home/ubuntu/get-v2ex/lib/taskrunner/index.js:258:11)
at Array.forEach (<anonymous>)
at TaskQueue.executeTask (/home/ubuntu/get-v2ex/lib/taskrunner/index.js:257:30)
at processTicksAndRejections (internal/process/next_tick.js:81:5)
(node:661) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:661) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

```
ODD10
    91
ODD10  
   2019-05-17 16:50:21 +08:00
能访问,就是一直提示未登录,获取不到数据;话说配置了用户名&密码,用户验证码你是怎么处理的。
我尝试访问登陆页面,验证码图片是 500,获取不到惹。
ww980624
    92
ww980624  
   2019-05-17 16:53:37 +08:00
会 UI 的程序员真可怕
morethansean
    93
morethansean  
OP
   2019-05-17 16:59:50 +08:00
@ODD10 #90
你是不是没有 follow 文档执行 npm init 来登录...
Lin0936
    94
Lin0936  
   2019-05-17 17:00:20 +08:00
部署上了,但是 captcha 请求(好像是验证码)一直 404.
ODD10
    95
ODD10  
   2019-05-17 17:04:53 +08:00
@morethansean #93
好了,我开始没 config.js 就 init 了!
重新 init 一次,再启动程序,正常了
ODD10
    96
ODD10  
   2019-05-17 17:07:33 +08:00 via iPhone
Lin0936
    97
Lin0936  
   2019-05-17 17:13:11 +08:00
@ODD10 请问一下全局请求添加‘/static ’那块是怎么配置的
ODD10
    98
ODD10  
   2019-05-17 17:14:25 +08:00
手机上字体图标加载不出来。开了 ss 也没用。
ODD10
    99
ODD10  
   2019-05-17 17:15:15 +08:00
@Lin0936 #97
nginx 鸭,文档里面写了鸭,复制就行鸭,傻瓜式的鸭
morethansean
    100
morethansean  
OP
   2019-05-17 17:17:08 +08:00
@ODD10 #98
iOS 上已知问题,iOS 还有一堆其他的 bug
1  2  
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5479 人在线   最高记录 6543   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 41ms · UTC 09:01 · PVG 17:01 · LAX 02:01 · JFK 05:01
Developed with CodeLauncher
♥ Do have faith in what you're doing.