> 风之谷家庭服务器系列 · 第 3 篇

## 前言

网页在手机浏览器里始终像个“访客”：地址栏占半寸、左右滑会触发返回手势、锁屏就断。改造目标四个字：**像原生 App**——添加到主屏幕、全屏运行、左右滑翻页、断网也能打开书。

## 一、PWA 三件套

```html
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
```

`manifest.json` 里配好 192 / 512 双尺寸图标。iOS Safari“添加到主屏幕”后，图标点开就是全屏无地址栏的独立窗口，观感和原生 App 没区别。

## 二、依赖本地化：把 CDN 搬回家

epub.js、jszip 全部下载到自家 `vendor/` 目录改本地引用。从此地铁里、飞机上照样开书——**离线可用是家庭自建服务的尊严**。

## 三、触屏翻页：iframe 是个“事件黑洞”

外层监听 `touchstart` / `touchend` 一切正常——直到内容渲染进 epub.js 的 iframe：**外层监听收不到 iframe 内部的事件**，翻页手势直接失灵。

解法：用 epub.js 的钩子往 iframe 文档里注入监听：

```js
rendition.hooks.content.register((contents) => {
    const doc = contents.document;
    let sx = 0, sy = 0, st = 0;
    doc.addEventListener("touchstart", e => {
        sx = e.touches[0].clientX;
        sy = e.touches[0].clientY;
        st = Date.now();
    }, { passive: true });
    doc.addEventListener("touchend", e => {
        const dx = e.changedTouches[0].clientX - sx;
        const dy = e.changedTouches[0].clientY - sy;
        if (Math.abs(dx) > 45 && Math.abs(dx) > 1.2 * Math.abs(dy)
            && Date.now() - st < 800) {
            dx < 0 ? rendition.next() : rendition.prev();
        }
    });
});
```

滑动判定三条件：**位移 > 45px、横向分量 > 1.2 倍纵向、时长 < 800ms**——同时满足才算翻页，避免上下滚动时误触。

## 四、细节与回归测试

- `env(safe-area-inset-top/bottom)` 避开刘海屏和底部手势条；
- 一段 `@media (max-width: 820px)` 搞定全部移动端布局：卡片缩小、按钮加高、抽屉加宽；
- 用 Playwright 的 `p.devices["iPhone 13"]` 设备描述跑真实视口回归，12 项断言全过——包括“EPUB iframe 内滑动真的翻了页”。

**Playwright 小坑**：`wait_until: "networkidle"` 可能永远等不到（页面有长连接或特殊请求时），改用 `domcontentloaded` + 固定等待更稳。

## 结语

改完之后，家人手机桌面上的“书屋”图标，点击、滑动、翻页，和花几百块买的阅读器没有区别。

网页在手机浏览器里始终像个“访客”：地址栏占半寸、左右滑会触发返回手势、锁屏就断。改造目标四个字：像原生 App——添加到主屏幕、全屏运行、左右滑翻页、断网也能打开书。

把网页装进手机：PWA + 触屏翻页改造实录（含 iframe 手势注入技巧）

前端

客户端

开发工具

风之谷家庭服务器PWA改造：通过manifest与iOS全屏配置实现类原生App体验，本地化epub.js依赖支持离线阅读，注入iframe事件监听解决触屏翻页失灵，滑动判定精确至位移45px、横向1.2倍纵向、时长800ms，safe-area适配刘海屏，Playwright回归测试12项全过。

WorkBuddy企业版限时双倍 Credits 活动

workbuddy

CDN免费试用


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

把网页装进手机：PWA + 触屏翻页改造实录（含 iframe 手势注入技巧）-腾讯云开发者社区-腾讯云

把网页装进手机：PWA + 触屏翻页改造实录（含 iframe 手势注入技巧）

把网页装进手机：PWA + 触屏翻页改造实录（含 iframe 手势注入技巧）

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐