现在越来越多浏览器强制要求HTTPS了,于是本站的new前缀开头的域名全部启用HTTPS,news前缀的依旧使用HTTP协议。
同时启用HTTPS协议后,随便把网站的PWA功能开启了。PWA 是一种现代网页技术,允许用户将网站像原生应用一样添加到设备主屏幕,并在离线或网络不佳时继续使用。
PWA 的主要特点:
添加到主屏幕:用户可以通过浏览器将网站保存为应用图标,方便快速访问。
离线访问:在离线或弱网环境下运行,可以直接读取缓存的网页。
响应式设计:自动适配不同设备屏幕。
安全性:通过 HTTPS 传输,确保数据安全。
安装 PWA 的步骤:
以下是针对不同浏览器和操作系统的详细安装方法:
0. 在 iOS Safari 浏览器上安装 PWA
打开 Safari 浏览器:
使用 iOS 设备上的 Safari 浏览器访问线报酷网站。
点击分享按钮:
在 Safari 浏览器底部工具栏中,点击 分享按钮(一个方框加一个向上的箭头)。
选择“添加到主屏幕”:
在分享菜单中,找到并点击 “添加到主屏幕” 选项。
编辑应用名称:
在弹出的对话框中,可以编辑 PWA 的名称(默认是网站的标题)。
点击 “添加” 完成安装。
从主屏幕启动 PWA:
安装完成后,PWA 的图标会出现在主屏幕上。
点击图标即可启动 PWA,它会以独立应用的形式运行(没有浏览器地址栏和工具栏)。
1. 在 Chrome 浏览器上安装 PWA
步骤:
打开支持 PWA 的网站:
使用 Chrome 浏览器访问一个支持 PWA 的网站(例如 Twitter、Pinterest 等)。
检查 PWA 安装提示:
如果网站支持 PWA,Chrome 会在地址栏右侧显示一个 安装图标(通常是一个小加号或下载图标)。
点击该图标,会弹出安装提示。
点击“安装”:
在弹出的提示框中,点击 “安装” 按钮。
启动 PWA:
Windows:开始菜单和任务栏。
macOS:应用程序文件夹和 Dock。
Linux:应用程序菜单。
安装完成后,PWA 会作为一个独立应用启动
2. 在 Edge 浏览器(Windows/macOS)上安装 PWA
步骤:
打开支持 PWA 的网站:
使用 Edge 浏览器访问一个支持 PWA 的网站。
检查 PWA 安装提示:
如果网站支持 PWA,Edge 会在地址栏右侧显示一个 安装图标(通常是一个小加号或应用图标)。
点击该图标,会弹出安装提示。
点击“安装”:
在弹出的提示框中,点击 “安装” 按钮。
启动 PWA:
Windows:开始菜单和任务栏。
macOS:应用程序文件夹和 Dock。
安装完成后,PWA 会作为一个独立应用启动
3. 在 Firefox 浏览器(Windows/macOS/Linux)上安装 PWA
Firefox 对 PWA 的支持较弱,但可以通过以下方式实现类似功能:
步骤:
打开支持 PWA 的网站:
使用 Firefox 浏览器访问一个支持 PWA 的网站。
手动创建快捷方式:
点击 Firefox 菜单(右上角的三条横线),选择 “更多工具” > “将页面另存为”。
将页面保存为快捷方式到桌面或应用程序文件夹。
启动 PWA:
双击快捷方式,以独立窗口打开 PWA。
4. 在 Safari 浏览器(macOS)上安装 PWA
Safari 对 PWA 的支持有限,但可以通过以下方式实现类似功能:
步骤:
打开支持 PWA 的网站:
使用 Safari 浏览器访问一个支持 PWA 的网站。
点击分享按钮:
在 Safari 工具栏中,点击 分享按钮(一个方框加一个向上的箭头)。
选择“添加到 Dock”:
在分享菜单中,选择 “添加到 Dock”。
启动 PWA:
安装完成后,PWA 的图标会出现在 Dock 中,点击即可启动。
5. 在 Linux 上安装 PWA
Linux 上的 Chrome 和 Edge 浏览器支持 PWA 安装,方法与 Windows/macOS 类似。
步骤:
打开支持 PWA 的网站:
使用 Chrome 或 Edge 浏览器访问一个支持 PWA 的网站。
检查 PWA 安装提示:
点击地址栏右侧的安装图标。
点击“安装”:
在弹出的提示框中,点击 “安装” 按钮。
启动 PWA:
安装完成后,PWA 会作为一个独立应用启动,并出现在应用程序菜单中。
PWA 安装后的表现
独立窗口:PWA 会以独立窗口运行,没有浏览器的地址栏和工具栏。
任务栏/Dock 图标:PWA 会出现在任务栏(Windows)或 Dock(macOS)中,方便快速启动。
离线访问:如果 PWA 支持离线功能,用户可以在没有网络的情况下继续使用。
总结
在电脑上安装 PWA 的步骤非常简单,主要取决于你使用的浏览器:
Chrome 和 Edge:直接通过地址栏的安装图标安装。
Firefox:手动创建快捷方式。
Safari:通过分享菜单添加到 Dock。
交流列表