プログレッシブ Web アプリのデモ

  • [アーティクル]

デバイスにインストールしたときにアプリを段階的に強化できる機能と API を使用する方法については、これらのデモ PWA を参照してください。

PWAmp

PWAmp は、ローカルおよびリモートのオーディオ ファイルを再生するデスクトップ 音楽プレーヤーです。

再生ボタンと曲の一覧を示す PWAmp アプリのスクリーンショット

アプリ、 ソース コード、Readme ファイル。

PWAmp では、次の機能が使用されます。

機能 説明 ドキュメント
ウィンドウ コントロール オーバーレイ 通常はタイトル バーに予約されているスペースを PWAmp で使用して、現在の曲の視覚化を表示できます。 タイトル バーにコンテンツを表示する
プロトコル処理 で web+amp: 始まるリンクを使用して、リモート曲を共有できます。 プログレッシブ Web Appsでプロトコルを処理する
ファイル処理 オーディオ ファイルは、PWAmp で直接開くことができます。 たとえば、 で終わる .mp3 ファイルを右クリックし、[ で開く] をクリックします。 プログレッシブ Web Appsでファイルを処理する
Web 共有 曲は、オペレーティング システムの共有ダイアログを使用して他のアプリと共有できます。 コンテンツの共有
共有ターゲット 他のアプリは、オペレーティング システムの共有ダイアログを使用して、PWAmp とオーディオ ファイルを共有できます。 共有コンテンツの受信
ウィジェット ミニプレーヤーウィジェットをWindows 11ウィジェットダッシュボードにインストールして、現在の曲を表示できます。 PWA ドリブン ウィジェットを構築する
サイドバー PWAmp は、Microsoft Edge のサイドバーにピン留めできます。 Microsoft Edge サイドバーの PWA をビルドする

ワミ

Wami は、画像のバッチに対するトリミング、サイズ変更、回転、効果の追加など、一連の画像操作手順を適用できます。

wami アプリのスクリーンショット

アプリ、 ソース コード、Readme ファイル。

Wami では、次の機能が使用されます。

機能 説明 ドキュメント
ウィンドウ コントロール オーバーレイ 通常はタイトル バーに予約されているスペースは、wami で使用できます。 タイトル バーにコンテンツを表示する
ファイル システム アクセス Wami は、変換されたイメージをディスクに保存できます。 ファイル システム アクセス API

Webboard

Webboard は描画アプリケーションです。

Webboard は、描画とインテリジェントなホワイトボードのためのプログレッシブ Web アプリです

アプリ、 ソース コード、Readme ファイル。

Webboard では、次の機能が使用されます。

機能 説明 ドキュメント
Web 共有 図面は、オペレーティング システム共有ダイアログを使用して他のアプリと共有できます。 コンテンツの共有

マイ トラック

マイ トラックは、マップ上の GPS トラック (*.gpx ファイル) を視覚化するのに役立ちます。

マイ トラック アプリ

アプリ、 ソース コード、Readme ファイル。

マイ トラックでは、次の機能が使用されます。

機能 説明 ドキュメント
ウィンドウ コントロール オーバーレイ 通常、タイトル バーに予約されているスペースは、マイ トラックによって独自の検索バーを表示するために使用されます。 タイトル バーにコンテンツを表示する
プロトコル処理 マイ トラックは、プロトコルで geo: 始まる URI を処理して、マップ上の場所を表示します。 プログレッシブ Web Appsでプロトコルを処理する
ファイル処理 My Tracks は、ファイルをネイティブに処理します *.gpx 。 プログレッシブ Web Appsでファイルを処理する
ショートカット マイ トラックは、マップのすべてのトラックを簡単に非表示にしたり表示したりするためのショートカットを定義します。 アプリのショートカットを定義する

マイ ムービー

このシンプルなPWAデモでは、構成された映画を検索してローカルに保存できます。

マイ ムービー アプリ

アプリ、 ソース コード。

マイ ムービーでは、次の機能が使用されます。

機能 説明 ドキュメント
バックグラウンド同期 ムービーに関する詳細情報を表示するときにユーザーがオフラインになっている場合、アプリはバックグラウンド同期を使用して、ユーザーがオンラインに戻ったときに後で情報を取得します。 バックグラウンド同期 API を使用してデータをサーバーと同期する
通知 映画に関する情報が取得されると、ユーザーがアプリに再び関与できるように通知が送信されます。 アクション センターに通知を表示する

BPM テクノ

BPM テクノは、デバイス マイクを介してオーディオを分析し、リアルタイムの 1 分あたりの拍数 (BPM) カウンターを表示します。

BPM テクノ アプリ

アプリ、 ソース コード、Readme ファイル。

BPM テクノでは、次の機能が使用されます。

機能 説明 ドキュメント
ショートカット BPM テクノは、ユーザーがアプリ内のオーディオ ファイルをアップロードできるショートカットを定義します。 アプリのショートカットを定義する
ファイル処理 BPM テクノは、ファイルをネイティブに処理します *.mp3 。 プログレッシブ Web Appsでファイルを処理する
共有ターゲット 他のアプリは、オペレーティング システムの共有ダイアログを使用して、BPM テクノとオーディオ ファイルを共有できます。 共有コンテンツの受信
プロトコル処理 アプリは、分析する曲へのリンクを送信するために使用できる URI を処理 web+bpm: します。 プログレッシブ Web Appsでプロトコルを処理する

1DIV

1DIV は、ユーザーが HTML 要素と CSS コードを 1 つだけ使用して描画を作成できる CSS エディターです。

1DIV アプリ

アプリ、 ソース コード、Readme ファイル。

1DIV では、次の機能が使用されます。

機能 説明 ドキュメント
ウィンドウ コントロール オーバーレイ 1DIV では、通常はタイトル バーによって予約されている領域を使用して、ロゴ、検索フィールド、およびボタンを表示します。 タイトル バーにコンテンツを表示する

関連項目