【PWA】关于PWA的实操以及使用经验总结

关于标题的说明:

实操: 实际操作
PWA : Progressive Web App
复制代码

什么是PWA

PWA 是渐进式 Web 应用, 类似于原生 App 的体验。

当我们在手机浏览器上打开网页时,然后通过浏览器的 “更多” 功能,选择添加到主屏幕。 这个时候,我们的手机桌面上会生成一个当前网页的 “快捷入口”。

如果你的网站没有加 PWA 的话,那么,手机桌面上生成的只是网页的一个“快捷方式”,从桌面上点击进入,依然是用浏览器打开。 如果你的网站加上了 PWA 的话,那么,你可以自定义手机桌面上生成的这个图标,并且,从这个桌面图标点击进入的话,是一个 PWA

来一个鲜明的对比:

PWA 的这种渐进式 Web 应用 给人的感觉和体验还真不错,有一种 App 的感觉。

大家可以在手机上打开这个网站体验一下: web-bookmarks

提供一个二维码快捷访问方式:

如何给项目加上PWA

给网站加上 PWA 是简单的:

  • 在网站的根目录下( / ),添加一个 Web应用程序清单文件( manifest.json )。
  • index.html 中加上 <link rel="manifest" href="/manifest.json">

Web应用程序清单在一个JSON文本文件中提供有关应用程序的信息(如名称,作者,图标和描述)。 manifest 的目的是将Web应用程序安装到设备的主屏幕,为用户提供更快的访问和更丰富的体验。

关于 manifest.json 文件里面有哪些可配置的字段,以及字段的说明,推荐阅读官方文档: developer.mozilla.org/zh-CN/docs/…

-----------华丽的分割线-------------

我想给你的建议和参考:

1、为了让你的网站完全地兼容 PWA,强烈建议你在 index.html 中加上除了 <link rel="manifest" href="/manifest.json"> 以外更完善的 head 信息:(参考这样)

<link rel="icon" href="/web-bookmarks/favicon.ico">
<link rel="manifest" href="/web-bookmarks/manifest.json">
<meta name="theme-color" content="#3eaf7c">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="/web-bookmarks/icons/apple-touch-icon-152x152.png">
<link rel="mask-icon" href="/web-bookmarks/icons/safari-pinned-tab.svg" color="#3eaf7c">
<meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
<meta name="msapplication-TileColor" content="#000000">
复制代码

可以参考这里=> github.com/Neveryu/web…

2、我的 manifest.json 的配置,可以参考这里=> github.com/Neveryu/web…

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章