Question

更新：事实证明它正在工作，我只需要手动重新启动服务工作程序即可再次触发请求。另一个帖子中正在进行的问题。

我有一个用角形编写的应用程序前端，打算在我们家附近的iPad上使用。后端是在常规网络主机上运行的PHP构建的api。当我使用Workbox注册服务工作者时，它在桌面上效果很好。我可以在桌面版Chrome上完美使用后台同步。当我移至Android版Chrome或iOS版Chrome时，服务工作者似乎无法正常工作。

我已经通过android上的usb调试完成了一些调试，它没有显示针对workbox-background-sync的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 /文件夹放置在网络主机上。

 "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上的Service Worker不支持很多功能。

关于Android支持的功能，您是否已确保满足PWA起作用的条件。检查此链接以确保您符合条件https://developers.google.com/web/fundamentals/app-install-banners/#criteria

Workbox背景同步无法在移动设备上运行

1 个答案: