关于本站

这是袁炜海的博客站，在这纷杂的互联网上给自己开垦的一块自留地。

这边可以自由的书写内容，也可以自由的排版，对站点进行个性化定制。

本站采用 vitepress 构建，设计简单但功能强大。无论从主题风格，还是开发体验都非常符合我的审美。

PWA 体验

如下简单配置之后，本网站就能够以 APP 的形式添加到桌面。

配置文件

manifest.webmanifestconfig.ts

json

{
    "name": "甜甜的泥土",
    "short_name": "甜甜的泥土",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#1b1b1f",
    "lang": "en",
    "scope": "/",
    "description": "袁炜海的博客",
    "theme_color": "#1b1b1f",
    "icons": [
        { "src": "pwa-64x64.png", "sizes": "64x64", "type": "image/png" },
        { "src": "pwa-192x192.png", "sizes": "192x192", "type": "image/png" },
        { "src": "pwa-512x512.png", "sizes": "512x512", "type": "image/png" },
        {
            "src": "maskable-icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable"
        }
    ]
}

['link', { rel: 'manifest', href: '/manifest.webmanifest' }],
['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon-180x180.png' }],

如果你想体验 PWA ，那么简单操作几步即可：

1、打开手机浏览器（苹果: safair | 安卓: chrome）在网址输入框输入 www.90s.co

2、点击浏览器的分享按钮，在弹出的选项中点击 添加到主屏幕

3、就会在你的主屏幕上添加一个图 3 中显示的 APP 图标

点击该 APP 图标，就能以应用的方式打开本网站，它将比在浏览器中提供更好的体验

PWA 的 hack

为了让 PWA 模式更接近原生 APP 的体验，我将网页的滚动条去掉了。为了去掉这个滚动条费了不少功夫。

经过几番折腾发现在 :root 级别里对滚动条进行 css 的设置是无效的。

所以为了隐藏滚动条，我将 root 设置了 overflow:hidden; 将滚动的容器设置到 body 上。

如下 css 样式：

css

/* 
在移动端隐藏原生的浏览器滚动条
:root 的滚动条无法通过 css 隐藏
所以把滚动应用到 body，再针对 body 进行滚动条隐藏
*/
@media (max-width: 750px) {
    :root {
        height: 100%;
        overflow: hidden;
    }
    body {
        height: 100%;
        overflow-y: auto;

        /* 标准的隐藏滚动条 */
        scrollbar-width: none;
        scrollbar-color: transparent;

        /* webkit 内核隐藏滚动条 */
        &::-webkit-scrollbar {
            appearance: none;
            display: none;
        }
    }
}

这样设置之后滚动条如期消失了，不过影响了 页面导航 的锚点定位。经过一番思考，索性去掉 页面导航 ，直接显示 回到顶部。

因为 回到顶部 算是一个高频功能，但是之前被隐藏在了 页面导航 的弹出框里，现在干脆直接且只显示 回到顶部。

这样就涉及到对默认主题的定制，好在 vitepress 提供了原组件覆盖的方式。重写内部组件

我重写了 VPLocalNavOutlineDropdown.vue 组件

vue

function scrollToTop() {
    open.value = false;
    // 故意将移动端的滚动对象由root改为 body，因为root的滚动条样式不可控
    const isRootOverflowHidden = getComputedStyle(document.documentElement).getPropertyValue('overflow-y') === 'hidden';
    const win = isRootOverflowHidden ? document.body : window;
    win.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
}

隐藏了滚动条但是希望有其他方式表示阅读进度，于是写了个进度条，放在 VPLocalNavOutlineDropdown.vue

vue

<script setup lang="ts">
import { useScroll } from '@vueuse/core';
import { computed, ref, onMounted } from 'vue';

// 为了服务端渲染
const body = ref<HTMLElement | null>(null);
onMounted(() => {
    body.value = document.body;
});

const { y } = useScroll(body);
const progress = computed(() => {
    if (!body.value) return 0;
    const distance = document.getElementById('app')!.offsetHeight - window.innerHeight;
    return Math.min((y.value / distance) * 100, 100) + '%';
});
</script>

<template>
    <div class="progress-bar"></div>
</template>

<style scoped>
.progress-bar {
    display: none;
}
@media (max-width: 750px) {
    .progress-bar {
        display: block;
        position: absolute;
        right: 0%;
        bottom: -1px;
        left: 0;
        height: 1px;
        &::after {
            display: block;
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            background-color: var(--vp-c-text-2);
            width: v-bind('progress');
        }
    }
}
</style>

经过这一番折腾，本站终于有了一个让我比较满意的 PWA 的表现形式。

关于本站 ​

PWA 体验 ​

PWA 的 hack ​

关于本站

PWA 体验

PWA 的 hack