В manifest.json start_url открывает не тот файл
Всем привет! Разрабатываю свое pwa приложение. Есть проблема, при открытии pwa приложения через кнопку на сайте, оно открывает ту страницу, на которой кнопка, хотя в manifest.json в параметре start_url указана другая страница. Помогите!!
manifest.json
{
"name": "My PWA",
"short_name": "PWA",
"description": "Пример Progressive Web Application",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffaae9",
"theme_color": "#ffaae9",
"icons": [
{
"src": "html/assets/img/icon192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "html/assets/img/icon512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "html/assets/img/icon144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "any"
}
]
}
service-worker.js
self.addEventListener('install', function(event) {
console.log('Service Worker installing.');
event.waitUntil(
caches.open('my-cache').then(function(cache) {
console.log('Opened cache');
return cache.addAll([
'/',
'/index.html',
'/html/assets/bootstrap/css/bootstrap.min.css',
'/html/assets/font-awesome/css/fontawesome-all.min.css',
'/html/assets/css/magnific-popup.css',
'/html/assets/css/style.css',
'/html/assets/js/jquery-3.3.1.min.js',
'/html/assets/js/popper.min.js',
'/html/assets/bootstrap/js/bootstrap.min.js',
'/html/assets/js/imagesloaded.pkgd.min.js',
'/html/assets/js/jquery.magnific-popup.min.js',
'/html/assets/js/jquery.countdown.min.js',
'/html/assets/js/jquery.validate.min.js',
'/html/assets/js/jquery-validate.bootstrap-tooltip.min.js',
'/html/assets/js/custom.js',
'/html/assets/img/icon144.png',
'/html/assets/img/icon192.png',
'/html/assets/img/icon512.png'
]).then(function() {
console.log('All resources have been cached successfully.');
}).catch(function(error) {
console.error('Cache addAll failed:', error);
});
})
);
});
self.addEventListener('activate', function(event) {
console.log('Service Worker activating.');
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
index-dark-shapes-cta.html
<!-- Регистрация Service Worker -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(error) {
console.log('ServiceWorker registration failed: ', error);
});
});
}
</script>
<!-- Обработка установки PWA -->
<script>
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
document.getElementById('install-btn').style.display = 'inline-block'; // Устанавливаем inline-block для правильного отображения
});
document.getElementById('install-btn').addEventListener('click', async () => {
if (deferredPrompt) {
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
if (outcome === 'accepted') {
console.log('User accepted the install prompt');
} else {
console.log('User dismissed the install prompt');
}
deferredPrompt = null;
}
});
</script>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.json">
<title>My PWA</title>
<!-- Другие теги head -->
</head>
<body>
<!-- Контент вашего PWA -->
123
123
123
123
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('service-worker.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
});
});
}
</script>
</body>
</html>