如何獲取“添加到主屏幕”標語以在我的PWA的移動瀏覽器中顯示？

Question

我一直在嘗試獲得一個非常基本的PWA，它可以使用api來工作。

雖然PWA 在筆記本電腦上可以正常工作（包括添加到主屏幕后可以脫機工作）， 但在移動設備上看不到安裝/添加到主屏幕的提示/橫幅 。

該應用程序也無法在移動設備上離線運行

這是服務人員代碼：

 const cacheName = 'news'; const staticAssets = [ './', './app.js', './styles.css', './fallback.json', ]; self.addEventListener('install', async function () { const cache = await caches.open(cacheName); cache.addAll(staticAssets); }); self.addEventListener('activate', event => { event.waitUntil(self.clients.claim()); }); self.addEventListener('fetch', event => { const request = event.request; const url = new URL(request.url); if (url.origin === location.origin) { event.respondWith(cacheFirst(request)); } else { event.respondWith(networkFirst(request)); } }); async function cacheFirst(request) { const cachedResponse = await caches.match(request); return cachedResponse || fetch(request); } async function networkFirst(request) { const dynamicCache = await caches.open('news-dynamic'); try { const networkResponse = await fetch(request); dynamicCache.put(request, networkResponse.clone()); return networkResponse; } catch (err) { const cachedResponse = await dynamicCache.match(request); return cachedResponse || await caches.match('./fallback.json'); } } 

這是manifest.json文件：

 { "name": "News", "short_name": "News", "theme_color": "#2196f3", "background_color": "#2196f3", "display": "standalone", "Scope": "/", "start_url": ".", "icons": [ { "src": "images/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null } 

關於如何使其在移動設備上按預期工作的任何想法？

Answer 1

您可以在此github論壇上關注此問題。 建議的解決方案之一是禁用Adblock。

確認，如果我告訴Adblock不要在頁面上運行，它可以工作。