الخطوة 1: تثبيت next-pwa
npm install next-pwa
الخطوة 2: إعداد next.config.js
const withPWA = require('next-pwa')({
dest: 'public',
register: true,
skipWaiting: true,
disable: process.env.NODE_ENV === 'development',
});
module.exports = withPWA({
// your next config
});
الخطوة 3: إنشاء manifest.json
// public/manifest.json
{
"name": "My Next.js App",
"short_name": "NextApp",
"description": "A Progressive Web App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1e40af",
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
الخطوة 4: إضافة العلامات الوصفية (Meta Tags)
// app/layout.js or pages/_document.js
<Head>
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#1e40af" />
<link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
</Head>
الخطوة 5: مكوّن مطالبة التثبيت
'use client';
import { useEffect, useState } from 'react';
export function InstallPrompt() {
const [installPrompt, setInstallPrompt] = useState(null);
const [showPrompt, setShowPrompt] = useState(false);
useEffect(() => {
const handler = (e) => {
e.preventDefault();
setInstallPrompt(e);
setShowPrompt(true);
};
window.addEventListener('beforeinstallprompt', handler);
return () => window.removeEventListener('beforeinstallprompt', handler);
}, []);
const handleInstall = async () => {
if (!installPrompt) return;
installPrompt.prompt();
const result = await installPrompt.userChoice;
if (result.outcome === 'accepted') {
setShowPrompt(false);
}
};
if (!showPrompt) return null;
return (
<div className="fixed bottom-4 right-4 bg-white p-4 rounded-lg shadow-lg">
<p>Install this app for a better experience!</p>
<button onClick={handleInstall}>Install</button>
<button onClick={() => setShowPrompt(false)}>Later</button>
</div>
);
}
التعليقات (0)
اترك تعليقًا
لا توجد تعليقات بعد. كن أول من يشارك أفكاره!