本文目录导读：
我来详细介绍如何在 PHP 项目中实现 PWA（渐进式 Web 应用）。
PWA 核心组件
1 Service Worker 文件
创建 sw.js 文件放在项目根目录：
// sw.js
const CACHE_NAME = 'my-app-v1';
const urlsToCache = [
'/',
'/index.php',
'/css/style.css',
'/js/app.js',
'/images/logo.png'
];
// 安装 Service Worker
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
console.log('缓存已打开');
return cache.addAll(urlsToCache);
})
);
});
// 激活 Service Worker
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cache => {
if (cache !== CACHE_NAME) {
return caches.delete(cache);
}
})
);
})
);
});
// 拦截网络请求
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
// 缓存命中，返回缓存
if (response) {
return response;
}
// 缓存未命中，发起网络请求
return fetch(event.request).then(
response => {
// 检查是否有效响应
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
// 克隆响应
const responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(cache => {
cache.put(event.request, responseToCache);
});
return response;
}
);
})
);
});
2 Manifest 文件
创建 manifest.json：
{
"name": "我的PHP应用",
"short_name": "PHP App",
"description": "一个基于PHP的PWA应用",
"start_url": "/index.php",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2196F3",
"icons": [
{
"src": "/images/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
PHP 集成实现
1 主 PHP 文件（index.php）
<?php
// index.php
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的PHP PWA应用</title>
<!-- PWA 关键标签 -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#2196F3">
<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="PHP App">
<link rel="apple-touch-icon" href="/images/icon-192x192.png">
<!-- 样式 -->
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<h1>PHP PWA 应用</h1>
</header>
<main>
<?php
// PHP 业务逻辑
$data = fetchDataFromDatabase();
foreach ($data as $item) {
echo "<div class='item'>{$item['content']}</div>";
}
?>
</main>
<!-- 注册 Service Worker -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('Service Worker 注册成功:', registration.scope);
})
.catch(error => {
console.log('Service Worker 注册失败:', error);
});
});
}
</script>
<script src="/js/app.js"></script>
</body>
</html>
2 PHP Service Worker 注册助手
<?php
// pwa_helper.php
class PWAHelper {
/**
* 检查是否支持 Service Worker
*/
public static function isServiceWorkerSupported() {
return '
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function() {
navigator.serviceWorker.register("/sw.js");
});
}
</script>
';
}
/**
* 生成离线页面缓存策略
*/
public static function getOfflineCacheStrategy() {
return '
<script>
// 网络优先策略
self.addEventListener("fetch", function(event) {
event.respondWith(
fetch(event.request)
.catch(function() {
return caches.match(event.request);
})
);
});
</script>
';
}
/**
* 检查更新提示
*/
public static function checkUpdate() {
return '
<script>
let swRegistration = null;
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
.then(function(reg) {
swRegistration = reg;
reg.addEventListener("updatefound", function() {
const newWorker = reg.installing;
newWorker.addEventListener("statechange", function() {
if (newWorker.state === "installed" && navigator.serviceWorker.controller) {
if (confirm("新版本可用，是否更新？")) {
window.location.reload();
}
}
});
});
});
}
</script>
';
}
}
PHP 动态生成 Manifest
<?php
// manifest.php - 动态生成manifest文件
header('Content-Type: application/json');
$manifest = [
'name' => 'PHP PWA应用 - ' . date('Y'),
'short_name' => 'PHP App',
'description' => '动态生成的PWA Manifest',
'start_url' => '/index.php?utm_source=pwa',
'display' => 'standalone',
'background_color' => '#ffffff',
'theme_color' => '#2196F3',
'icons' => [
[
'src' => '/images/icon-192x192.png',
'sizes' => '192x192',
'type' => 'image/png'
],
[
'src' => '/images/icon-512x512.png',
'sizes' => '512x512',
'type' => 'image/png'
]
]
];
echo json_encode($manifest);
离线缓存策略
1 PHP 缓存助手
<?php
// cache_helper.php
class CacheHelper {
/**
* 缓存API响应
*/
public static function cacheApiResponse($url, $data, $ttl = 3600) {
$cacheFile = 'cache/' . md5($url) . '.json';
$cacheData = [
'timestamp' => time(),
'ttl' => $ttl,
'data' => $data
];
file_put_contents($cacheFile, json_encode($cacheData));
}
/**
* 获取缓存数据
*/
public static function getCachedData($url) {
$cacheFile = 'cache/' . md5($url) . '.json';
if (!file_exists($cacheFile)) {
return null;
}
$cacheData = json_decode(file_get_contents($cacheFile), true);
if (time() - $cacheData['timestamp'] > $cacheData['ttl']) {
unlink($cacheFile);
return null;
}
return $cacheData['data'];
}
}
完整的 PHP PWA 项目结构
php-pwa-project/
├── index.php
├── sw.js
├── manifest.json
├── css/
│ └── style.css
├── js/
│ └── app.js
├── images/
│ ├── icon-192x192.png
│ └── icon-512x512.png
├── cache/
├── api/
│ └── data.php
└── includes/
├── pwa_helper.php
└── cache_helper.php测试和部署
1 本地测试
# 使用 PHP 内置服务器 php -S localhost:8000 # 或使用 HTTPS（PWA 需要） php -S localhost:8000 -c php.ini
2 部署注意事项
- HTTPS 必须：PWA 要求 HTTPS 协议
- 使用 Nginx/Apache 配置 SSL
- 服务端配置：
# nginx 配置示例
server {
listen 443 ssl;
server_name yourdomain.com;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;
root /var/www/php-pwa;
index index.php;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location ~ \.php$ {
fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
# Service Worker 缓存
location /sw.js {
add_header Cache-Control "no-cache";
add_header Service-Worker-Allowed "/";
}
}
最佳实践
- 渐进增强：确保 PWA 功能不影响常规使用
- 离线体验：缓存关键页面和资源
- 性能优化：使用 Service Worker 缓存 API 响应
- 用户体验：添加安装提示和更新通知
这样,你的 PHP 项目就具备了完整的 PWA 功能，用户可以像使用原生应用一样使用你的 PHP 应用！
