全屏显示您的 PWA/网站

独立模式

元标签

安全区域

在这篇短文中，我将向您展示如何将已安装的 PWA 扩展到移动设备屏幕的整个边缘，以及如何处理可能出现的设计问题。

独立模式

一旦用户将您的 PWA 添加到主屏幕并打开它，它就会以独立模式运行，例如浏览器的导航栏将消失，我们可以制作更多类似应用程序的设计。

我们可以像这样检测 PWA 是否在我们的应用程序内以独立模式运行：



// on iOS Safari
window.navigator.standalone

// on Android Chrome
window.matchMedia(
  '(display-mode: standalone)'
).matches

由于平台差异，一种更流行的方法是在文件start_url内部定义一个参数manifest.json，我们可以在其中添加一个参数，该参数将在应用以独立模式启动时添加。然后，我们可以在应用程序内部检查该参数，以更改 UI。

要全屏显示并移除原生控制元素，我们还必须添加display带有值的属性standalone（fullscreen不起作用）。这是我们当前的清单：



// manifest.json
{
  "name": "Example App",
  "display": "standalone",
  "start_url": "/?standalone=true"
}

元标签

为了全屏显示您的应用程序，我们还必须添加一些元标记。

您可能已经有viewport元标记，但请确保viewport-fit=cover在它里面（用分隔;）：



<meta name="viewport"
    content="width=device-width; initial-scale=1; viewport-fit=cover">

然后我们必须添加mobile-web-app-capable和status-bar-style元标签：



<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- possible content values: default, black or black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style"
    content="black-translucent">

请注意，我们可以决定状态栏的背景是白色（默认）、黑色还是透明（白色）。需要注意的是，此元标记仅在应用启动时使用，因此它是应用范围的，我们无法在之后修改元标记来动态更改颜色。

由于我们还希望能够在状态栏下方显示内容，因此我们将使用透明背景（black-translucent）。这也会将我们的应用移至屏幕顶部。

现在我们可以制作如下所示的精美标题：

安全区域

由于我们现在可以在状态栏下方显示内容，因此我们必须确保白色文本始终清晰易读（例如，使用装饰性阴影或确保深色背景色），并且下方不会有任何交互元素。此外，我们可能还需要考虑一些较新 iOS 版本中存在的刘海问题：

为了解决这些问题，我们可以利用safe-areaCSS 环境变量（自 iOS >= 11.1 和 Chrome >= 69 起支持）：



.element {
    height: env(safe-area-inset-top);
    width: env(safe-area-inset-left);
    margin: env(safe-area-inset-right);
    // you can also use fallback values
    padding: env(safe-area-inset-bottom, 20px);
}

举个例子，我为我的应用实现了一个粘性导航栏 Vue 组件，它包含一个元素，该元素的高度设置为顶部安全区域。只要该transparent属性有效true且用户没有向下滚动，它就会保持透明。以下是该组件的关键部分：



<!-- NavigationBar.vue -->
<div class="sticky top-0">
    <div
        class="h-safe-area-inset-top"
        :class="{
            'bg-black': !transparent
                        || (transparent && scrollTop > 0)
        }"
    ></div>
    ...
</div>

<style>
.h-safe-area-inset-top { height: env(safe-area-inset-top); }
.bg-black { background-color: #444; }
</style>

<script>
export default {
  data() {
    return {
      scrollTop: 0
    }
  },
  props: {
    transparent: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    scrollListener(e) {
      this.scrollTop = e.target.scrollTop;
    }
  },
  mounted() {
    window.addEventListener('scroll', this.scrollListener);
  }
}
</script>

如果你有任何问题，请随时留言。祝你编程和设计愉快！👨🏼‍💻

文章来源：https://dev.to/oncode/display-your-pwa-website-fullscreen-4776