MENU

本站支持PWA啦!

• 2020 年 08 月 04 日 • 阅读: 2983 • 日常,杂铺

本站已支持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浏览网站无论是在电脑端还是手机端都是挺舒服的呢

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

已有 20 条评论
  1. 按照博文中的教程部署后F12出现
    Error while trying to use the following icon from the Manifest: https://www.3328bk.cn/ico/favicon.ico (Resource size is not correct - typo in the Manifest?)
    该如何解决

    1. @Meteor发错站了::quyin:hematemesis::

    2. @Meteor啊这 没啥事 有问题也可以问我

  2. 好神奇诶,博主出教程嘛::quyin:1huaji::

    1. @Meteor看情况吧,最近学业繁重,可能没什么时间::quyin:hematemesis:: 有一定基础的话可以看看这篇文章http://lzw.me/a/pwa-service-worker.html 或者看看我好朋友写的教程https://iucky.cn/posts/play/typecho-add-pwa 这篇比较简单吧::quyin:1huaji::

    2. @霂森西好滴::quyin:1huaji::

  3. a a

    爱得发疯

  4. ::quyin:look::
    我的也弄了PWA,但是小姐姐的在华为手机上安装完成后是一个快应用,打开像一个原生的APP,而我的好难看,想求一下配置文件#(脸红)#(害羞)

    1. @Senorui我的配置文件是这个https://dlizi.com/service-worker.js
      或许这篇文章会对你有帮助http://lzw.me/a/pwa-service-worker.html

    2. @櫻玲桉::quyin:maimeng::好的,感谢感谢!
      额为啥我没收到邮件啊。

  5. win7怎么破???

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

0:00

    “我们的征途是星辰大海”