UPDATE：原来它正在工作，我只需要手动重新启动服务工作者，就可以再次触发请求。另一篇帖子中的持续问题。
我有一个用角写的应用程序前端，打算在我们家周围的iPad上使用。后端是一个在常规web主机上运行的PHP构建的api。当我使用Workbox注册服务人员时，它在桌面上工作得很好。我能够在桌面Chrome上完美地使用后台同步。当我转到Android版Chrome或iOS版Chrome时，服务人员似乎无法正常工作。
我在android上通过usb调试进行了一些调试，它没有显示workbox后台同步的indexdb数据库，但显示了预缓存。有什么想法吗？
service-worker.js:
importScripts('workbox-3.6.3/workbox-sw.js');
workbox.setConfig({
debug: false,
modulePathPrefix: 'workbox-3.6.3/'
});
workbox.skipWaiting();
workbox.clientsClaim();
workbox.precaching.precacheAndRoute([]);
workbox.routing.registerRoute(
/(http[s]?://)?([^/s]+/)/,
workbox.strategies.networkOnly({
plugins: [
new workbox.backgroundSync.Plugin('requestsQueue', {
maxRetentionTime: 24 * 60 // Retry for max of 24 Hours
})
]
}),
'POST'
)
index.html(主项目index.html不是组件(：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testyo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js').then(function (registration) {
console.log('Service Worker registration successful with scope: ', registration.scope);
}, function (err) {
console.log('Service Worker registration failed: ', err);
});
navigator.serviceWorker.ready.then(function (registration) {
console.log('Service Worker ready');
});
}</script>
</body>
</html>
angular.json:
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.json",
"src/service-worker.js",
{
"glob": "workbox-sw.js",
"input": "node_modules/workbox-sw/build",
"output": "./workbox-3.6.3"
},
{
"glob": "workbox-core.prod.js",
"input": "node_modules/workbox-core/build/",
"output": "./workbox-3.6.3"
},
{
"glob": "workbox-precaching.prod.js",
"input": "node_modules/workbox-precaching/build/",
"output": "./workbox-3.6.3"
},
{
"glob": "workbox-background-sync.prod.js",
"input": "node_modules/workbox-background-sync/build/",
"output": "./workbox-3.6.3"
},
{
"glob": "workbox-routing.prod.js",
"input": "node_modules/workbox-routing/build/",
"output": "./workbox-3.6.3"
},
{
"glob": "workbox-strategies.prod.js",
"input": "node_modules/workbox-strategies/build/",
"output": "./workbox-3.6.3"
}
我使用"npm-run-dist"构建，然后将dist/文件夹放在web主机上。
"scripts": {
"ng": "ng",
"start:sw": "ng seve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"dist": "ng build --prod && workbox injectManifest"
如上所述，处理数据库查询的API是用PHP编写的。它位于同一个名为api/的网络主机上的一个文件夹中
iOS上的服务工作者不支持(预(缓存资产以外的其他功能。
至于Android支持的功能，你是否确保你符合PWA工作的标准。查看此链接以确保您符合条件https://developers.google.com/web/fundamentals/app-install-banners/#criteria