3

我已经安装了 workbox-cli 并且除了默认设置之外，在文件中添加了一个小脚本package.json并调用命令workbox generate:sw 来生成sw.js我刚刚运行的文件npm run generate-sw，然后这给了我sw.js包含所有文件和修订的文件。我在底部的 index.html 中添加了检查和运行服务工作者的脚本

  <script>
  if ('serviceWorker' in navigator && 'PushManager' in window) {
  // console.log('Service Worker and Push is supported');

  navigator.serviceWorker.register('src/sw.js')
  .then(function(swReg) {
    console.log('Service Worker is registered', swReg);
    // swRegistration = swReg;
  })
  .catch(function(error) {
    console.error('Service Worker Error', error);
  });
} else {
  console.warn('Push messaging is not supported');
  // pushButton.textContent = 'Push Not Supported';
}

当我运行 Angular 应用程序时，它会构建所有文件并总是给出错误Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script 我已经更改swDest但workbox-cli-config无法让它添加sw.js文件。我是否错过了 Angular 正在做的事情？

我也尝试将脚本放入main.ts并尝试在那里注册，但仍然出现相同的错误。

Workbox 看起来很简单！

4

1 回答 1

2

我将与 Angular 6 CLI 分享我的工作版本。
这是我的workbox-config.js：

module.exports = {
  "globDirectory": "dist/app",
  "globPatterns": [
    "**/*.{txt,ico,html,js,css,jpg,png,gif,svg}"
  ],
  "swDest": "dist\\app\\sw.js",
  "swSrc": "sw-src.js",
  "maximumFileSizeToCacheInBytes": 52428800
};

我在我的注册服务工作者main.ts 

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(() => registerServiceWorker())
  .catch(err => console.log(err));

function registerServiceWorker() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
      .register('/sw.js')
      .then(reg => {
        console.log('[App] Successful service worker registration', reg);
        if (!navigator.serviceWorker.controller) {
          console.log('controller is not ready. reloading');
          location.reload();
        }
      })
      .catch(err =>
        console.error('[App] Service worker registration failed', err)
      );
  } else {
    console.error('[App] Service Worker API is not supported in current browser');
  }
}

sw-src.js位于根文件夹中，与以下级别相同workbox-config.js：

importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.5.0/workbox-sw.js");
workbox.precaching.precacheAndRoute([]);
workbox.routing.registerNavigationRoute('/index.html');

这就是我运行应用程序的方式。请注意，我使用 http-server 来服务它。 

"start:sw": "ng build && workbox injectManifest && cd dist/app && http-server -c-1 -cors"
于 2018-09-20T10:39:33.543 回答