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

[morethansean]

事情的起因是这样的，在 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 里。谢谢大家啦~

修复了一些样式上的问题。
在 bv2ex 的 Releases tab 下下载最新的 zip 包解压到 get-v2ex 文件夹下，然后 cd 进 public 目录运行一次 npm run build 即可。

get-v2ex 的升级需要 git pull 并重新启动服务器。

[uTOmOuk3L6sb4MSI]

Member 页面见上图，也是不对的，undfined???

[uTOmOuk3L6sb4MSI]

@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]

@ODD10 😂我部署在 Firebase Hosting 上了，Nginx 没找到，是用 rewrite 吗？
@morethansean

[uTOmOuk3L6sb4MSI]

@Lin0936 #103
我是自己的 VPS 呃
Firebase Hosting 我第一次接触，不清楚

[morethansean]

@Ixizi 但是感觉功能还是差很多啊……

[moxiaonai]

不懂 ui 的 pm 不是好 rd

[kangzai50136]

难道你就是传说中的实习两年半的……

[Mexion]

很好看 支持了

[storypanda]

楼主加个微信吧，我想找人创业

[shenmegui]

带服务器的 PWA。。。大佬牛逼大佬 666 大佬带我飞。我只能这样咸鱼三连了。

[K0ala]

会 UI 的程序员真可怕

[uTOmOuk3L6sb4MSI]

@ODD10 #104
下午回复太频繁，不能回复；
现在补上，直接把 443 的配置复制一份给 v2er.xxxx.top 的 server 就行了。

[0x3f3f]

为什么你们都看得到图（

[wolfan]

PWA 是好，但是 Oppo\vivo 的 ColorOS 上却无法使用……

[morethansean]

@0x3f3f #113
你应该反思一下为什么你看不到

[0x3f3f]

@morethansean 依然看不到呀，现在微博图床大部分 403 了吧

[0x3f3f]

@morethansean 我现在用电脑就看到了……我反思

[ChenXuting]

@geew 你找过的，现在作者出来啦。

[Trumeet]

Adobe XD 👍

[hanbing135]

能给个直接可以用的吗

[chenhonzhou]

求 sketch 设计图 ZDF5

[chenhonzhou]

太漂亮了吧

[Love4Taylor]

PWA 内新浪图片是裂的

[morethansean]

@Love4Taylor 估计是 http 的图，service worker 在 fetch 的时候直接被安全策略给 reject 了，我处理一下……正常的 https 图是没问题的，设置了 referrer 策略的，发请求时不会带 referrer.

[Love4Taylor]

@morethansean #124 看了下, 确实是 http 的.

[geew]

@ChenXuting #117 哈哈 撇了一下 太麻烦了...

[Mecon]

只画低保真的给原型跪了

[tomari]

图全挂了🥲

[morethansean]

@tomari 估计是太久了新浪的图床挂了 😂 点进 git 就有截图