其他前端工具技术

网站添加 PWA 配置，使网站支持像应用一样安装

1、什么是 PWA？

PWA（Progressive Web App）是一种现代网页技术，它可以让网站具备类似原生应用的体验。通过 PWA，用户可以将网站添加到主屏幕，离线访问内容，并享受更快的加载速度。

使用 Dream2.0 Plus 主题时，只需参考创建 manifest.json 文件并在主题设置中启用 PWA 配置即可，4、添加 Meta 标签中的内容主题已添加无需手动注入。

2、如何为网站添加 PWA 配置？

2.1、创建 `manifest.json` 文件

创建 manifest.json 文件，并将其添加到服务器中。支持将其添加到 Halo 的附件中，只需指定正确的路径即可。

manifest.json 文件是 PWA 的核心配置文件，用于定义应用的元数据，包括名称、图标、启动行为等。以下是 manifest.json 文件中常见参数的定义和作用：

2.1.1、`short_name`

作用: 应用的短名称，通常用于主屏幕图标下方或空间有限的地方。
示例:
```
"short_name": "MyApp"
```

2.1.2、`name`

作用: 应用的完整名称，通常用于安装提示或启动画面。
示例:
```
"name": "My Progressive Web App"
```

2.1.3、`icons`

作用: 定义应用在不同设备上显示的图标。通常需要提供多种尺寸的图标以适应不同设备。
参数:
- src: 图标文件的路径。
- type: 图标的 MIME 类型（如 image/png）。
- sizes: 图标的尺寸（如 192x192、512x512）。

示例:

"icons": [
  {
    "src": "icon-192x192.png",
    "type": "image/png",
    "sizes": "192x192"
  },
  {
    "src": "icon-512x512.png",
    "type": "image/png",
    "sizes": "512x512"
  }
]

2.1.4、`start_url`

作用: 指定应用启动时加载的 URL，通常是应用的首页。
示例:
```
"start_url": "/"
```

2.2.5、`background_color`

作用: 定义应用的背景颜色，通常用于启动画面和加载时的背景。
示例:
```
"background_color": "#ffffff"
```

2.1.6、`theme_color`

作用: 定义应用的主题颜色，通常用于浏览器的地址栏和工具栏。
示例:
```
"theme_color": "#000000"
```

2.1.7、`display`

作用: 定义应用的显示模式，控制应用如何呈现给用户。
可选值:
- fullscreen: 全屏显示，隐藏所有浏览器 UI。
- standalone: 类似原生应用，隐藏浏览器 UI，但保留系统状态栏。
- minimal-ui: 最小化浏览器 UI，保留部分控件（如后退按钮）。
- browser: 普通浏览器模式。
示例:
```
"display": "standalone"
```

2.1.8、`scope`

作用: 定义 PWA 的作用范围，控制哪些 URL 属于应用的一部分。
示例:
```
"scope": "/"
```

2.1.9、`description`

作用: 应用的描述信息，通常用于安装提示或应用商店。

示例:

"description": "这是一个渐进式Web应用示例。"

2.1.10、`orientation`

作用: 定义应用的屏幕方向。
可选值:
- portrait: 竖屏。
- landscape: 横屏。
- any: 任意方向。
示例:
```
"orientation": "portrait"
```

2.1.11、`dir`

作用: 定义文本方向。
可选值:
- ltr: 从左到右（默认）。
- rtl: 从右到左。
- auto: 自动检测。
示例:
```
"dir": "ltr"
```

2.1.12、`lang`

作用: 定义应用的主要语言。
示例:
```
"lang": "zh-CN"
```

2.1.13、`prefer_related_applications`

作用: 是否优先推荐用户安装原生应用。
示例:
```
"prefer_related_applications": false
```

2.1.14、`related_applications`

作用: 列出相关的原生应用（如 Android 或 iOS 应用）。

示例:

"related_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app"
  }
]

2.1.15、`screenshots`

作用: 提供应用的截图，通常用于安装提示或应用商店。

示例:

"screenshots": [
  {
    "src": "screenshot1.png",
    "sizes": "1280x720",
    "type": "image/png"
  }
]

2.1.16、完整示例

以下是一个完整的 manifest.json 示例：

{
  "short_name": "宏尘极客",
  "name": "宏尘极客|笔记",
  "description": "宏尘极客是一个专注于技术知识和NAS笔记等内容分享的综合性网站。",
  "icons": [
    {
      "src": "favicon.ico",
      "type": "image/png",
      "sizes": "212x212"
    }
  ],
  "screenshots": [
    {
      "src": "wide1.png",
      "sizes": "1280x622",
      "type": "image/png",
      "form_factor": "wide"
    },
    {
      "src": "phone-1.png",
      "sizes": "322x680",
      "type": "image/png"
    }
  ],
  "id": "/",
  "start_url": "/",
  "background_color": "#ffffff",
  "orientation": "any",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#50bfff"
}

manifest.json 文件通过定义应用的元数据，使 PWA 能够以类似原生应用的方式运行和展示。合理配置这些参数可以提升用户体验，并确保应用在不同设备上的一致性。

2.2、在 HTML 中引入 Manifest 文件

在网站的 <head> 部分添加以下代码，以链接到 manifest.json 文件。

<link rel="manifest" href="/manifest.json">

3、注册 Service Worker

创建一个 service-worker.js 文件，用于缓存资源并支持离线访问。

const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/main.js',
  '/images/logo.png'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => response || fetch(event.request))
  );
});

在网站的 JavaScript文件中注册 Service Worker。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then((registration) => {
      console.log('Service Worker 注册成功:', registration);
    })
    .catch((error) => {
      console.log('Service Worker 注册失败:', error);
    });
}

此处仅为示例，非强制需求，需根据主题决定哪些文件需要缓存。
主要目的是实现网站的离线访问功能，该功能仅在用户之前访问过网站时才能生效。

使用 Dream2.0 Plus 主题时，在 主题设置 - 增强功能 - 启用 Service Worker 优化 选择 开启并发CDN请求 即可开启Service Worker 优化。

4、添加 Meta 标签

在 <head> 中添加以下 Meta 标签，以确保 PWA 功能正常工作。

<meta name="theme-color" content="#000000">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="icons/icon-192x192.png">

使用 Dream2.0 Plus 主题时，在 主题设置 - PWA配置 - 开启 PWA 配置 选择 开启 主题会自动注入上述内容，无需手动注入。

5、测试 PWA 功能

使用 Chrome DevTools 或其他工具测试 PWA 功能，确保网站可以正确安装并支持离线访问。

如果觉得文章对你有用，请随意赞赏

Halo Html 其他

网站添加 PWA 配置，使网站支持像应用一样安装

https://www.hcjike.com/archives/MNdz7kZ6

作者

宏尘

发布于

2025-02-11

更新于

2025-02-22

许可协议

CC BY 4.0

网站添加 PWA 配置，使网站支持像应用一样安装

1、什么是 PWA？

2、如何为网站添加 PWA 配置？

2.1、创建 manifest.json 文件

2.1.1、short_name

2.1.2、name

2.1.3、icons

2.1.4、start_url

2.2.5、background_color

2.1.6、theme_color

2.1.7、display

2.1.8、scope

2.1.9、description

2.1.10、orientation

2.1.11、dir

2.1.12、lang

2.1.13、prefer_related_applications

2.1.14、related_applications

2.1.15、screenshots

2.1.16、完整示例

2.2、在 HTML 中引入 Manifest 文件

3、注册 Service Worker

4、添加 Meta 标签

5、测试 PWA 功能

作者

发布于

更新于

许可协议

2.1、创建 `manifest.json` 文件

2.1.1、`short_name`

2.1.2、`name`

2.1.3、`icons`

2.1.4、`start_url`

2.2.5、`background_color`

2.1.6、`theme_color`

2.1.7、`display`

2.1.8、`scope`

2.1.9、`description`

2.1.10、`orientation`

2.1.11、`dir`

2.1.12、`lang`

2.1.13、`prefer_related_applications`

2.1.14、`related_applications`

2.1.15、`screenshots`