无法使用工人和 javascript 制作可安装的 WPA

如何解决无法使用工人和 javascript 制作可安装的 WPA

我正在尝试制作可安装的 WPA（网络渐进式应用程序）

我到处检查...发现我需要添加清单 => 完成

<Meta name="theme-color" media="(prefers-color-scheme: light)" content="white"> <link rel="manifest" href="/pathtomanifest.webmanifest" />

我的 .manifest 看起来像这样

{
    "theme_color": "#4a90e2","background_color": "#ffffff","display": "standalone","scope": "/",// -->> also tried with full https://example.com
    "start_url": "/",// -->> also tried with full https://example.com
    "name": "name","short_name": "shortname","description": "RSS Feeds","icons": [
        {
            "src": "/manifests/icon-192x192.png","sizes": "192x192","type": "image/png","purpose": "any maskable"
        }
        // up to 512x512
    ]
}

之后，我需要注册一个这样的工人

async function workers_load () {
  if ('serviceWorker' in navigator) {
    try { await navigator.serviceWorker.register('/workers.js'); console.log(`stubworker loaded`); } 
    catch (e) { console.log(`SW registration Failed`); }
  }
}

并加载它

window.addEventListener('load',function () { workers_load(); },false);

我的 workers.js

    const CACHE_NAME = 'offline';
const OFFLINE_URL = '/templates/account_js/workers/stuboffline.html';

self.addEventListener('install',function(event) { 
    console.log("stubworker installed",event); 
    event.waitUntil((async () => { const cache = await caches.open(CACHE_NAME); await cache.add(new Request(OFFLINE_URL,{cache: 'reload'})); })());
    self.skipwaiting();
})

self.addEventListener('activate',function(event){ 
    console.log("stubworker activated",event); 
    event.waitUntil((async () => { if ('navigationPreload' in self.registration) { await self.registration.navigationPreload.enable(); } })());
    self.clients.claim();
})

self.addEventListener('fetch',function (event) { 
    console.log("stubworker fetch",event); 
});

当我加载页面时，我进入了控制台，我得到了这个

worker installed InstallEvent {isTrusted: true,type: "install",target: ServiceWorkerGlobalScope,currentTarget: ServiceWorkerGlobalScope,eventPhase: 2, …}
worker loaded
workers.js?v=4:2 stubworker activated ExtendableEvent {isTrusted: true,type: "activate", …}

当我去 google Lighthouse 进行测试时

它告诉我 2 个错误

Web app manifest or service worker do not meet the installability requirements 

This origin has one or more service workers,however the page (...) is not in scope.

它也告诉我这个

Failure reason
No matching service worker detected. You may need to reload the page,or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.

它似乎与清单有关，但我在清单中缺少什么

我缺少什么代码才能使其“可安装”？

解决方法

事实证明我必须做一些修改才能让它工作

1- 注册工人

window.addEventListener('load',function () {
    if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('/ws.js?v=31',{scope: '/' }); 
    console.log("worker registered"); }
},false);

2- *** 绝对必须 ==>> ws.js 需要在根 html 文件夹中

3- 清单

 "theme_color": "#4a90e2","background_color": "#ffffff","display": "standalone","scope": "/","start_url": "https://www.example.com/","name": "name","short_name": "name","description": "Rss feeds from around the world","categories": ["news","feeds","rss"],"dir": "auto","orientation": "any",

4- ws.js 起点

self.addEventListener('install',function(event) { });

self.addEventListener('activate',function(event){ });

self.addEventListener('fetch',function (event) { });