by Anonymous » 19 Aug 2025, 15:23
Ich habe eine PWA, die in einem Desktop -Browser arbeitet und das Installationssymbol in der Adressleiste (tapfere und Chrombrowser) zeigt. Es gibt ein Manifest. Json und der Servicearbeiter (SW.JS) wird anerkannt, und Devtools zeigen ihn als Laufen. Ich bin mir also einigermaßen sicher, dass mein Code vollständig ist.
Code: Select all
// Service Worker
const cacheName = "paul-address";
const filesToCache = [
"/test/",
"/test/index.html",
"/test/js/index.js",
"/test/styles/styles.css"
];
self.addEventListener("install", e => {
console.log("[ServiceWorker**] Install");
e.waitUntil(
caches.open(cacheName).then(cache => {
console.log("[ServiceWorker**] Caching app shell");
return cache.addAll(filesToCache);
})
);
});
self.addEventListener("activate", event => {
caches.keys().then(keyList => {
return Promise.all(
keyList.map(key => {
if (key !== cacheName) {
console.log("[ServiceWorker] - Removing old cache", key);
return caches.delete(key);
}
})
);
});
});
// sw.js - Cache-first strategy for static assets
self.addEventListener('fetch', event => {
// Only handle GET requests
if (event.request.method !== 'GET') return;
const url = new URL(event.request.url);
// Cache-first for static assets
if (url.pathname.match(/\.(css|js|png|jpg|jpeg|gif|svg|ico)$/)) {
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
console.log('Serving from cache:', event.request.url);
return response;
}
// Fetch and cache new resources
return fetch(event.request)
.then(response => {
// Don't cache non-successful responses
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;
});
})
.catch(() => {
// Return fallback for images
if (event.request.destination === 'image') {
return caches.match('/images/fallback.png');
}
})
);
}
});
Wenn ich es jedoch auf einem Android -Gerät teste, erhalte ich keine Eingabeaufforderung für mutige oder Chrombrowser. Selbst wenn ich die Installation trotz des Bildschirms auswähle, in dem 'installieren ...' tatsächlich nur einen Startbildschirm -Verknüpfung erstellt. der App.
Ich habe eine PWA, die in einem Desktop -Browser arbeitet und das Installationssymbol in der Adressleiste (tapfere und Chrombrowser) zeigt. Es gibt ein Manifest. Json und der Servicearbeiter (SW.JS) wird anerkannt, und Devtools zeigen ihn als Laufen. Ich bin mir also einigermaßen sicher, dass mein Code vollständig ist.[code]// Service Worker
const cacheName = "paul-address";
const filesToCache = [
"/test/",
"/test/index.html",
"/test/js/index.js",
"/test/styles/styles.css"
];
self.addEventListener("install", e => {
console.log("[ServiceWorker**] Install");
e.waitUntil(
caches.open(cacheName).then(cache => {
console.log("[ServiceWorker**] Caching app shell");
return cache.addAll(filesToCache);
})
);
});
self.addEventListener("activate", event => {
caches.keys().then(keyList => {
return Promise.all(
keyList.map(key => {
if (key !== cacheName) {
console.log("[ServiceWorker] - Removing old cache", key);
return caches.delete(key);
}
})
);
});
});
// sw.js - Cache-first strategy for static assets
self.addEventListener('fetch', event => {
// Only handle GET requests
if (event.request.method !== 'GET') return;
const url = new URL(event.request.url);
// Cache-first for static assets
if (url.pathname.match(/\.(css|js|png|jpg|jpeg|gif|svg|ico)$/)) {
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
console.log('Serving from cache:', event.request.url);
return response;
}
// Fetch and cache new resources
return fetch(event.request)
.then(response => {
// Don't cache non-successful responses
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;
});
})
.catch(() => {
// Return fallback for images
if (event.request.destination === 'image') {
return caches.match('/images/fallback.png');
}
})
);
}
});
[/code]
Wenn ich es jedoch auf einem Android -Gerät teste, erhalte ich keine Eingabeaufforderung für mutige oder Chrombrowser. Selbst wenn ich die Installation trotz des Bildschirms auswähle, in dem 'installieren ...' tatsächlich nur einen Startbildschirm -Verknüpfung erstellt. der App.
Mobile version