5

workbox-build-2.1.2 と workbox-sw-2.1.2 を Angular-cli-1.6.0 で使用していますが、すべて正常に動作しますが、アプリを更新して本番用にビルドすると、sw.js ファイルが変更されますその後、クロムブラウザでは、サービスワーカーは更新されず、手動で登録解除するまで古いバージョンを使用し続けます。新しいsw.jsファイルをインストールしないでください。新しいバージョンをインストールすると、サイトの古いデータがキャッシュされ、新しいスレートが自動的に開始されますか、それともその部分を設定する必要がありますか?.

Angulars メイン ファイルに sw.js を登録する方法は次のとおりです。

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

function registerServiceWorker() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
      .register('sw.js')
      .then(reg => {
        log('Registration successful', reg);
        reg.onupdatefound = () => {
          const installingWorker = reg.installing;
          installingWorker.onstatechange = () => {
            switch (installingWorker.state) {
              case 'installed':
                if (navigator.serviceWorker.controller) {
                  log('New or updated content is available', installingWorker);
                } else {
                  log('Content is now available offline', installingWorker);
                }
                break;
              case 'redundant':
                console.error('The installing service worker became redundant', installingWorker);
                break;
              default:
                log(installingWorker.state);
                break;
            }
          };
        };
      })
      .catch(e => {
        console.error('Error during service worker registration:', e);
      });
  } else {
    console.warn('Service Worker is not supported');
  }
}

npm で実行する generate-sw ファイル

const workboxBuild = require('workbox-build');
const SRC_DIR = 'src';
const BUILD_DIR = 'public';
const SW = 'sw.js';
const globPatterns = [
  "**/*.{ico,html,css,js,woff,json}"
];

const globIgnores = [
  "sw.js"
];

const input = {
  swSrc: `${SRC_DIR}/${SW}`,
  swDest: `${BUILD_DIR}/${SW}`,
  globDirectory: BUILD_DIR,
  globPatterns: globPatterns,
  globIgnores: globIgnores,
  maximumFileSizeToCacheInBytes: 4000000
};

workboxBuild.injectManifest(input).then(() => {
  console.log(`The service worker ${BUILD_DIR}/${SW} has been injected`);
});

およびベースの sw.js ファイル

importScripts('workbox-sw.prod.v2.1.2.js');

const workboxSW = new self.WorkboxSW({clientsClaim: true});

workboxSW.precache([]);

workboxSW.router.registerNavigationRoute('/index.html');

*****アップデート*****

開発サーバーに Express.js を使用して Cache-Control をゼロに設定し、ページをリロードすると Service Worker が新しいバージョンに更新されます。サービスワーカーが更新するのにどれくらいの時間がかかるか、それとも手動で行う必要がありますか?

エクスプレスのコードは次のとおりです。

app.use('/', express.static(publicFolderPath, {maxAge: 0}));
app.get('*', (req, res) => {
  res.sendFile('index.html');
});
4

1 に答える 1