0

更新：原来它正在工作，我只需要手动重新启动服务工作者即可再次触发请求。另一个帖子中的持续问题。

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

我已经通过 android 上的 usb-debugging 进行了一些调试，它没有显示用于 workbox-background-sync 的 indexdb 数据库，但它确实用于预缓存。有任何想法吗？

服务工作者.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>

角.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/

4

1 回答 1

1

iOS 上的 Service Worker 不支持除了（预）缓存资产之外的很多功能。

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

于 2018-12-10T05:11:01.460 回答