如何让 WordPress 网站支持 PWA（渐进式 Web 应用）

在移动优先的时代，渐进式 Web 应用（PWA）成为提升用户体验、增强网站功能的热门技术。PWA 结合了网站和原生 App 的优点，不仅可以离线访问、安装到主屏幕，还能实现推送通知等功能。对于 WordPress 网站而言，借助插件和适当配置，也可以轻松实现 PWA 支持。本文将带你一步步实现 WordPress PWA 化。

一、什么是 PWA？

PWA 是 Progressive Web App 的缩写，它是一种使用现代 Web 技术（如 Service Worker、Web App Manifest 等）构建的网站形式，具备以下特性：

可安装：用户可以将网站添加到桌面或手机主屏幕。
离线可用：借助 Service Worker 缓存内容，即使没有网络也能访问。
响应式设计：在各种设备上都有良好体验。
原生 App 体验：快速加载、沉浸式界面、推送通知等。

二、WordPress 支持 PWA 的方式

WordPress 本身并不原生支持 PWA 功能，但通过插件或手动集成 Service Worker，可以快速实现。常见方式有：

方式一：使用 PWA 插件

推荐插件之一是：Super Progressive Web Apps

安装步骤：

登录 WordPress 后台，进入「插件」 > 「安装插件」。
搜索并安装 Super Progressive Web Apps 插件。
安装并启用后，进入「设置」 > 「Super PWA」进行配置。

核心设置包括：

App 名称与简写名：用于主屏幕快捷方式显示。
启动 URL：PWA 应用的入口。
主题色与背景色：决定启动画面风格。
图标设置：上传512×512等尺寸图标，保证安装效果。
离线页面：定义用户断网时展示的备用页面。

方式二：使用 PWA for WP & AMP 插件（进阶）

PWA for WP & AMP 插件提供了更多高级功能，如：

推送通知（配合 Firebase）
离线缓存策略配置
与 AMP 页面兼容
自定义 Service Worker 文件

此插件适合有更多定制化需求的开发者和站长。

三、手动集成 PWA（开发者向）

如果你对代码熟悉，也可以手动添加 Manifest 与 Service Worker 来实现 PWA。

第一步：添加 Manifest 文件

在主题根目录下创建 manifest.json 文件，内容如下：

{
  "name": "我的 WordPress 网站",
  "short_name": "WP站点",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0073aa",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

然后在你的 header.php 中加入以下代码：

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0073aa">

第二步：注册 Service Worker

在网站根目录添加 service-worker.js 文件，例如：

self.addEventListener('install', function (e) {
  e.waitUntil(
    caches.open('my-pwa-cache').then(function (cache) {
      return cache.addAll([
        '/',
        '/offline.html',
        '/wp-content/themes/你的主题/style.css'
      ]);
    })
  );
});

self.addEventListener('fetch', function (e) {
  e.respondWith(
    fetch(e.request).catch(function () {
      return caches.match(e.request).then(function (response) {
        return response || caches.match('/offline.html');
      });
    })
  );
});

再在 <head> 中添加注册代码（或写入主题 JS 文件）：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function () {
    navigator.serviceWorker.register('/service-worker.js');
  });
}