نحوه طراحی PWA به صورت اینلاین بدون نیاز به فایل Manifest.js و نصب اپلیکیشن برای سایت

اگر می‌خواهید یک اپلیکیشن وب پیشرفته (PWA) بدون استفاده از فایل جداگانه manifest.json طراحی کنید، می‌توانید اطلاعات مانیفست را به‌صورت اینلاین در HTML قرار داده و آن را در جاوا اسکریپت پردازش کنید.

✅ مراحل کلی

1️⃣ اضافه کردن مانیفست اینلاین در HTML در کدهای قالب

2️⃣ رفتن به قسمت قالب > تنظیمات قالب

3️⃣ ست کردن اسم اپلیکیشن و لوگو و دیگر تنظیمات اپ

4️⃣ باز کردن سایت در مرورگر گوشی و نصب اپلیکیشن

5️⃣ تست اپلیکیشن و بررسی عملکرد PWA

🔹 مرحله 1 اضافه کردن مانیفست اینلاین در HTML

<RB:Condition>
<RB:IF:[RB:Is_Tablet_Mobile]==true>
<RB:CB=0><RB:CBT=تنظیمات نصب اپلیکیشن سایت><RB:CBA=1>
<RB:VAR:cookie_name><RB:CBC=در صورتی که میخواهد اعلان نصب رست شود و دوباره نمایش داده شود این اسم را تغییر دهید=text>appInstalled3</RB:CBC></RB:VAR>
<script>
	// --- Manifest JSON ---
	const manifestJSON = {
	    "name": "<RB:CBC=عنوان اپلیکیشن میتواند عنوان سایت باشد=text>عنوان سایت</RB:CBC>",
	    "short_name": "<RB:CBC=اسم اپلیکیشن میتواند ادرس سایت باشد=text>rozblog.com</RB:CBC>",
	    "start_url": "/",
	    "display": "standalone",
	    "background_color": "<RB:CBC=کد رنگ بکگراند سایت=text>#ffffff</RB:CBC>",
	    "theme_color": "<RB:CBC=کد رنگ اصلی قالب=text>#ffffff</RB:CBC>",
	    "icons": [{
	            "src": "<RB:CBC=لوگو در اندازه 192x192=text>https://www.rozblog.com/theme/rozblog_v6/img/logo.png</RB:CBC>",
	            "sizes": "192x192",
	            "type": "image/png"
	        },
	        {
	            "src": "<RB:CBC=لوگو در اندازه 512x512=text>https://www.rozblog.com/theme/rozblog_v6/img/logo.png</RB:CBC>",
	            "sizes": "512x512",
	            "type": "image/png"
	        }
	    ]
	};

	const manifestBlob = new Blob([JSON.stringify(manifestJSON)], {
	    type: "application/json"
	});
	const manifestURL = URL.createObjectURL(manifestBlob);

	document.addEventListener('DOMContentLoaded', () => {
	    // اضافه کردن Manifest به DOM
	    const link = document.createElement("link");
	    link.rel = "manifest";
	    link.href = manifestURL;
	    document.head.appendChild(link);

	    // ثبت Service Worker
	    if ('serviceWorker' in navigator) {
	        navigator.serviceWorker.register('https://rozup.ir/view/4030783/service-worker.js')
	            .then((registration) => {
	                console.log('Service Worker registered with scope:', registration.scope);
	            })
	            .catch((error) => {
	                console.error('Service Worker registration failed:', error);
	            });
	    }

	    // --- Install Prompt Event ---
	    let deferredPrompt;

	    // بررسی Local Storage برای نمایش دکمه نصب
	    const installButton = document.createElement('button');
	    installButton.innerText = '<RB:CBC=عنوان دکمه نصب=text>نصب اپلیکیشن</RB:CBC>';
	    installButton.style.position = 'fixed';
	    installButton.style.bottom = '20px';
	    installButton.style.right = '20px';
	    installButton.style.zIndex = '1000';
	    installButton.style.padding = '10px 20px';
	    installButton.style.backgroundColor = '#007bff';
	    installButton.style.color = '#fff';
	    installButton.style.border = 'none';
	    installButton.style.borderRadius = '5px';
	    installButton.style.cursor = 'pointer';
	    installButton.style.display = 'none';

	    // اگر کاربر قبلاً نصب کرده باشد، دکمه نمایش داده نشود
	    if (localStorage.getItem('[RB:VAR:cookie_name]') === 'true') {
	        installButton.style.display = 'none';
	    } else {
	        installButton.style.display = 'block';
	    }

	    installButton.addEventListener('click', () => {
	        if (deferredPrompt) {
	            deferredPrompt.prompt();
	            deferredPrompt.userChoice.then((choiceResult) => {
	                if (choiceResult.outcome === 'accepted') {
	                    console.log('User accepted the install prompt');
	                    // ذخیره وضعیت نصب در Local Storage
	                    localStorage.setItem('[RB:VAR:cookie_name]', 'true');
	                    installButton.style.display = 'none'; // دکمه را پس از نصب مخفی کن
	                } else {
	                    console.log('User dismissed the install prompt');
	                }
	                deferredPrompt = null;
	            });
	        }
	    });

	    document.body.appendChild(installButton);

	    // نمایش دکمه نصب اگر رویداد BeforeInstallPrompt فعال شود
	    window.addEventListener('beforeinstallprompt', (event) => {
	        event.preventDefault();
	        deferredPrompt = event;

	        // اگر کاربر قبلاً نصب نکرده باشد، دکمه نصب نمایش داده شود
	        if (localStorage.getItem('[RB:VAR:cookie_name]') !== 'true') {
	            installButton.style.display = 'block';
	        }
	    });
	});
</script>
</RB:CB>
</RB:IF>
</RB:Condition>

🔹 مرحله 2 اضافه کردن کد به قسمت HEAD ویرایش قالب.

🔹 مرحله 3 کپی کدهای زیر در نوت پد و تغییر ادرس logo فعلی در کد با لوگو سایت خود و ذخیره با نام service-worker.js

و در نهایت آپلود فایل ذخیره شده در رزاپ و اضافه کردن به کد بالا به جای service-worker.js فعلی

const CACHE_NAME = 'pwa-rozblog-v1';
const REQUIRED_FILES = [
  '/',
  'https://www.rozblog.com/theme/rozblog_v6/img/logo.png'
];
// نصب Service Worker و ذخیره فایل‌های ضروری در Cache
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log('Caching required files...');
      return cache.addAll(REQUIRED_FILES);
    })
  );
});

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);

  // فقط فایل‌های استاتیک را کش کن، نه صفحات HTML
  if (
    url.pathname.endsWith('.jpg') ||
    url.pathname.endsWith('.png') ||
    url.pathname.endsWith('.webp') ||
    url.pathname.endsWith('.css') ||
    url.pathname.endsWith('.js')
  ) {
    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;
        });
      })
    );
  } else {
    // برای درخواست‌های دیگر، آن‌ها را مستقیماً از شبکه دریافت کن
    event.respondWith(fetch(event.request));
  }
});

self.addEventListener('activate', (event) => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

✅ این روش مانیفست را مستقیم درون HTML اضافه می‌کند، بدون نیاز به فایل جداگانه. ✅ مرورگر این داده را به‌عنوان manifest شناسایی کرده و قابلیت نصب PWA را فراهم می‌کند.

اضافه کردن دکمه جدا برای نصب اپلیکیشن و حذف ان در نسخه اپلیکیشن

کد html

<a id="installPWA_Menu" class="" href="#"><span class="link-text">نصب اپلیکیشن</span></a>

let deferredPrompt_Menu;

window.addEventListener('beforeinstallprompt', (event) => {
    event.preventDefault(); // جلوگیری از نمایش خودکار پیام نصب
    deferredPrompt_Menu = event; // ذخیره درخواست نصب برای دکمه‌ی منو
    document.getElementById('installPWA_Menu').style.display = 'block'; // نمایش دکمه
});

document.getElementById('installPWA_Menu').addEventListener('click', (event) => {
    event.preventDefault(); // جلوگیری از تغییر مسیر لینک
    if (deferredPrompt_Menu) {
        deferredPrompt_Menu.prompt(); // نمایش پنجره نصب PWA
        deferredPrompt_Menu.userChoice.then((choiceResult) => {
            if (choiceResult.outcome === 'accepted') {
                console.log('کاربر PWA را نصب کرد (منو).');
            } else {
                console.log('کاربر نصب PWA را رد کرد (منو).');
            }
            deferredPrompt_Menu = null;
        });
    }
});


function isPWAInstalled() {
    return (window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone);
}

document.addEventListener('DOMContentLoaded', () => {
    const installButton = document.getElementById('installPWA_Menu');

    if (isPWAInstalled()) {
        installButton.style.display = 'none';
    }
});