使 PWA 更像 Native App 的 5 个技巧

1,272 阅读3分钟

你在开发 PWA 吗?此篇介绍几个通过 JavaScript 和 CSS 就可以使你的 PWA 更接近 Native 应用的小技巧。

1. 为 PWA standalone 模式设置空标题

网页的 Title 在浏览器访问场景下有着重要的作用,尤其是当打开了多个标签页时,可以根据 Title 来快速区分不同的网页。另外一点,聪明的网页开发者经常在 Title 中设置适当的信息以利好 SEO。

而 PWA 以 standalone 模式使用时,由于其拥有自己独立的窗口、独立的启动器图标等,此时 Title 便可能不那么重要了。所以为了使其更干净,更接近 Native App,可以单独为此模式访问时设置简洁的标题,甚至不设置标题,减少页面文字元素干扰。

const mqStandAlone = '(display-mode: standalone)'

// Check this page is running in pwa mode
if (navigator.standalone || window.matchMedia(mqStandAlone)) {
  document.title = ''
}

navigator.standalone 是检测网页是否以独立模式运行,其仅在 iOS Safari 浏览器上收到支持。 详情见:navigator.standalone MDN

2. 使用 display-mode 来设置 PWA 专属样式

例如这样设置一个圆角,使浏览器 Title 区域和网页导航部分更加融为一体。而浏览器模式时,则不需要此圆角,以避免圆角与浏览器边缘相遇时的消失凹陷。

<meta name="theme-color" content="#f5f5f5" />

<style>
nav {
  background-color: #f5f5f5;
}
main {
  backgrround-color: #fff;
}

@media all and (display-mode: standalone) {
  main {
    border-top-left-radius : 12px ;
  }
}
</style>

<body>
  <nav></nav>
  <main></main>
</body>

另外注意,我们这里使用 theme-color 来设置浏览器状态栏的背景色。

3. 设置取消滚动溢出,避免滚动到顶部时产生的间隙

按技巧 2 设置了之后,我们发现当滚动到网页顶部或底部边界时,浏览器默认的滚动溢出行为,会使我们网页中出现一条缝隙。我们可以使用下面这个设置来避免这一表现。

body {
  overscroll-behavior-y: none;
}

4. 设置鼠标指针为默认 default,禁止用户选择

这一技巧,在页面充斥大量的菜单和按钮,而非跳转性链接时,尤为有效。同时避免鼠标指针频繁地在默认和 point 状态来回跳动。

*, a, button {
  cursor: default;
  user-select: none;
}

有网友认为,此做法有些偏激,但只是使其更接近 Native 应用而已。现在网站越来越模糊了按钮和链接的界限。通常情况下,按钮会具有较强的 UI 特征标识,链接仅从静态视觉看上去相对按钮来说会偏弱。

所以我们进行这一设置之后,可以为需要跳转页面的链接,再单独设置 cursor: point 即可。

5. 为不同系统设置单独的应用图标

pwa-05.png

例如为 PWA 独立应用模式访问时,在 Mac 系统场景下,设置一个 BigSure 风格的图标,浏览器访问则使用通用风格图标。下面一段简单的介绍来实现这一点。

我们需要两个单独的 manifest.json 文件,一个是通用配置文件,另一个是专门用于 Mac 的文件。

首先,从 HTML 页面删除 manifest link 的 href 属性

<link rel="manifest" id="manifest" />

然后,使用 JavaScript 来检查是否是 Mac,然后根据结果来设置 href。

const setManifest = () => {
  const isMacOS = /Mac OS X/.test(navigator.userAgent)
  document.querySelector('#manifest').setAttribute('href', isMacOS ? '/manifest-mac.json' : '/manifest.json')
}

对应的文件:

// manifest.json
{
  "short_name": "YourProductName",
  "name": "YourProductName",
  "description": "Your information",
  "icons": [
    {
      "src": "/icon/android-icon-192*192.png",
      "sizes": "192*192",
      "type": "image/png"
    },
    {
      "src": "/icon/android-icon-512*512.png",
      "sizes": "512*512",
      "type": "image/png"
    }
  ]
}

// manifest-mac.json
{
  "short_name": "YourProductName",
  "name": "YourProductName",
  "description": "Your information",
  "icons": [
    {
      "src": "/icon/mac-icon.png",
      "sizes": "192*192",
      "type": "image/png"
    },
  ]
}

好了,以上就是我本次要分享的全部内容了,希望可以帮助你在进行 PWA 开发时,更好的处理一些细节。

本文首次发表于: 使 PWA 更像 Native App 的 5 个技巧 - 海岛心hey