小程序下线了,被迫做了个PWA应用
← 返回我的实践

小程序下线了,被迫做了个PWA应用

前两天我的小程序"被"下架了,一开始还挺生气,然后在我们的社群看到群里的同志提到:“我儿每天还要抽卡片,几个月了”,他每天都会给让孩子抽几张毛选语录,与孩子一起学习,让我很是感动。

于是,我在想有什么替代小程序的办法吗?

做成App太重了,做成网站,又怕移动端体验不好,于是,我想到了可以改造成 PWA应用

看到这里,你肯定也懵逼了,这是个啥?

其实之前我也和大家一样懵逼,只是听人说起过PWA这个词。简单来说,PWA 其实是一种特殊的网页,普通网页在浏览器打开时有地址栏和标签页,而做成 PWA 应用后,我们可以添加网站快捷方式到桌面,从桌面快捷方式打开后,就会和App商店下载的应用一样,直接全屏展示,没有地址栏,用起来很舒服,它本质上就是个网页,不需要额外安装,也不占多少空间。

左边的图,是我用浏览器打开,底部会有地址栏,右边是通过桌面快捷方式打开的 PWA 应用,它直接会全屏展示。

那怎么实现呢,更简单了,因为之前申请过域名,备过案,加上有小程序的代码,做好后就能直接部署。

我直接告诉 AI,让它复用小程序的代码,包括抽卡逻辑、卡片主题等,只是在分享海报上,我们将原来的小程序二维码换成应用的logo,最后再做下网站适配,AI 一顿操作,不到几个小时就搞完了。

但改完后我去测试,果不其然的出现了一堆问题,在 iOS 微信浏览器打开时,像左图的语录出处和语录会有重叠,右图是在安卓手机的浏览器打开,抽卡结果页的卡片和按钮,也重叠在了一起,在不同的手机和浏览器环境,有着各种各样的bug,都需要适配处理,在微信内置浏览器打开还有个坑,点击分享必须用微信支持的分享方式,改成长按分享,又折腾了半天,才最终改好。

之前一直听说PWA应用做demo很方便,这次亲身体验了一把,确实挺好的,以前许多有名的产品demo,都是用这个方式做MVP验证的,比如早期的flomo,没有出移动端,都是用这种方式给用户体验的。

到这里我也不藏着掖着,现在访问 wwmx.mowan.work/app 就可以继续使用"问问毛选"。

方法一:浏览器直接用

打开手机浏览器,输入网址,就能用。不用下载,不占内存。

方法二:添加到桌面(像 App 一样用)

添加后桌面会多一个图标,点开就是全屏,跟普通 App 一模一样。

苹果手机: Safari → 底部「分享」按钮 → 添加到主屏幕

安卓手机: Chrome → 右上角三个点 → 添加到主屏幕 / 安装应用

鸿蒙手机: 自带浏览器 → 菜单 → 添加到桌面

以上是常见浏览器的操作,不同品牌手机或浏览器步骤可能略有不同,但都是在浏览器菜单里找「添加到桌面」这个选项。

添加桌面遇到问题?

如果以上步骤都不无法添加,那我也没招了…辛苦把下面这段话发给 AI(DeepSeek、豆包、Kimi 都行),它会一步步教你:

“我想把一个 PWA 网页应用添加到手机桌面,我的手机是【你的手机型号】,用的浏览器是【你的浏览器名称】,请告诉我具体怎么操作。”

加到桌面后,这个最后的效果就是跟我图里这样子,和小程序没啥区别。

讲真的,有时候没事瞎了解些暂时用不上的"无用"知识,关键时刻能派上大用场…

我们不应该只拘泥于自己专业领域的东西,要多学多看,拿我自己来说,其实我不会写代码,是干产品经理出身的,结果在AI的帮助下,学会了写代码,做了点自己的小产品玩玩,用以前有个文艺点的词来说,也算是什么斜杠青年了哈哈。AI放大了我们的执行力,但想象力和解决问题的能力,依然是AI无法替代的。