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

元數據版本不匹配爲什麼這個錯誤？

來源

2017-10-12 user3541485

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

@ MartinNuc我嘗試從上面的鏈接，但我在控制檯中出現以上錯誤。你有什麼主意嗎？ – user3541485

@MartinNuc我還是很困惑。我對這個配置沒有任何清晰的認識 – user3541485

當研究使用該服務人員庫（如2017年10月），我看到了文件弱，與所有的大牌球員，這似乎是幾個例子的投訴，

我選擇了針線，因爲它標榜爲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），您應該在控制檯中看到一條消息，確認服務人員已註冊。

來源

2017-10-25 11:20:07

Angular 4在Web應用程序中啓用服務工作者

回答

相關問題