WordPress实现PWA应用模式教程：让网站变成桌面快捷应用（完整指南）

代码笔记2小时前发布

10 0 0

一、什么是 PWA 应用模式？

PWA（Progressive Web App，渐进式 Web 应用）是一种可以让网站具备“类似APP体验”的技术方案。通过 PWA，你的网站可以实现：

支持浏览器安装到桌面
独立窗口运行（无地址栏）
离线访问能力
更快的加载速度

对于工具站（如 46.la）来说，PWA 是提升用户粘性和访问频率的重要手段。

二、实现 PWA 的核心三要素

一个完整的 PWA 网站，必须具备以下三部分：

manifest.json（应用配置文件）
Service Worker（缓存与离线能力）
HTTPS（安全环境）

WordPress实现PWA应用模式教程

三、配置 manifest.json 文件

在网站中创建 manifest.json 文件，例如：


{
  "name": "四六啦工具",
  "short_name": "四六啦",
  "description": "四六啦提供免费在线工具，支持批量处理，无需下载。",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait-primary",
  "theme_color": "#054ada",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/api/img/icon_192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/api/img/icon_512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

说明：

display: standalone 控制是否以APP模式打开
icons 决定桌面图标显示效果
start_url 为应用启动入口

四、在 WordPress 中添加 PWA 头部代码

打开主题的 functions.php 文件，加入以下代码：


add_action('wp_head', function () {
    ?>
    <link rel="manifest" href="/api/img/manifest.json">
    <meta name="theme-color" content="#054ada">
    <link rel="apple-touch-icon" href="/api/img/icon_192x192.png">

    <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="default">
    <meta name="apple-mobile-web-app-title" content="四六啦工具">
    <meta name="application-name" content="四六啦工具">
    <?php
});

该代码会自动将 PWA 配置插入到网站的 <head> 区域。

五、注册 Service Worker

在网站底部加入 Service Worker 注册代码：


add_action('wp_footer', function () {
    ?>
    <script>
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', function () {
            navigator.serviceWorker.register('/sw.js')
                .then(function (reg) {
                    console.log('Service Worker 注册成功:', reg.scope);
                })
                .catch(function (err) {
                    console.log('Service Worker 注册失败:', err);
                });
        });
    }
    </script>
    <?php
});

六、创建 sw.js 文件（核心）

在网站根目录创建 sw.js：


const CACHE_NAME = '46la-v1';

const URLS_TO_CACHE = [
  '/'
];

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

self.addEventListener('fetch', event => {
  if (event.request.method !== 'GET') return;

  event.respondWith(
    fetch(event.request).catch(() => {
      return caches.match('/');
    })
  );
});

说明：

缓存首页，保证离线可访问
网络优先策略，避免缓存旧内容
适合工具站和SEO站点

七、如何触发“安装应用”按钮

当满足以下条件时，浏览器会自动显示“安装”按钮：

网站使用 HTTPS
存在 manifest.json
已注册 Service Worker
用户访问达到一定时间

你也可以自定义安装按钮：


let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e;
});

function installApp() {
    if (!deferredPrompt) return;
    deferredPrompt.prompt();
}