UPDATE: Turns out it was working, I just needed to manually restart the service worker for the requests to be fired again. On-going issue in another post.
I have an application front end written in angular, intended to be used on iPads located around our home. The backend is a PHP built api running on a regular web-host. When I register a service worker using Workbox, it works great on desktop. I'm able to use background sync on desktop Chrome perfectly. When I move over to Chrome for Android or Chrome for iOS, the service worker appears to non functional.
I've done some debugging through the usb-debugging on android and it doesn't show the indexdb database for workbox-background-sync but it does for the pre-caching. Any ideas?
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 (main project index.html not component):
<!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"
}
I build with "npm run dist" then place the dist/ folder on a web-host.
"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"
The API that handles the database queries is written in PHP as mentioned. It sits in a folder on the same web-host called api/
Service workers on iOS doesnt support much functionality other than (pre) caching assets.
As for the functionalities supported by Android, have you made sure that you have met the criteria for the PWA to work. Check out this link to make sure that you have met the criteria https://developers.google.com/web/fundamentals/app-install-banners/#criteria