Angularでは、サービスワーカーをローカルに実行する方法

私はPWAを作るために釣りのベストプラクティスを続けています。生産ビルド（ng build --prod --aot）を作成した後、私はlocalhost：http-server -p 8080 -c-1 distを使って、arghularを使って、navigator.serviceWorker.ready.then(function(swRegistration) { console.log('swReady'); });の距離からサービスワーカーを実行しています。

_ [somebode] _

何も起こらず、SWが角度と通信していないようです。リモートサーバーを操作する（DISTのアップロード）は機能します。問題がng serveで機能しないのは問題であるようです。私は何が悪いのですか？

angularservice-workerprogressive-web-appsangular-service-worker

2019/04/29Yuvals

注：これはイオンの下でAngularに基づいています。プレーンAngularいくつかの経路が異なる（例えば、www - > dist）、「イオン」の代わりに 'ng'コマンドを使用する必要があるので、それに応じて調整します。

ステップ0 @ angular/pwaを追加すると、プロダクションで使用されるサービスワーカーが作成されます（そのためのその他の命令を参照）。

ステップ1. Debug Buildでサービスワーカーの使用を有効にします。通常、SWは製造のためだけに有効にされる。ファイルsrc/app/app.module.tsでは、2つの実装のうちの1つがtrueに変更されます（または、プロパティ 'userservereworder'への "environment.ts 'ファイルと' environment.production.ts 'ファイルを追加し、後で" True'の両方に設定できます。デバッグが行われると、 'false'環境.tsファイルの設定のみを変更する必要があります）：

  imports: [ ...
-    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
+    ServiceWorkerModule.register('ngsw-worker.js', { enabled: true }),
  ],

また

  imports: [ ...
    ServiceWorkerModule.register('ngsw-worker.js'),
  ],
  providers: [ ...
-    { provide: SwRegistrationOptions, useFactory: () => ({ enabled: environment.production }) },
+    { provide: SwRegistrationOptions, useFactory: () => ({ enabled: true }) },

ステップ2. package.jsonファイルの「スクリプト」にフックを追加します。それらは「ngsw.json」ファイルとSWがファイルを正しくロードできるようにすることを確実にすることを目的としています。

{
    "scripts": { ...
+        "ionic:serve:before": "...(anything already there)... && echo {} > src/ngsw.json && cp www/ngsw.json src/ngsw.json",
+        "ionic:build:after":"...(anything already there)... && npm run ngsw:rebuild",
+        "postbuild": "...(anything already there)... && npm run ngsw:rebuild",
+        "ngsw:rebuild": "ngsw-config www ngsw-config.json && cp www/ngsw.json src/ngsw.json",

ionic serveをそのファイルを選択するには、プリビルドステップで空白のファイルsrc/ngsw.jsonを追加し、wwwフォルダから計算されたハッシュをコピーしようとします。「イオンサービス」が失敗した場合は、必ず「イオンビルド」を最初に実行してください。私はこのステップがiffyですが、より良いフックはありません。 'NG Serve'では、そのオープン機能要求があります。

'src/ngsw.json'が作成/生成されて以来、それはソース管理/ gitの下にあるべきであるので、 '/src/ngsw.json'を '.gitignore'ファイルに追加してください。

ステップ3.サービスワーカーのソースと設定をデバッグビルドに追加します。ファイルに行を追加するangular.jsonこれをwww /（プロダクションビルドを自動的に行うと、これはデバッグビルド中にコピーします）をコピーします。

{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "options": {
            "assets": [
+              {
+                "glob": "ngsw-worker.js",
+                "input": "node_modules/@angular/service-worker",
+                "output": "."
+              },
+              "src/ngsw.json",
...

ステップ4.デバッグバージョンを構築する（NGSW.JSONで現在のハッシュを保証）、次にHTTPSでサービスを提供します。 'Ionic Serve'は--SSLと - 外部のオプションを持っています（ - 外部alは、例えばアプリを開くことを可能にします。電話）：

ionic build

ionic ssl generate ;# creates SSL certs in .ionic/ssl/: cert.pem and key.pem
ionic serve --external --ssl

もう1つのオプションは、シングルページアプリケーション（SPA）のSSLとプロキシを実行できる適切なHTTPサーバーを使用することです。プロキシとSSLオプションが混在している場合は、パッケージ 'HTTP-Server'はうまく機能しませんので、e.gを使用します。代わりに 'local-web-server'：

npm install -g local-web-server
ws -p 8100 --cert .ionic/ssl/cert.pem --key ,ionic/ssl/key.pem --https --spa index.html --directory www

ステップ5.ブラウザCAリストに証明書を追加します。 Chrome（または他のブラウザのGoogle It）には、次の手順を使用してください。

https://www.nullalo.com/en/chrome-how-to-install-signed-ssl-certificates/

終わり！ Chromeを開き、https：// localhost：8100に移動し、ロードされたサービスワーカーのコンソールを参照してください。コンソールにエラーがある場合は、前の手順 - フレームワークが迅速に変更され、すでに異なる場合があります。

2021/02/08iva2k

TIMKVUの回答をサポートしていない他のブラウザを使用したい場合は、ソリューションはNGROKを使用することです（ https://ngrok.com ）

使用しているサーバーに安全なトンネルを設定します。あなたはそれを使って実行します：

NGROK HTTP 4200

画面に表示されているドメインに接続するだけです。

2019/06/14PeterS