惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Recent Announcements
Recent Announcements
人人都是产品经理
人人都是产品经理
月光博客
月光博客
博客园 - 三生石上(FineUI控件)
GbyAI
GbyAI
博客园 - 司徒正美
美团技术团队
Vercel News
Vercel News
IT之家
IT之家
U
Unit 42
Y
Y Combinator Blog
罗磊的独立博客
Microsoft Security Blog
Microsoft Security Blog
MongoDB | Blog
MongoDB | Blog
Jina AI
Jina AI
V
Visual Studio Blog
B
Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
MyScale Blog
MyScale Blog
博客园 - 叶小钗
A
About on SuperTechFans
WordPress大学
WordPress大学
Hugging Face - Blog
Hugging Face - Blog
B
Blog RSS Feed

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
用新版的 Chrome 把 PWA 网站添加到桌面,获得媲美原生应用的...
2018-03-03 · via 少数派

引用自 Harttle.Land 的说法:

PWA(Progressive Web Apps)是 Google 最近在提的一种 Web App 形态 (或者如 Wikipedia 所称的「软件开发方法」)。 Harttle 能找到的关于 PWA 最早的一篇文章是 2015年6月 Alex Russell 的一篇博客: Progressive apps escaping tabs without losing our soul, 让 Web App 从标签页跳出来,同时保持 Web 的灵魂。

如 Alex 所述,PWA 意图让 Web 在保留其本质(开放平台、易于访问、可索引)的同时, 在离线、交互、通知等方面达到类似 App 的用户体验。按 Google 官方的解释 PWA 具有这些特性:Reliable, Fast, Engaging。

它比原生应用更轻量,但是却比现有的 Web APP 的功能更加丰富。最大也是最关键的区别是它能够脱离浏览器的「束缚」(虽然依然是基于浏览器的技术),能够把 PWA 网站添加到你的桌面上,不管是 PC 操作系统还是手机操作系统,类似于一个原生应用一样,并且拥有媲美原生应用的体验。

它也能拥有原生 APP 应用一般的启动闪屏,它也能像原生 APP 应用一般能有消息推送——不过要知道,它源自 Web,通常只有传统 APP 的体积的十分之一甚至更小。它不用等待下载安装的时间,打开网页的时候就已经「下载」并且「安装」完毕。

要想体验这项技术,如果你是安卓用户,那最新版的 Chrome 已经支持;如果你是 iOS 用户,可以等待 3 月份的 11.3 版本更新;如果你是 PC 电脑用户,那么来看看怎么在电脑上也体验体验 PWA 吧。

配置Chrome

首先更新你的 Chrome 版本到 64 或以上。

然后在地址栏输入 chrome://flags,找到 Desktop PWAs 的选项将其 Enabled 了,然后 Chrome 会提示你重启浏览器。

重启浏览器后,PWA 添加到桌面的特性就已经具备了。

将 PWA 网站添加到桌面

我这里使用的是我的 博客(基于自己写的 hexo-theme-melody 主题搭建的)。打开网站,然后在浏览器右侧找到设置的按钮。接下去我针对 Windows 平台和 macOS 平台做分开讲解。

Windows平台

Windows 平台找到 添加到桌面 这个按钮,点击,然后会出现一个确认框:

点击添加。然后你就可以在桌面上看到相应的图标:

双击打开:

你会发现打开了一个没有浏览器痕迹的网页,或者说是个应用——这就是 PWA 了。PWA 支持离线启动技术,即使在没网的情况下也能启动应用。不过在需要网络条件下才能发送的请求依然需要网络环境。

macOS 平台

相对于 Windows 平台比较简单的操作,macOS 平台的操作相对有点绕弯,不过也大致相同。macOS 的Chrome 无法一次性就把 PWA 应用添加到桌面。需要先把 PWA 网站生成一个 app 应用,然后你再手动把这个app 应用以快捷方式复制到桌面。

接下来是具体步骤:

打开一个 PWA 网站,此处依然以我的 博客 作为例子,然后再右侧找到配置菜单,下拉选中 添加到「应用」文件夹。然后等待几秒钟,会出现一个对话框:

此时这个 PWA 应用已经生成完毕了。我们点击添加。之后你就可以在你的应用列表看到它了:

不过如果你要在你的桌面上添加这个应用的话,还需要找到这个 app 的位置,一般是在 /Users/你的用户名/Applications/Chrome\ Apps.localized/ 这个文件夹下。用 Finder 打开:

然后选中这个应用,按住 alt+command 键把它拖拽到桌面上,就会生成一个快捷方式啦。这个方法也同样适用于其他应用。

注意事项

如果是非 PWA 应用,也会有 添加到桌面 或者 添加到应用文件夹 的选项。不过当你双击打开它们的时候依然会调用 Chrome 浏览器去打开,跟以前的书签的作用无差别。

不过,依然可以通过一个小操作来实现。感谢@RiiSan指出我原文的错误。

前置步骤跟之前说的一样,然后打开 chrome://apps 找到你制作的应用,然后右键,选择在窗口中打开。那么就能获得跟PWA应用单独窗口的类似体验。不过它是不具备PWA离线打开的能力哦,只是纯粹的一个网页通过独立窗口打开而已。

目前 Desktop PWAs 还是实验性的功能,所以有可能出现不稳定的情况,依照自己的情况作出决定~

结尾

就目前来说,我能想到的比较理想的使用条件是,在一些功能性网站支持 PWA 的情况下,是不用再去下它们的桌面客户端了,直接通过 PWA 添加到桌面,就能像使用原生应用一样使用它们啦。比如推特,比如 Medium 等。

下面给出一个别人总结的 PWA 网站列表,可以去体验一波。