ESP Web Toolsを使用してビルド済バイナリを配布する方法

はじめに

スマートホームの新標準「Matter」のビルド環境を構築するのがそれなりに大変なので、ESP Web Toolsを使用してビルド済バイナリを配布する方法を試してみた。

構成

ビルド環境でビルドしたバイナリファイルをGitHubへPUSHし、GitHub Pagesへ公開します。
ウェブシリアル機能を使用可能なブラウザ(Chrome、Microsoft Edgeなど)からGitHub Pagesへアクセスし、パソコンへ接続したデバイス(M5Stackなど)へウェブシリアル経由でバイナリファイルを書き込みます。

手順

1. index.htmlにESP Web ToolsのJavaScriptを埋め込む

(抜粋)

index.html

<script
  type="module"
  src="https://unpkg.com/esp-web-tools@9.2.0/dist/web/install-button.js?module"
></script>

2. manifest.jsonファイルを作成する

複数のバイナリファイルを配布する場合、フォルダを作成し、その中にmanifest.jsonファイルを作成します。

(サンプル)

manifest.json

{
  "name": "Matter Lighting App Example for ATOM Lite",
  "version": "4088a77",
  "new_install_improv_wait_time": 0,
  "builds": [
    {
      "chipFamily": "ESP32",
      "parts": [
        {
          "path": "bootloader.bin",
          "offset": 4096
        },
        {
          "path": "partition-table.bin",
          "offset": 32768
        },
        {
          "path": "ota_data_initial.bin",
          "offset": 61440
        },
        {
          "path": "chip-lighting-app.bin",
          "offset": 131072
        }
      ]
    }
  ]
}

サンプルサイト

GitHub Pages

警告表示について

左下の「詳細」ボタン→「安全でないこのサイトにアクセス」を選択すると、インストール画面が表示されます。

Netlify

GitHubからNetlifyへデプロイした場合、警告表示はされませんでした。