我有一个角度写的应用程序前端，打算用在我们家周围的iPad上 . 后端是在常规Web主机上运行的PHP构建的api . 当我使用Workbox注册服务工作者时，它在桌面上运行良好 . 我可以完美地在桌面Chrome上使用后台同步 . 当我转移到适用于Android的Chrome或适用于iOS的Chrome时，服务工作人员似乎无法使用 .
我已经通过android上的usb-debugging进行了一些调试，它没有为workbox-background-sync显示indexdb数据库，但它确实用于预缓存 . 有任何想法吗？
服务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编写的，如上所述 . 它位于同一个Web主机上的文件夹中，名为api /
1 回答
iOS上的服务工作者除了（预）缓存资产之外不支持很多功能 .
至于Android支持的功能，您是否确保已满足PWA的标准 . 查看此链接以确保您符合条件https://developers.google.com/web/fundamentals/app-install-banners/#criteria