を修正しました

最近リリースhow-to article and video GazthubページへのBlazor WASMの展開このコンテンツでは、手動で自動的にGithubのアクションを使用してGithubページにBlazor WASMを展開する方法を示しましたが、私はPWA機能を有効にしていませんでした.ブレイズまたはWASMアプリケーションを作成すると、--pwa PWAサポートを含むフラグ.
サービスワーカーはすべてのファイルに完全性チェックを要求します、そして、それらのハウツーはインデックスのベースタグです.HTMLファイルが変更されました.この変更は、サービスワーカー資産に格納されている事前に計算されたハッシュのために完全性チェックが失敗する原因になります.インデックス.HTMLミスマッチ.結果は以下のエラーでした.

Service worker: Install
Failed to find a valid digest in the 'integrity' attribute for resource 'http://YOURURL/index.html' with computed SHA-256 integrity 'sYKnuzlqE606K8G3ejaHYO2arpP3AQOjtIDxiCzAKyA='. The resource has been blocked.
Unknown error occurred while trying to verify integrity.
service-worker.js:1 Uncaught (in promise) TypeError: Failed to fetch

この問題は、サービスワーカーの資産に記載されているファイルに変更が加えられた場合に表面化します.jsファイル.サービス労働者資産JPファイルは、発行中に発行され、公開されたファイルに対して行われた変更内容が発生します.

解決策
Microsoft's documentation この問題を検出しトラブルシューティングする方法に関するいくつかのガイダンスがあります.あなたにはオプションがありますdisable the integrity checking altogether , しかし、あなたは完全性チェックによって提供される安全保証を失います.
また、すべての変更されたファイルの新しいハッシュを計算し、サービスワーカーの資産を更新できます.jsファイル.これらのPowerShellコマンドでハッシュを計算できます.

$Signature = Get-FileHash -Path "path/to/your/file" -Algorithm SHA256
$SignatureBytes = [byte[]] -split ($Signature.Hash -replace '..', '0x$& ')
$SignatureBase64 = [System.Convert]::ToBase64String($SignatureBytes)
$NewHash = "sha256-$SignatureBase64"
Write-Host $NewHash

また、OpenSSLを使用してbashのハッシュを生成できます.

echo "sha256-$(openssl dgst -sha256 -binary \\path\\to\\your\\file | openssl base64 -A)"

手動で各ファイルを行って、サービスワーカーの資産のハッシュを更新します.JSファイルは辛いことがありますので、ここではPowerShellスクリプトとBASHスクリプトがサービスワーカーの資産に記載されているすべてのファイルを反復処理します.js
ハッシュが異なるならば、ハッシュはサービスワーカー資産で自動的に更新されます.js
パワーシェル:

# make sure you're in the wwwroot folder of the published application
$JsFileContent = Get-Content -Path service-worker-assets.js -Raw
# remove JavaScript from contents so it can be interpreted as JSON
$Json = $JsFileContent.Replace("self.assetsManifest = ", "").Replace(";", "") | ConvertFrom-Json
# grab the assets JSON array
$Assets = $Json.assets
foreach ($Asset in $Assets) {
  $OldHash = $Asset.hash
  $Path = $Asset.url

  $Signature = Get-FileHash -Path $Path -Algorithm SHA256
  $SignatureBytes = [byte[]] -split ($Signature.Hash -replace '..', '0x$& ')
  $SignatureBase64 = [System.Convert]::ToBase64String($SignatureBytes)
  $NewHash = "sha256-$SignatureBase64"

  If ($OldHash -ne $NewHash) {
    Write-Host "Updating hash for $Path from $OldHash to $NewHash"
    # slashes are escaped in the js-file, but PowerShell unescapes them automatically,
    # we need to re-escape them
    $OldHash = $OldHash.Replace("/", "\/")
    $NewHash = $NewHash.Replace("/", "\/")
    $JsFileContent = $JsFileContent.Replace("""$OldHash""", """$NewHash""")
  }
}

Set-Content -Path service-worker-assets.js -Value $JsFileContent -NoNewline

バッシュ

#!/bin/bash
# make sure you're in the wwwroot folder of the published application
jsFile=$(<service-worker-assets.js)
# remove JavaScript from contents so it can be interpreted as JSON
json=$(echo "$jsFile" | sed "s/self.assetsManifest = //g" | sed "s/;//g")
# grab the assets JSON array
assets=$(echo "$json" | jq '.assets[]' -c)
for asset in $assets
do
  oldHash=$(echo "$asset" | jq '.hash')
  #remove leading and trailing quotes
  oldHash="${oldHash:1:-1}"
  path=$(echo "$asset" | jq '.url')
  #remove leading and trailing quotes
  path="${path:1:-1}"
  newHash="sha256-$(openssl dgst -sha256 -binary $path | openssl base64 -A)"

  if [$oldHash != $newHash]; then
    # escape slashes for json
    oldHash=$(echo "$oldHash" | sed 's;/;\\/;g')
    newHash=$(echo "$newHash" | sed 's;/;\\/;g')
    echo "Updating hash for $path from $oldHash to $newHash"
    # escape slashes second time for sed
    oldHash=$(echo "$oldHash" | sed 's;/;\\/;g')
    jsFile=$(echo -n "$jsFile" | sed "s;$oldHash;$newHash;g")
  fi
done

echo -n "$jsFile" > service-worker-assets.js

現在の作業ディレクトリ(CWD)は、発行されたアプリケーションのWWWRootフォルダーにある必要があります.現在、これらのスクリプトをビルドプロセスまたは連続的な統合パイプラインに統合できますthis GitHub Actions workflow :

name: Deploy to GitHub Pages

# Run workflow on every push to the master branch
on:
  push:
    branches: [pwa]

jobs:
  deploy-to-github-pages:
    # use ubuntu-latest image to run steps on
    runs-on: ubuntu-latest
    steps:
    # uses GitHub's checkout action to checkout code form the master branch
    - uses: actions/checkout@v2

    # sets up .NET Core SDK 5.0.101
    - name: Setup .NET Core SDK
      uses: actions/setup-dotnet@v1
      with:
        dotnet-version: 5.0.101

    # publishes Blazor project to the release-folder
    - name: Publish .NET Core Project
      run: dotnet publish BlazorGitHubPagesDemo.csproj -c Release -o release --nologo

    # changes the base-tag in index.html from '/' to 'BlazorGitHubPagesDemo' to match GitHub Pages repository subdirectory
    - name: Change base-tag in index.html from / to BlazorGitHubPagesDemo
      run: sed -i 's/<base href="\/" \/>/<base href="\/BlazorGitHubPagesDemo\/" \/>/g' release/wwwroot/index.html

    # changes the base-tag in index.html from '/' to 'BlazorGitHubPagesDemo' to match GitHub Pages repository subdirectory
    - name: Fix service-worker-assets.js hashes
      working-directory: release/wwwroot
      run: |
        jsFile=$(<service-worker-assets.js)
        # remove JavaScript from contents so it can be interpreted as JSON
        json=$(echo "$jsFile" | sed "s/self.assetsManifest = //g" | sed "s/;//g")
        # grab the assets JSON array
        assets=$(echo "$json" | jq '.assets[]' -c)
        for asset in $assets
        do
          oldHash=$(echo "$asset" | jq '.hash')
          #remove leading and trailing quotes
          oldHash="${oldHash:1:-1}"
          path=$(echo "$asset" | jq '.url')
          #remove leading and trailing quotes
          path="${path:1:-1}"
          newHash="sha256-$(openssl dgst -sha256 -binary $path | openssl base64 -A)"

          if [$oldHash != $newHash]; then
            # escape slashes for json
            oldHash=$(echo "$oldHash" | sed 's;/;\\/;g')
            newHash=$(echo "$newHash" | sed 's;/;\\/;g')
            echo "Updating hash for $path from $oldHash to $newHash"
            # escape slashes second time for sed
            oldHash=$(echo "$oldHash" | sed 's;/;\\/;g')
            jsFile=$(echo -n "$jsFile" | sed "s;$oldHash;$newHash;g")
          fi
        done

        echo -n "$jsFile" > service-worker-assets.js

    # copy index.html to 404.html to serve the same file when a file is not found
    - name: copy index.html to 404.html
      run: cp release/wwwroot/index.html release/wwwroot/404.html

    # add .nojekyll file to tell GitHub pages to not treat this as a Jekyll project. (Allow files and folders starting with an underscore)
    - name: Add .nojekyll file
      run: touch release/wwwroot/.nojekyll

    - name: Commit wwwroot to GitHub Pages
      uses: JamesIves/[email protected]
      with:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        BRANCH: gh-pages
        FOLDER: release/wwwroot

うまくいけば、これは役立つといくつかの貴重な時間、歓声を節約!