记录：从零到一做小说阅读器能遇到多少坑（三）

溯舟
408 阅读2分钟

前言

再来看看一些其他的小优化点，主要是针对PWA应用，沉浸式阅读做的优化

image.png

GitHub 链接

demo

优化点

沉浸式阅读，状态栏颜色： theme-color

通过 H5 页面修改系统栏颜色（即 iOS 状态栏颜色）通常通过 meta 标签设置，或者通过 JavaScript 动态设置。具体做法取决于你是希望通过普通 HTML 还是通过 JavaScript 来实现。

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

也可以搭配@unhead/vue插件的useHead方法来修改

useHead({
    meta: [
      {
        name: 'theme-color',
        content: 'red',
      },
    ],
  })

效果：

1734315941137.png

PWA应用隐藏搜索栏

在 PWA（渐进式 Web 应用） 中，默认情况下，Safari 浏览器的地址栏通常会在应用加载时显示。而如果你希望在用户打开 PWA 时隐藏浏览器地址栏（通常也叫搜索栏），让应用看起来更像原生应用，可以使用一些特定的设置和技巧来实现这一目标。

可以通过以下几种方式来实现：

方法一： 使用 display: standalone 或 display: fullscreen

示例：在 manifest.json 中设置 display 属性

{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",  // 或 "fullscreen"
  "background_color": "#ffffff",
  "theme_color": "#0044cc",
  "icons": [
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

也可以搭配VitePWA插件来设置

VitePWA 是一个用于与 Vite 集成的插件，帮助开发者快速地为应用添加 渐进式 Web 应用（PWA）功能。通过使用 VitePWA 插件，你可以轻松地将 PWA 特性添加到你的应用中，包括离线支持、缓存策略、Web App Manifest 文件、推送通知等。

import { defineConfig } from 'vite';
import VitePWA from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA({
      manifest: {
        name: 'My PWA App',
        display: 'standalone', // 或 "fullscreen"
        ...,
      },
      ...,
    }),
  ],
});
方法二：使用 apple-mobile-web-app-capable

apple-mobile-web-app-capable="yes" ：告诉 iOS 设备，该 Web 应用是一个独立应用，不会显示浏览器的工具栏和地址栏。（仅PWA应用生效，需要添加到主屏幕）

<head>
  <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 使页面作为Web App运行 -->
</head>

效果：

32b3365a132d45b91061b19bd3a3cd5.jpg

根据系统主题色，设置系统颜色

@vueuse/core 提供了一个非常方便的 useDark 组合式 API，用于检测和响应当前用户的 暗黑模式（Dark Mode）偏好。这个钩子可以自动根据系统的主题（暗黑模式或亮模式）进行响应，可以利用它来动态地改变应用的样式。

import { useDark } from '@vueuse/core'; 

// 获取当前是否为暗黑模式
const isDark = useDark();

// 切换系统颜色
toggleTheme(isDark.value)
avatar
文章
阅读
粉丝