本站支持PWA啦！ - 霂森西 | 櫻玲桉
source link: https://musenxi.com/archives/allow-pwa.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
本站已支持 PWA，这就意味着大家可以把本站添加到电脑上或是手机上访问。
本文主要是讲如何将 PWA 网站添加到电脑或是手机上。
前言：展开目录
使用 PWA 的好处：
支持离线打开，离线加载网页内容。不过加载的内容是你使用 PWA 时缓存的内容。
举个栗子
，你在有网络连接的时候打开了本站的 PWA 加载了首页，然后在断网的时候打开 PWA，虽然 PWA 可以正常打开，但只有你之前访问过的页面可以加载。
接下来就是具体如何操作啦～
Windows 系统展开目录
在 Edge 浏览器上展开目录
Win10 原生自带新版 Edge，Win7 可以自行到官网下载新版 Edge。
打开 Edge，进入我的网站
当网站加载完后就会出现图中所示的图标
点击那个图标就会弹出一个窗口
点击安装即可。
在 Chrome 浏览器上展开目录
进入我的网站，加载完后也会出现上述 Edge 的图标，与 Edge 浏览器操作同理，点击图标再点击安装。
一般再 Chrome 浏览器安装完后会在桌面上建立一个快捷方式，点击快捷方式即可使用 PWA 访问我的小站啦。
而在 Edge 浏览器上安装完后不会在桌面建立快捷方式，可以按下 “Win” 键找到链接点击即可。
macOS展开目录
可以参考这篇文章用新版的 Chrome 把 PWA 网站添加到桌面，获得媲美原生应用的体验
Android展开目录
在 Chrome 或 Edge 浏览器中打开本站，在浏览器界面找到分享的按钮（或是页面直接弹出将“櫻玲桉的小窝”添加到主屏幕点击即可，无需后续操作），找到添加到主屏幕点击这个按钮。回到手机桌面上找到 “櫻玲桉的小窝” 或是 “霂森西 | 櫻玲桉” 点进这个图标即可通过 PWA 访问本站。
IOS展开目录
在 Safari 浏览器里打开本站，加载完成后点击屏幕下方中间的分享图标，在第二行（靠近手机底部的那行）找到添加到主屏幕，点击按钮（可以修改图标显示的名字），回到主屏幕找到 “櫻玲桉的小窝” 或是你所自定义的名字，点击这个图标即可在 IOS 上通过 PWA 访问本站。
在其他浏览器展开目录
在其他浏览器操作也是同理，都是通过 “添加到主屏幕” 来实现的。
如果你添加到主屏幕后点击图标发现是跳转到浏览器打开那么说明这个浏览器不支持 PWA（如果是在其他网站的话，可能是这个网站不支持 PWA）
本站 PWA 已知问题展开目录
在 IOS 上的图标是在添加到主屏幕时系统自动截取网站页面的图片而非本人设置的图标，其他平台显示的图标都正常。
其他 PWA 应用展开目录
可以看这些文章少数派 - PWA
使用 PWA 浏览网站无论是在电脑端还是手机端都是挺舒服的呢
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK