このページは Cloud Translation API によって翻訳されました。

プログレッシブウェブアプリを段階的に強化する

最新のブラウザ向けに構築し、2003 年と同様に段階的に機能を強化

Thomas Steiner

2003 年 3 月、Nick Finck と Steve Champeon はウェブデザインの世界を驚かせましたコンセプトをプログレッシブエンハンスメントウェブページの主要なコンテンツを最初に読み込むことに重点を置いたウェブデザイン戦略です。それから徐々に技術的に厳密なレイヤからなるプレゼンテーションと機能をコンテンツの上に重ねています一方、2003 年の段階的な拡張は、当時としては CSS 機能、目立たない JavaScript、さらには拡張可能なベクターグラフィックなどです。 2020 年以降の漸進的な機能強化では、最新のブラウザ機能。

漸進的な機能強化による将来を見据えたインクルーシブなウェブデザイン。フィンクとチャンピオンの元のプレゼンテーションのタイトルスライド。 — </ph> スライド: プログレッシブエンハンスメントによる将来を見据えたインクルーシブなウェブデザイン。（出典）。

をご覧ください。

サンプルアプリ: Fugu Greetings

この記事では、 Fugu 挨拶（GitHub）。このアプリは、ウェブにすべてを費やす取り組み、Project Fugu 🐡? へのヒントとなっています Android/iOS/デスクトップアプリケーションの機能を最大限に活用できます。プロジェクトについて詳しくは、ランディングページ。

Fugu Greetings はお絵かき用のお絵かきアプリです共有できます具体例は PWA の基本コンセプトです。信頼性が高く、完全にオフラインが有効になっているため、使用できるわけではありません。また、インストール可能で、オペレーティングシステムとシームレスに統合し、スタンドアロンアプリケーションとして利用できます。

PWA コミュニティのロゴに似た図形描画が表示されている Fugu Greetings PWA。 — </ph> Fugu Greetings サンプルアプリ。

プログレッシブエンハンスメント

では、プログレッシブエンハンスメントについて説明します。 MDN Web ドキュメントの用語集では定義次のようなコンセプトです。

プログレッシブエンハンスメントは、できる限り多くのユーザーに重要なコンテンツと機能を提供し、可能な限り最良のエクスペリエンスを必要なすべてのコードを実行できるブラウザです。

機能検出ブラウザが最新の機能に対応できるかどうかを判断するために使用されます。ポリフィルはは、JavaScript で不足している機能を追加するためによく使用されます。

[…]

プログレッシブエンハンスメントは、ウェブデベロッパーが優れたウェブサイトを開発し、ウェブサイトを機能させながら、複数の不明なユーザーエージェントに対応できます。グレースフルデグラデーション関連性はあるものの同じものではなく、逆の方向に進んでいると見なされることもよくありますプログレッシブエンハンスメントに発展します。実際には、どちらのアプローチも有効であり、多くの場合、互いに補完し合うことができます。
MDN のコントリビューター

グリーティングカードを最初から作成することは、とても面倒な作業です。では、ユーザーがイメージをインポートして、そこから開始できる機能がないのではないでしょうか。従来のアプローチでは、 <input type=file> これを行いますまず、要素を作成して type を 'file' に設定し、MIME タイプを accept プロパティに追加します。次にプログラムによって変更をリッスンします画像を選択すると、キャンバスに直接インポートされます。

const importImage = async () => {
  return new Promise((resolve) => {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.addEventListener('change', () => {
      resolve(input.files[0]);
    });
    input.click();
  });
};

import 機能があるのに export 機能も用意するのが一般的であるメッセージをローカルに保存できるようにしますファイルを保存する従来の方法は、アンカーリンクを作成することです。 download を使用属性で示し、href として blob URL を指定します。またプログラマティックにダウンロードがトリガーされます。メモリリークを防ぐために、blob オブジェクトの URL を必ず取り消すようにしてください。

const exportImage = async (blob) => {
  const a = document.createElement('a');
  a.download = 'fugu-greeting.png';
  a.href = URL.createObjectURL(blob);
  a.addEventListener('click', (e) => {
    setTimeout(() => URL.revokeObjectURL(a.href), 30 * 1000);
  });
  a.click();
};

でもちょっと待って。「ダウンロード」していないのがグリーティングカード、「保存済み」できます。「保存」というメッセージがダイアログでファイルの配置先を選択できます。ユーザーの操作なしでブラウザがグリーティングカードを直接ダウンロードしたダウンロードフォルダにありますあまり良くありません。

もっと良い方法があったら？ローカルファイルを開いて編集し、変更を保存するとしたらどうでしょうか。新しいファイルに戻すか最初に開いた元のファイルに戻すかですあることがわかりました。File System Access API ファイルを開いて作成したり、変更して保存することもできます。

API を機能検出するにはどうすればよいでしょうか。 File System Access API は、新しいメソッド window.chooseFileSystemEntries() を公開します。そのため、このメソッドが使用可能かどうかに応じて、異なるインポートモジュールとエクスポートモジュールを条件付きで読み込む必要があります。その方法については下記をご覧ください。

const loadImportAndExport = () => {
  if ('chooseFileSystemEntries' in window) {
    Promise.all([
      import('./import_image.mjs'),
      import('./export_image.mjs'),
    ]);
  } else {
    Promise.all([
      import('./import_image_legacy.mjs'),
      import('./export_image_legacy.mjs'),
    ]);
  }
};

File System Access API の詳細に入る前に、段階的な拡張のパターンを簡単に紹介します File System Access API を現在サポートしていないブラウザでは、以前のスクリプトを読み込みます。 Firefox と Safari のネットワークタブを以下に示します。

以前のファイルが読み込まれていることを示す Safari ウェブインスペクタ。 — </ph> Safari Web Inspector の [ネットワーク] タブ

以前のファイルが読み込まれることを示す Firefox デベロッパーツール。 — </ph> Firefox デベロッパーツールの [ネットワーク] タブ。

ただし、Chrome（API をサポートするブラウザ）では、新しいスクリプトのみが読み込まれます。これは、動的 import(): すべての最新ブラウザサポートをご覧ください。先ほども言いましたが、最近は草がかなり緑色です。

最新のファイルが読み込まれている Chrome DevTools。 — </ph> Chrome DevTools の [ネットワーク] タブ。

File System Access API

問題に対処できたので、次は File System Access API に基づく実際の実装を見ていきます。画像をインポートするには、window.chooseFileSystemEntries() を呼び出します。そして、画像ファイルが必要なことを示す accepts プロパティを渡します。ファイル拡張子と MIME タイプの両方がサポートされています。これにより、ファイルハンドルが返され、getFile() を呼び出して実際のファイルを取得できます。

const importImage = async () => {
  try {
    const handle = await window.chooseFileSystemEntries({
      accepts: [
        {
          description: 'Image files',
          mimeTypes: ['image/*'],
          extensions: ['jpg', 'jpeg', 'png', 'webp', 'svg'],
        },
      ],
    });
    return handle.getFile();
  } catch (err) {
    console.error(err.name, err.message);
  }
};

イメージのエクスポート方法はほぼ同じですが、今回は 'save-file' の型パラメータを chooseFileSystemEntries() メソッドに渡す必要があります。ファイル保存ダイアログが表示されます。ファイルを開いている場合、'open-file' がデフォルトであるため、この操作は必要ありません。以前と同様に accepts パラメータを設定しますが、今回は PNG 画像のみに限定しています。ファイルハンドルは返されますが、今回は、createWritable() を呼び出して書き込み可能なストリームを作成します。次に、グリーティングカードの画像である blob をファイルに書き込みます。最後に、書き込み可能なストリームを閉じます。

ディスクの空き容量不足や書き込みまたは読み取りエラーが発生したり、ユーザーがファイルダイアログをキャンセルしたりする可能性があります。そのため、呼び出しを常に try...catch ステートメントでラップしています。

const exportImage = async (blob) => {
  try {
    const handle = await window.chooseFileSystemEntries({
      type: 'save-file',
      accepts: [
        {
          description: 'Image file',
          extensions: ['png'],
          mimeTypes: ['image/png'],
        },
      ],
    });
    const writable = await handle.createWritable();
    await writable.write(blob);
    await writable.close();
  } catch (err) {
    console.error(err.name, err.message);
  }
};

File System Access API によるプログレッシブエンハンスメントの使用前と同じようにファイルを開くことができます。インポートしたファイルはキャンバスに直接描画されます。編集を加えたら、最後に実際の保存ダイアログボックスで保存できます。ファイルの名前と保存場所を選択できますこれで、ファイルを永続的に保持できるようになりました。

ファイルを開くダイアログが表示された Fugu Greetings アプリ — </ph> ファイルを開くダイアログ。

Fugu Greetings アプリにイメージがインポートされるようになりました。 — </ph> インポートされたイメージ。

画像を変更した Fugu Greetings アプリ — </ph> 変更した画像を新しいファイルに保存します。

Web Share API と Web Share Target API

永遠に保管する以外に、グリーティングカードを共有したいと思うかもしれません。これは Web Share API と Web Share Target API を使用すると、モバイル、および最近ではデスクトップオペレーティングシステムに、組み込みの共有機能が導入されているメカニズムです。たとえば、以下は macOS 上のデスクトップ Safari の共有シートが、私のブログ [記事を共有] ボタンをクリックすると、記事へのリンクを友だちと共有できます。 macOS のメッセージアプリなどです。

記事の [共有] ボタンから、macOS でパソコン版の Safari の共有シートがトリガーされる — </ph> macOS のデスクトップ Safari での Web Share API。

これを行うためのコードは非常に簡単です。navigator.share() に電話をかけ、オブジェクトでオプションの title、text、url を渡します。画像を添付したい場合はどうすればよいでしょうかこれは、Web Share API のレベル 1 ではまだサポートされていません。幸いなことに、ウェブ共有レベル 2 にファイル共有機能が追加されています。

try {
  await navigator.share({
    title: 'Check out this article:',
    text: `"${document.title}" by @tomayac:`,
    url: document.querySelector('link[rel=canonical]').href,
  });
} catch (err) {
  console.warn(err.name, err.message);
}

Fugu Greeting card アプリケーションでこれを行う方法をご紹介します。まず、1 つの blob で構成される files 配列を持つ data オブジェクトを準備する必要があります。 title と text の 2 つです。次に、ベストプラクティスとして、新しい navigator.canShare() メソッドを使用します。その名前が示すとおりです。共有しようとしている data オブジェクトを、技術的にはブラウザが共有できるかどうかを示します。 navigator.canShare() からデータを共有可能と表示されたら、すぐに使用できる以前と同様に navigator.share() を呼び出します。すべてが失敗する可能性があるため、ここでも try...catch ブロックを使用します。

const share = async (title, text, blob) => {
  const data = {
    files: [
      new File([blob], 'fugu-greeting.png', {
        type: blob.type,
      }),
    ],
    title: title,
    text: text,
  };
  try {
    if (!(navigator.canShare(data))) {
      throw new Error("Can't share data.", data);
    }
    await navigator.share(data);
  } catch (err) {
    console.error(err.name, err.message);
  }
};

前と同様に、プログレッシブエンハンスメントを使用します。 'share' と 'canShare' の両方が navigator オブジェクトに存在する場合は、次の手順に進みます。動的な import() を使用して share.mjs を読み込む。モバイル版 Safari など、2 つの条件のいずれかしか満たさないブラウザでは読み込まれない説明します。

const loadShare = () => {
  if ('share' in navigator && 'canShare' in navigator) {
    import('./share.mjs');
  }
};

Fugu Greetings では、Android 版 Chrome などの対応ブラウザで [共有] ボタンをタップすると、組み込みの共有シートが開きます。たとえば Gmail を選択すると、メール作成ウィジェットが画像を添付しました。

イメージを共有するさまざまなアプリを示す OS レベルの共有シート。 — </ph> ファイルの共有先アプリを選択します。

画像が添付された Gmail のメール作成ウィジェット。 — </ph> ファイルは Gmail の作成ツールで新しいメールに添付されます。

Contact Picker API

次に、連絡先、つまりデバイスのアドレス帳についてお話ししますまたは連絡先管理ツールアプリを使用していましたグリーティングカードを書くときに、おすすめします。たとえば、友人のサーゲイさんは、自分の名前をキリル文字で表記することを好みます。私はドイツ語の QWERTZ キーボードを使用しているため、名前の入力方法がわかりません。この問題は Contact Picker API で解決できます。スマートフォンの連絡帳アプリに友だちが登録されているので、ウェブの連絡先をタップするだけです

まず、アクセスするプロパティのリストを指定する必要があります。ここでは名前のみを指定します。他のユースケースでは電話番号、メールアドレス、アバターがアイコン、住所。次に、options オブジェクトを構成し、multiple を true に設定して、さらに選択できるようにします。重複していないからです最後に、navigator.contacts.select() を呼び出します。これにより、目的のプロパティが返されます。自動的に有効になります。

const getContacts = async () => {
  const properties = ['name'];
  const options = { multiple: true };
  try {
    return await navigator.contacts.select(properties, options);
  } catch (err) {
    console.error(err.name, err.message);
  }
};

ここまでで、次のパターンを学んできました。 API が実際にサポートされている場合にのみ、ファイルを読み込みます。

if ('contacts' in navigator) {
  import('./contacts.mjs');
}

Fugu Greeting で [連絡先] ボタンをタップして、友だち候補を 2 つ選択します。 сергей оивайлови 日後 Брин、劳伦·爱德摩里"·佩奇、ご覧のとおり、連絡先選択ツールに表示されるのはメールアドレスなどの電話番号などの情報は共有できませんその後、名前がグリーティングカードに描画されます。

アドレス帳の 2 件の連絡先の名前が表示された連絡先選択ツール。 — </ph> アドレス帳の連絡先選択ツールで 2 つの名前を選択する。

グリーティングカードに描画された、以前に選択した 2 つの連絡先の名前。 — </ph> 2 人の名前がグリーティングカードに描画されます。

Asynchronous Clipboard API

次はコピーと貼り付けですソフトウェア開発者が好む操作の 1 つがコピー&ペーストです。私はグリーティングカードの作成者として、ときどき同じことを行いたいことがあります。作成中のグリーティングカードに画像を貼り付けるかメッセージカードをコピーして編集を続けるか、別の場所に移動します Async Clipboard API テキストと画像の両方をサポートしていますコピー&ペーストのサポートを Fugu に追加した方法を見ていきましょう。応答メッセージアプリ。

システムのクリップボードに何かコピーするには、それに書き込む必要があります。 navigator.clipboard.write() メソッドは、クリップボードのアイテムの配列をパラメータを指定します。クリップボードの各アイテムは基本的に、blob を値として持つオブジェクトであり、blob の型は使用します。

const copy = async (blob) => {
  try {
    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
  } catch (err) {
    console.error(err.name, err.message);
  }
};

貼り付けるには、 navigator.clipboard.read()。これは、クリップボードに複数のクリップボードアイテムがある可能性があるためです。トレーニングされます。クリップボードの各アイテムには、利用可能なコンテンツの MIME タイプを示す types フィールドがあります。説明します。クリップボードアイテムの getType() メソッドを呼び出して、以前に取得した MIME タイプ。

const paste = async () => {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      try {
        for (const type of clipboardItem.types) {
          const blob = await clipboardItem.getType(type);
          return blob;
        }
      } catch (err) {
        console.error(err.name, err.message);
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
};

今のところはほぼ言うまでもありません。対応ブラウザでのみ対応しています。

if ('clipboard' in navigator && 'write' in navigator.clipboard) {
  import('./clipboard.mjs');
}

では、これは実際にどのように機能するのでしょうか。macOS プレビューアプリで画像を開いていて、クリップボードにコピーします。 [Paste] をクリックすると、Fugu Greetings アプリからクリップボードのテキストや画像を参照することをアプリに許可するかどうかを指定します。

クリップボードの権限プロンプトを表示する Fugu Greetings アプリ — </ph> クリップボードの権限プロンプト。

最後に、許可が得られたら、画像がアプリケーションに貼り付けます。その逆も同様です。グリーティングカードをクリップボードにコピーします。 [プレビュー] を開いて [ファイル]、[クリップボードから新規作成] の順にクリックします。グリーティングカードは無題の新しい画像に貼り付けられます。

無題の画像を貼り付けたばかりの macOS Preview アプリ。 — </ph> macOS プレビューアプリに貼り付けられた画像。

Badging API

便利な API として、Badging API もあります。 Fugu Greetings にはインストール可能なアプリアイコンがありますアプリドックやホーム画面に配置できます。 Fugu Greetings で API を（誤用）使用すると、楽しく簡単に API のデモを行うことができます。カウンタとして利用できます pointerdown イベントが発生するたびにペンのストロークカウンタをインクリメントするイベントリスナーを追加しました。更新したアイコンバッジを設定しますキャンバスがクリアされると、カウンタがリセットされ、バッジが削除されます。

let strokes = 0;

canvas.addEventListener('pointerdown', () => {
  navigator.setAppBadge(++strokes);
});

clearButton.addEventListener('click', () => {
  strokes = 0;
  navigator.setAppBadge(strokes);
});

この機能は段階的に強化されているため、読み込みロジックは通常と同じです。

if ('setAppBadge' in navigator) {
  import('./badge.mjs');
}

この例では、ペンのストロークを 1 本使用して 1 から 7 までの数字を引いています。割った数値ですアイコンのバッジカウンターが 7 になっています。

グリーティングカードに描画された 1 ～ 7 の数字。それぞれがペンの 1 ストロークで描かれています。 — </ph> 7 本のペンのストロークで 1 から 7 までの数字を描画する。

</ph>

</ph> アプリアイコンバッジの形をしたペンのストロークカウンタ。

Periodic Background Sync API

毎日新しいことを始めるには、 Fugu Greetings アプリの優れた点は、毎朝インスピレーションを与えられることです。グリーティングカードを開始しましょう。アプリが Periodic Background Sync API を使用する必要があります。

最初のステップは、Service Worker の登録に定期的な同期イベントを登録することです。 'image-of-the-day' という同期タグをリッスンします。最小間隔が 1 日の場合これにより、ユーザーは 24 時間ごとに新しい背景画像を取得できるようになります。

const registerPeriodicBackgroundSync = async () => {
  const registration = await navigator.serviceWorker.ready;
  try {
    registration.periodicSync.register('image-of-the-day-sync', {
      // An interval of one day.
      minInterval: 24 * 60 * 60 * 1000,
    });
  } catch (err) {
    console.error(err.name, err.message);
  }
};

2 つ目のステップとして、Service Worker での periodicsync イベントのリッスンを行います。イベントタグが 'image-of-the-day'（以前に登録されたもの）の場合、その日の画像が getImageOfTheDay() 関数によって取得されます。その結果がすべてのクライアントに反映されるため、クライアントはキャンバスとキャッシュです。

self.addEventListener('periodicsync', (syncEvent) => {
  if (syncEvent.tag === 'image-of-the-day-sync') {
    syncEvent.waitUntil(
      (async () => {
        const blob = await getImageOfTheDay();
        const clients = await self.clients.matchAll();
        clients.forEach((client) => {
          client.postMessage({
            image: blob,
          });
        });
      })()
    );
  }
});

繰り返しになりますが、これは段階的な機能強化です。コードが読み込まれるのは API はブラウザでサポートされています。これは、クライアントコードと Service Worker コードの両方に適用されます。非対応ブラウザでは、どちらも読み込まれません。動的な import() ではなく、Service Worker でその手順を確認します。（Service Worker のコンテキストでは、まだ）、従来の importScripts()。

// In the client:
const registration = await navigator.serviceWorker.ready;
if (registration && 'periodicSync' in registration) {
  import('./periodic_background_sync.mjs');
}

// In the service worker:
if ('periodicSync' in self.registration) {
  importScripts('./image_of_the_day.mjs');
}

Fugu Greetings で [Wallpaper] ボタンを押すと、その日のグリーティングカードの画像が表示されます。 Periodic Background Sync API によって毎日更新されます。

今日の新しいグリーティングカードの画像が表示されている Fugu Greetings アプリ。 — </ph> [壁紙] ボタンを押すと、その日の画像が表示されます。

通知トリガー API

インスピレーションがたくさんあるときでも、開始したあいさつを終えるためにちょっとしたきっかけが必要です。この機能は、Notification Triggers API によって有効になります。ユーザーとして、グリーティングカードを完成させるまでの時間を入力できます。指定した時間になると、グリーティングカードが待っていることを知らせる通知が届きます。

目標時刻の入力を求められたらアプリケーションが showTrigger を使用して通知をスケジュール設定する。以前に選択した対象日を含む TimestampTrigger を指定できます。リマインダー通知はローカルでトリガーされるため、ネットワークやサーバー側は必要ありません。

const targetDate = promptTargetDate();
if (targetDate) {
  const registration = await navigator.serviceWorker.ready;
  registration.showNotification('Reminder', {
    tag: 'reminder',
    body: "It's time to finish your greeting card!",
    showTrigger: new TimestampTrigger(targetDate),
  });
}

これまで説明してきた他のすべてと同様これは漸進的な機能強化でありコードは条件付きでのみ読み込まれます

if ('Notification' in window && 'showTrigger' in Notification.prototype) {
  import('./notification_triggers.mjs');
}

Fugu Greetings の [Reminder] チェックボックスをオンにすると、メッセージに返信できます。

Fugu Greetings アプリに、グリーティングカードの作成のリマインダーを受け取るタイミングを尋ねるプロンプトが表示されています。 — </ph> グリーティングカードを完成させるようリマインドするローカル通知をスケジュール設定する。

Fugu Greetings でスケジュール設定された通知がトリガーされると、他の通知と同じように表示されますがネットワーク接続も必要ありませんでした。

Fugu Greetings からのトリガーされた通知を表示している macOS の通知センター。 — </ph> トリガーされた通知が macOS 通知センターに表示されます。

Wake Lock API

Wake Lock API も追加したいです。何か思いつくまで画面をじっと見つめておきたい場合もあるでしょうあなたにキスをする。最悪の場合、画面がオフになることがあります。 Wake Lock API を使用すると、このような事態を回避できます。

最初のステップは、navigator.wakelock.request method() で wake lock を取得することです。画面の wake lock を取得するために文字列 'screen' を渡します。次に、ウェイクロックが解除されたことを通知するイベントリスナーを追加します。これは、タブの公開設定が変更された場合などに発生することがあります。その場合は、タブが再び表示されたときに wake lock を再度取得できます。

let wakeLock = null;
const requestWakeLock = async () => {
  wakeLock = await navigator.wakeLock.request('screen');
  wakeLock.addEventListener('release', () => {
    console.log('Wake Lock was released');
  });
  console.log('Wake Lock is active');
};

const handleVisibilityChange = () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);
document.addEventListener('fullscreenchange', handleVisibilityChange);

はい。これは段階的な機能強化です。ブラウザが開いたときに読み込むだけで済みますサポートしています。

if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {
  import('./wake_lock.mjs');
}

Fugu Greetings には [Insomnia] チェックボックスがあり、オンにすると画面がスリープ解除されます。

不眠のチェックボックスがオンになっていると、画面がスリープ解除されたままになります。 — </ph> [**Insomnia**] チェックボックスをオンにすると、アプリが起動したままになります。

Idle Detection API

何時間も画面を見ていたとしても、これだけでは役に立たず、グリーティングカードの使い方がまったく思いつかなくなります。 Idle Detection API を使用すると、アプリでユーザーのアイドル時間を検出できます。ユーザーが長時間アイドル状態になると、アプリは初期状態にリセットされます。キャンバスをクリアしますこの API は現在、通知権限本番環境のユースケースの多くは通知に関連しているため、たとえば、ユーザーが現在使用しているデバイスにのみ通知を送信できます。

通知権限が付与されていることを確認したら、アイドル状態の検出機能。アイドル状態の変更をリッスンするイベントリスナーを登録します。このリスナーには、ユーザーや、作成します。ユーザーはアクティブでもアイドル状態でも画面のロックまたはロック解除ができます。ユーザーがアイドル状態になると、キャンバスはクリアされます。アイドル検出器のしきい値は 60 秒です。

const idleDetector = new IdleDetector();
idleDetector.addEventListener('change', () => {
  const userState = idleDetector.userState;
  const screenState = idleDetector.screenState;
  console.log(`Idle change: ${userState}, ${screenState}.`);
  if (userState === 'idle') {
    clearCanvas();
  }
});

await idleDetector.start({
  threshold: 60000,
  signal,
});

いつものように、このコードはブラウザでサポートされている場合にのみ読み込みます。

if ('IdleDetector' in window) {
  import('./idle_detection.mjs');
}

Fugu Greetings アプリでは、[Ephemeral] チェックボックスをオフにするとキャンバスがクリアされるユーザーが長時間アイドル状態になっている。

ユーザーが長時間アイドル状態になった後、キャンバスがクリアされた Fugu Greetings アプリ。 — </ph> [**エフェメラル**] チェックボックスがオンになっている場合、ユーザーが長時間アイドル状態になっていると、キャンバスはクリアされます。

結びの言葉

すごい、なんて乗り物だ。1 つのサンプルアプリに膨大な API があります。ユーザーにダウンロードコストを支払わせることはありませんブラウザでサポートされていない機能を表示する場合プログレッシブエンハンスメントを使用することで、関連するコードのみが読み込まれるようにしています。また、HTTP/2 ではリクエストが安価であるため、このパターンは多くのユースケースでうまく機能するはずです。アプリケーション、非常に大規模なアプリにはバンドラを検討することをおすすめします。

現在のブラウザでサポートされているコードを含むファイルのリクエストのみが表示されている Chrome DevTools Network パネル。 — </ph> 現在のブラウザでサポートされているコードを含むファイルのリクエストのみを示す Chrome DevTools の [ネットワーク] タブ。

プラットフォームによっては対応していない機能があるため、アプリはブラウザによって若干異なる場合があります。コア機能は常にそこにあり、特定のブラウザの機能に応じて段階的に強化されています。これらの機能は、同じブラウザでも変更される可能性がありますが、アプリがインストール済みのアプリとして実行されているか、ブラウザタブで実行されているかによって異なります。

Android Chrome で動作する Fugu Greetings。利用可能な機能の多くが表示されています。 — </ph> Android Chrome で動作する Fugu Greetings。

パソコンの Safari で Fugu 応答メッセージが実行され、利用可能な機能が少なくなります。 — </ph> パソコンの Safari で動作する Fugu Greetings。

パソコンの Chrome で動作している Fugu Greetings。利用可能な機能が多数表示されています。 — </ph> パソコンの Chrome で動作する Fugu Greetings。

Fugu Greetings アプリに関心がある場合は、 GitHub でフォークしてください。

GitHub の Fugu Greetings リポジトリ。 — </ph> GitHub の Fugu Greetings アプリ。

Chromium チームは、高度な Fugu API のリリースによって芝をグリーンにするように尽力しています。アプリの開発に段階的な機能強化を適用するとまず誰もが良質で強固なベースライン経験を得られるようにより多くのウェブプラットフォーム API をサポートするブラウザを使用するほど、ユーザーエクスペリエンスはさらに向上します。アプリの先進的な機能向上をぜひご検討ください。

謝辞

クリスチャン・リーベルに感謝します。 Fugu Greetings に寄与した Hemanth HM。この記事は Joe Medley によってレビューされ、 Kayce Basques。 Jake Archibald が状況を知るのを手伝ってくれました Service Worker のコンテキストで動的な import() を使用します。