本教程意在指导朋友安装小孙同学APP,不涉及如何配置网站PWA特性的教程。
如需配置网站PWA,请参考糖果屋教程 传送门


一、关于PWA

  PWA的全称是Progressive Web Apps,译为渐进式网络应用程序。装配了PWA以后,用户可以将网站作为Web APP安装到自己的设备上,以原生应用般的方式浏览博客,同时借助PWA的缓存机制,能够更快速的浏览。

二、实现效果

在电脑端安装小孙同学,以应用程序的方式打开本网站,浏览体验和在浏览器差不多,PWA似乎没起到啥卵用。

在平板端安装小孙同学,平板端浏览体验提升还是很明显的,值得吐槽的是安卓平板浏览器的适配问题,说一如果在平板端安装本站,浏览体验会得到很大的提升。

在手机端安装小孙同学,这应该是大多朋友的选择,在手机浏览器访问本站时,会因为浏览器的问题,导致浏览体验不佳,安装小孙同学app后,浏览体验有质的飞跃,下次访问时也不用再去浏览器中输入网址了。

三、安装教程

  值得一提的是,虽然网站的PWA特性可以封装成一个应用程序,但其核心仍需要浏览器的支持,大多数电脑浏览器都支持PWA,但很多国产手机浏览器并不支持,想要安装小孙同学您应该使用合适的浏览器,并且再安装完小孙同学后不得删除依赖的浏览器

  具体安装步骤如下。

如果您的手机是小米手机的话,用系统自带的小米浏览器打开本网站,稍等片刻网页即可提示您安装本网站。

用苹果手机的safari应该也可以(未测试)

图片演示

  部分手机浏览器不支持PWA,比如博主经常使用的夸克浏览器,国内支持的手机浏览器并不多,这里推荐使用edge浏览器。

1、手机应用商店下载edge浏览器

图片演示

2、设置浏览器的权限,允许浏览器添加桌面图标

小米手机的设置步骤为打开设置——>应用设置——>应用管理——>找到edge浏览器——>权限管理——>添加快捷方式权限设置为允许

图片演示

3、再浏览器中输入本站网址https://sunguoqi.com,稍等片刻(似乎需要等一分钟左右的亚子),网页会提示您安装小孙同学,大功告成!

图片演示

4、因不可抗拒因素,我也不知道是为什么,可能是因为浏览器加载的问题吧,有时等了好长时间网页也不会提示安装小孙同学,这时候选择浏览器中间的三个点,找到添加到主屏幕的功能,点击安装即可!

图片演示

同手机端安装方法。

电脑端点击浏览器地址栏右侧的安装按钮即可。

四、写在后面

  如无必须,勿增实体。可能没几个人会选择安装这个应用吧,小孙同学在线卑微,此文章纯属自娱自乐。如有问题,请在评论区留言。