代码之家 › 专栏 › 技术社区 › Keithers

Workbox后台同步在移动设备上不起作用

background-sync workbox service-worker

Keithers · 技术社区 · 5 年前

我有一个用angular编写的应用程序前端,打算在我们家附近的iPad上使用。后端是在常规web主机上运行的PHP构建api。当我使用Workbox注册服务人员时,它在桌面上工作得非常好。我能够在桌面Chrome上完美地使用背景同步。当我转到Android版的Chrome或iOS版的Chrome时,服务人员似乎不起作用。

我在android上通过usb调试做了一些调试,它没有显示用于workbox后台同步的indexdb数据库,但它显示用于预缓存的indexdb数据库。有什么想法吗?

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

 "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 回复 | 直到 5 年前

oninross 5 年前

iOS上的服务人员不支持(预)缓存资产以外的其他很多功能。

至于安卓系统支持的功能,您是否已确保满足PWA工作的标准。查看此链接以确保您符合标准 https://developers.google.com/web/fundamentals/app-install-banners/#criteria