ОБНОВЛЕНИЕ: Оказалось, что это работает, мне просто нужно было вручную перезапустить работника сервиса для повторного запуска запросов.Текущий вопрос в другом посте.
У меня есть интерфейс приложения, написанный в угловом формате, предназначенный для использования на iPad, расположенных вокруг нашего дома.Бэкэнд - это PHP-API, работающий на обычном веб-хосте.Когда я регистрирую работника сервиса с помощью Workbox, он отлично работает на рабочем столе.Я прекрасно могу использовать фоновую синхронизацию на рабочем столе Chrome.Когда я перехожу на Chrome для Android или Chrome для iOS, сервисный работник кажется неработоспособным.
Я выполнил некоторую отладку через отладку usb на android, и она не показывает базу данных indexdb дляworkbox-background-sync, но это делает для предварительного кэширования.Любые идеи?
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 / на веб-хост.
"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 /