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

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

  morethansean · 2019-05-17 09:26:36 +08:00 · 18948 次点击
这是一个创建于 1778 天前的主题,其中的信息可能已经有所发展或是发生改变。
事情的起因是这样的,在 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  
ODD10
    101
ODD10  
   2019-05-17 17:17:24 +08:00
Member 页面见上图,也是不对的,undfined???
ODD10
    102
ODD10  
   2019-05-17 17:22:43 +08:00
@morethansean #100

老哥,我配置了泛域名,新增的 server 配置的域名 v2er.xxxx.top 访问 get-v2ex,还是走第一个 server,怎么处理?
前端小白,只懂一点 nginx,求教,谢谢。

upstream wx {
# ip_hash;
# server 127.0.0.1:3006;
server 127.0.0.1:8080;
}


server {
listen 80;
server_name *.xxxx.top xxxx.top;

# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";

location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Nginx-Proxy true;
# try_files $uri $uri/ /index.html;
proxy_pass http://wx;
proxy_redirect off;
}

listen 443 ssl;
ssl_certificate /home/ubuntu/ssl/fullchain.cer;
ssl_certificate_key /home/ubuntu/ssl/xxxx.top.key;
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

}

server {
listen 80;
server_name v2er.xxxx.top;

index static/index.html;

# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";

# configure serverAddress in your config.js as 'https://[your_domain.com]/api'
location ~ ^/api/(.*) {
rewrite ^/api/(.*) /$1 break;
proxy_pass http://127.0.0.1:3003;
}
# treat other requests as static resources
location ~ ^/(.*) {
rewrite ^/(.*) /static/$1 break;
proxy_pass http://127.0.0.1:3003;
}
}
Lin0936
    103
Lin0936  
   2019-05-17 17:26:04 +08:00
@ODD10 😂我部署在 Firebase Hosting 上了,Nginx 没找到,是用 rewrite 吗?
@morethansean
ODD10
    104
ODD10  
   2019-05-17 17:27:42 +08:00
@Lin0936 #103
我是自己的 VPS 呃
Firebase Hosting 我第一次接触,不清楚
morethansean
    105
morethansean  
OP
   2019-05-17 18:54:53 +08:00
@Ixizi 但是感觉功能还是差很多啊……
moxiaonai
    106
moxiaonai  
   2019-05-17 18:57:13 +08:00 via Android
不懂 ui 的 pm 不是好 rd
kangzai50136
    107
kangzai50136  
   2019-05-17 19:03:25 +08:00 via Android
难道你就是传说中的实习两年半的……
Mexion
    108
Mexion  
   2019-05-17 19:03:53 +08:00 via Android
很好看 支持了
storypanda
    109
storypanda  
   2019-05-17 19:10:36 +08:00 via Android
楼主加个微信吧,我想找人创业
shenmegui
    110
shenmegui  
   2019-05-17 22:23:55 +08:00
带服务器的 PWA。。。大佬牛逼大佬 666 大佬带我飞。我只能这样咸鱼三连了。
K0ala
    111
K0ala  
   2019-05-17 23:12:49 +08:00 via Android
会 UI 的程序员真可怕
ODD10
    112
ODD10  
   2019-05-17 23:20:44 +08:00
@ODD10 #104
下午回复太频繁,不能回复;
现在补上,直接把 443 的配置复制一份给 v2er.xxxx.top 的 server 就行了。
0x3f3f
    113
0x3f3f  
   2019-05-17 23:27:22 +08:00 via iPhone
为什么你们都看得到图(
wolfan
    114
wolfan  
   2019-05-17 23:33:48 +08:00
PWA 是好,但是 Oppo\vivo 的 ColorOS 上却无法使用……
morethansean
    115
morethansean  
OP
   2019-05-17 23:58:41 +08:00
@0x3f3f #113
你应该反思一下为什么你看不到
0x3f3f
    116
0x3f3f  
   2019-05-18 00:56:08 +08:00 via iPhone
@morethansean 依然看不到呀,现在微博图床大部分 403 了吧
0x3f3f
    117
0x3f3f  
   2019-05-18 00:59:16 +08:00
@morethansean 我现在用电脑就看到了……我反思
ChenXuting
    118
ChenXuting  
   2019-05-18 01:28:00 +08:00 via iPhone
@geew 你找过的,现在作者出来啦。
Trumeet
    119
Trumeet  
   2019-05-18 07:05:38 +08:00 via Android
Adobe XD 👍
hanbing135
    120
hanbing135  
   2019-05-18 11:23:27 +08:00 via Android
能给个直接可以用的吗
chenhonzhou
    121
chenhonzhou  
   2019-05-18 15:48:46 +08:00
求 sketch 设计图 ZDF5
chenhonzhou
    122
chenhonzhou  
   2019-05-18 15:48:57 +08:00
太漂亮了吧
Love4Taylor
    123
Love4Taylor  
   2019-05-18 17:23:52 +08:00
PWA 内新浪图片是裂的
morethansean
    124
morethansean  
OP
   2019-05-18 17:35:07 +08:00
@Love4Taylor 估计是 http 的图,service worker 在 fetch 的时候直接被安全策略给 reject 了,我处理一下……正常的 https 图是没问题的,设置了 referrer 策略的,发请求时不会带 referrer.
Love4Taylor
    125
Love4Taylor  
   2019-05-18 17:50:59 +08:00
@morethansean #124 看了下, 确实是 http 的.
geew
    126
geew  
   2019-05-20 09:53:29 +08:00
@ChenXuting #117 哈哈 撇了一下 太麻烦了...
Mecon
    127
Mecon  
   2019-05-21 10:59:36 +08:00
只画低保真的给原型跪了
tomari
    128
tomari  
   2020-12-12 01:32:37 +08:00 via iPhone
图全挂了🥲
morethansean
    129
morethansean  
OP
   2020-12-12 08:34:50 +08:00 via Android
@tomari 估计是太久了新浪的图床挂了 😂 点进 git 就有截图
1  2  
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2689 人在线   最高记录 6543   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 44ms · UTC 15:30 · PVG 23:30 · LAX 08:30 · JFK 11:30
Developed with CodeLauncher
♥ Do have faith in what you're doing.