web-dev-qa-db-ja.com

Angularサービスワーカーとindex.htmlキャッシング

類似の投稿があるが、index.htmlヘッダを使用してCache-Controlをキャッシュする必要がある場合は、クリアアンサーが見つかりません。

私が間違っているなら私を訂正してください、しかし今、私はCache-Control: no-storeをindex.htmlを返して、サービスワーカーが劣化モードになるように強制的なハッシュの不一致エラーを避けています。

CDNサーバーでindex.htmlがキャッシュされているCache-Control: max-age=3600が、キャッシュが期限切れになる前にアプリが更新された場合、ngsw.jsonはindex.htmlに含まれているスクリプトファイルと比較して異なるファイルハッシュを返し、悪いことが起こります。右？

また、明確にするために、私は何人かの人々に気づいていますindex.htmlngsw-config.json（---）を追加し、index.htmlもサービスワーカーの前にロードされているので意味がありません。

angularcachingservice-workercache-controlangular-service-worker
7
Zygimantas

デフォルトでは、index.htmlが含まれています。あなたがそれをマニフェストに含めていないならば、それはファイルの一部になることはありません。マニフェストにない場合（その後NGSW.JSON）の場合、index.htmlへの変更はサービスワーカー内のイベントを起動しません。もちろん、次にサイトをロード/更新すると、新しいindex.htmlがピックアップされます。

あなたがCDNからindex.htmlにサービスを提供している場合は、おそらくそれはあなたが最後の展開上に構築された分布の一部です。正しく計算されるべきです。上記のエリアは、NGSW.JSONでハッシュと一致しないファイルがあるかどうかを理解することが重要です。何らかの理由で、Distro全体を更新せずにindex.htmlを変更している場合、サービスワーカーはファイルが破損していると仮定します。もう一度試してみてください。ファイルはngsw.jsonのハッシュと一致しないので、SWは2番目の試みが破損してシャットダウンされたと仮定します。

私の場合、Azureリソースキーを使用してリリースパイプラインに置き換えられたビルド中にアプリケーションが入っているトークンが含まれているためです。アプリが作成されたとき、ハッシュは正しいです。このリリースでは、トークンの交換が実行された後、My Main * .jsファイルはNGSW.JSONのハッシュ値と一致しませんでした。私がそれを修正することを選んだ方法は、PowerShellステップを追加し、ハッシュを再計算することでした。実際のファイル名はユニークなハッシュを持っている間に注意することが重要ですか？コードが埋め込まれている、サービスワーカーが機能するのを修正する必要はありません。ファイル名/ハッシュキー/値のペアは有効なファイルを指す必要があり、そのファイルのSHA1ハッシュはNGSW.JSONにあるものと一致しなければなりません。私が書いたスクリプトは、ハッシュのコンパイル後の検証/修正を行うために書いたスクリプトは以下の通りです。 Distror全体とは無関係にindex.htmlを更新するプロセスがある場合は、このスクリプトを使用してNGSW.JSONを更新し、それをindex.htmlプッシュに含めます。

注:

  • スクリプトは3つのパラメータを受け入れます。彼らが通過していない場合、それは次のように仮定します：[.____]。
    • スクリプトはangularプロジェクトのルートから実行されています
    • 作業ディレクトリは"./dist"（チェックされるスクリプトがある場合）です。
    • 入力パスは"<working_dir>/ngsw.json"です
    • 出力パスは"<working_dir>/ngsw_out.json"です
  • ファイルを変更する場合は、必ず同じ入力パスと出力パスを指定してください。
  • aZDOにこれを入れる場合は、「PowerShell Coreを使用する」チェックボックスを確認する必要があります。

PowerShellスクリプトが始まります。

param([string]$working_path = "./dist"
  , [string]$input_file_path = "$working_path/ngsw.json"
  , [string]$output_file_path = "$working_path/ngsw_out.json")

"Checking for existence of hash script..."

$fileExists = Test-Path -Path $input_file_path

if ($fileExists) {
  "Service Worker present.  Beginning hash reconciliation."
  ""
  $files_to_calc = @()
  $ngsw_json = (Get-Content $input_file_path -Raw) | ConvertFrom-Json

  "-----------------------------------------"
  "Getting list of javascript files to check"
  "-----------------------------------------"
  $found_count = 0
  for ($idx = 0; $idx -lt $ngsw_json.hashtable.psobject.properties.name.count; $idx++) {
    $current_file = $ngsw_json.hashtable.psobject.properties.name[$idx]
    if ($current_file.Contains(".js")) {
      $files_to_calc += $current_file
      "   File {$idx} $($files_to_calc[-1]) found."
      $found_count++
    }
  }

  "---------------------------------------"
  "$($files_to_calc.count) files to check."
  "---------------------------------------"
  $replaced_count = 0
  $files_to_calc | ForEach-Object {
    $new_hash_value = (Get-FileHash -Algorithm SHA1 "$($working_path)$_").Hash.ToLower()
    $current_hash_value = $ngsw_json.hashTable.$_
    $current_index = [array]::IndexOf($ngsw_json.hashTable.psobject.properties.name, $_)
    $replaced = $false

    if ($ngsw_json.hashTable.$_ -ne $new_hash_value) {
      $ngsw_json.hashTable.$_ = "$new_hash_value"
      $replaced = $true
      $replaced_count++
    }

    "$($replaced ? '** ' : '   '){$current_index}:$_ --- Current Value: " +
    "$($current_hash_value.substring(0, 8))... New Value: " +
    "$($new_hash_value.substring(0, 8))..."

  }
  ""
  "--> Replaced $replaced_count hash values"

  $ngsw_json | ConvertTo-Json -depth 32 | set-content "$output_file_path"
}
else {
  "Service Worker missing.  Skipping."
}
1
Tom Marks