MENU

本站支持PWA啦!

• 2020 年 08 月 04 日 • 阅读: 12981 • 随记,杂铺

本站已支持PWA,这就意味着大家可以把本站添加到电脑上或是手机上访问。
本文主要是讲如何将PWA网站添加到电脑或是手机上。


前言:

使用PWA的好处:
支持离线打开,离线加载网页内容。不过加载的内容是你使用PWA时缓存的内容。

举个栗子::quyin:maimeng::,你在有网络连接的时候打开了本站的PWA加载了首页,然后在断网的时候打开PWA,虽然PWA可以正常打开,但只有你之前访问过的页面可以加载。


接下来就是具体如何操作啦~::quyin:1huaji::

Windows系统

在Edge浏览器上

Win10原生自带新版Edge,Win7可以自行到官网下载新版Edge
打开Edge,进入我的网站20200823-151743-001.png
当网站加载完后就会出现图中所示的图标
点击那个图标就会弹出一个窗口28bd81bc7f651fb6147032c5d0c3468.png
点击安装即可。

在Chrome浏览器上

进入我的网站,加载完后也会出现上述Edge的图标,与Edge浏览器操作同理,点击图标再点击安装。

一般再Chrome浏览器安装完后会在桌面上建立一个快捷方式,点击快捷方式即可使用PWA访问我的小站啦。
而在Edge浏览器上安装完后不会在桌面建立快捷方式,可以按下“Win”键找到链接点击即可。
b096221640e8a715145ca08a976567a.png

macOS

可以参考这篇文章用新版的 Chrome 把 PWA 网站添加到桌面,获得媲美原生应用的体验

Android

在Chrome或Edge浏览器中打开本站,在浏览器界面找到分享的按钮(或是页面直接弹出将“櫻玲桉的小窝”添加到主屏幕点击即可,无需后续操作),找到添加到主屏幕点击这个按钮。回到手机桌面上找到“櫻玲桉的小窝”或是“霂森西 | 櫻玲桉” 点进这个图标即可通过PWA访问本站。

IOS

在Safari浏览器里打开本站,加载完成后点击屏幕下方中间的分享图标,在第二行(靠近手机底部的那行)找到添加到主屏幕,点击按钮(可以修改图标显示的名字),回到主屏幕找到“櫻玲桉的小窝”或是你所自定义的名字,点击这个图标即可在IOS上通过PWA访问本站。

在其他浏览器

在其他浏览器操作也是同理,都是通过“添加到主屏幕”来实现的。
如果你添加到主屏幕后点击图标发现是跳转到浏览器打开那么说明这个浏览器不支持PWA(如果是在其他网站的话,可能是这个网站不支持PWA)

本站PWA已知问题

在IOS上的图标是在添加到主屏幕时系统自动截取网站页面的图片而非本人设置的图标,其他平台显示的图标都正常。

其他PWA应用

可以看这些文章少数派-PWA


使用PWA浏览网站无论是在电脑端还是手机端都是挺舒服的呢

返回文章列表 文章二维码 打赏
本页链接的二维码
打赏二维码
添加新评论

已有 21 条评论
  1. win7怎么破???

    1. @keepsilent使用Google Chrome或者看看这个https://www.microsoft.com/zh-cn/edge

  2. 一直听人讲pwa,今天才知道是这个意思::quyin:watermaleon::

    1. @于长野::quyin:look::

  3. 方便是方便。
    但我更喜欢rss,聚合在一起,更方便。

    1. @Zhou216rss 和 pwa的方向是不一样的嘛
      要说是纯阅读那还是rss好

  4.      ∧_∧ 
      , ' ( ´∀`) ,'
     . '`  ( ⊃ ⊂)
    AdGuard插件的隐身模式把你相册的图片都拦截了::quyin:watermaleon::

    1. @Senorui啊?! 真的吗 我下次看看::quyin:amazing::

  5. cool::quyin:OK::

    1. @哈士奇社区::quyin:1huaji::

0:00

    "日々私たちが过ごしている日常というのは、実は奇迹の连続なのかもしれん"