首页 文章

Angular 4在Web应用程序中启用服务工作者

提问于
浏览 次
0

我是角度4的新人 . 我正在使用angular 4开发应用程序 . 我需要使用服务工作者启用脱机功能 .

npm i @angular/service-worker --S

我试过上面的包，但它不工作我不知道这个服务工作者需要做什么配置 . 任何人请帮助我!!

我使用了角度服务工作者，我在控制台中遇到以下错误 .

错误中的错误：模块 C:/projectfolder/node_modules/@angular/service-worker/service-worker.d.ts, found version 4, expected 3, resolving symbol AppModule in C:/projectfolder/src/app/app.module.ts, resolving symbol AppModule in C:/projectfolder/src/app/app.module.ts, resolving symbol AppModule in C:/projectfolder/src/app/app.module.ts 的元数据版本不匹配

为什么这个错误？

angular service-worker

1 回答

  • 0

    在研究使用哪个服务工作者库时（截至2017年10月），我看到了关于文档较差的投诉以及所有大型参与者的一些例子，似乎是

    我选择使用Workbox，因为它被称为sw-precache sucessor（所有报告实际上都在使用并且正在使用中）并且提供了比@ angular / service-worker更好的文档，它仍然处于起步阶段 .

    To create a service worker using Workbox ，使用workbox-cli（最简单的方法）：

    npm install --save-dev workbox-cli --global
(Accept the defaults and write sw.js to the dist folder)

    然后编辑 main.ts 直到它看起来像这样：

    import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(() => {
    registerServiceWorker('sw');
  })
  .catch(err => console.log(err));

  function registerServiceWorker(swName: string) {
    if (environment.production) {
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker
          .register(`/${swName}.js`)
          .then(reg => {
            console.log('[App] Successful service worker registration', reg);
          })
          .catch(err =>
            console.error('[App] Service worker registration failed', err)
          );
      } else {
        console.error('[App] Service Worker API is not supported in current browser');
      }
    }
  }

    构建您的应用程序以进行生

    ng build --prod && workbox-cli generate:sw

    从Chrome网上应用店安装Chrome Web Server扩展程序，并将其指向您的dist文件夹 . 然后使用Chrome Web Server提供的地址访问它 . 在加载应用程序之前打开控制台（F12），您应该在控制台中看到一条消息，确认服务工作者已注册 .

    回复于

相关问题