Workbox 后台同步不适用于移动设备

Question

更新：事实证明它正在工作，我只需要手动重新启动 service worker 即可再次触发请求。另一个 post 中的持续问题。

我有一个用 angular 编写的应用程序前端，旨在用于我们家附近的 iPad。后端是 PHP 在常规网络主机上构建的 api 运行。当我使用 Workbox 注册服务工作者时，它在桌面上运行良好。我可以在桌面 Chrome 上完美地使用后台同步。当我为 Android 移动到 Chrome 或为 iOS 移动到 Chrome 时，服务人员似乎无法正常工作。

我已经通过 android 上的 usb 调试进行了一些调试，它没有显示 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/ 文件夹放在网络主机上。

 "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/

的文件夹中

Answer 1

iOS 上的服务工作者除了（预）缓存资产外不支持太多功能。

至于Android所支持的功能，你确定你已经满足了PWA工作的条件吗？查看此 link 以确保您已满足条件 https://developers.google.com/web/fundamentals/app-install-banners/#criteria

Workbox 后台同步不适用于移动设备

Workbox Background Sync not Working on Mobile

service-worker

background-sync

workbox