21 / 11 / 18

使 PWA 更像 Native App 的 6 个技巧

你在开发 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 独立应用模式访问时，在 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"
    },
  ]
}
  1. 使用 router.replace 来处理路由导航。

避免在移动端左右边缘滑动时的页面跳转行为，只有当需要提供「返回」功能时，再显式设置。

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

Powered by Gridea