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

问题描述：

我是angular 4中的新成员。我正在使用angular 4开发应用程序。我需要使用服务工作人员启用脱机功能。Angular 4在Web应用程序中启用服务工作者

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

元数据版本不匹配为什么这个错误？

看看这篇文章：https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7 –

@ MartinNuc我尝试从上面的链接，但我在控制台中出现以上错误。你有什么主意吗？ – user3541485

@MartinNuc我还是很困惑。我对这个配置没有任何清晰的认识 – user3541485

答

当研究使用该服务人员库（如2017年10月），我看到了文件弱，与所有的大牌球员，这似乎是几个例子的投诉，

@angular/service-worker
sw-precache
Workbox

我选择了针线，因为它标榜为SW-预缓存sucessor（其中所有代表orts实际上已经运行并且正在使用中）并且提供了更好的文档，而这种文档似乎还处于起步阶段。

若要使用针线服务工作者，用针线-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服务器提供的地址访问它。在加载您的应用程序之前打开控制台（F12），您应该在控制台中看到一条消息，确认服务人员已注册。

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

相关推荐