diff --git a/files/ja/web/api/navigationpreloadmanager/index.md b/files/ja/web/api/navigationpreloadmanager/index.md index 0491e47b902d84..fdc05e830baa17 100644 --- a/files/ja/web/api/navigationpreloadmanager/index.md +++ b/files/ja/web/api/navigationpreloadmanager/index.md @@ -1,33 +1,60 @@ --- title: NavigationPreloadManager slug: Web/API/NavigationPreloadManager +l10n: + sourceCommit: f2088b8912ef205a737551441d54b73507bd3ac6 --- -{{APIRef("Service Workers API")}} +{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers}} -[Service Worker API](/ja/docs/Web/API/Service_Worker_API) の **`NavigationPreloadManager`** インターフェイスは、サービスワーカーによるリソースのプリロード（事前読み込み）を管理するためのメソッドを提供します。 +**`NavigationPreloadManager`** は[サービスワーカー API](/ja/docs/Web/API/Service_Worker_API) のインターフェイスで、サービスワーカーによるリソースの事前読み込みを管理するためのメソッドを提供します。 + +対応していれば、この型のオブジェクトは {{domxref("ServiceWorkerRegistration.navigationPreload")}} によって返されます。 +事前読み込みフェッチリクエストの結果は、{{domxref("FetchEvent.preloadResponse")}} によって返されたプロミスを使用して待ちます。 ## メソッド - {{domxref("NavigationPreloadManager.enable()")}} - - : ナビゲーションのプリロードを有効にし、解決する {{jsxref("Promise")}} を返します。 + - : ナビゲーションの事前読み込みを有効にし、{{jsxref('undefined')}} で解決する {{jsxref("Promise")}} を返します。 - {{domxref("NavigationPreloadManager.disable()")}} - - : ナビゲーションのプリロードを無効にし、解決する {{jsxref("Promise")}} を返します。 + - : ナビゲーションの事前読み込みを無効にし、{{jsxref('undefined')}} で解決する {{jsxref("Promise")}} を返します。 - {{domxref("NavigationPreloadManager.setHeaderValue()")}} - : `Service-Worker-Navigation-Preload` ヘッダーの値を設定し、空の {{jsxref("Promise")}} を返します。 - {{domxref("NavigationPreloadManager.getState()")}} - - : プリロードが有効かどうかと、`Service-Worker-Navigation-Preload` の内容を示すプロパティを持つオブジェクトに解決する {{jsxref("Promise")}} を返します。 + - : 事前読み込みが有効かどうかと、HTTP の {{HTTPHeader("Service-Worker-Navigation-Preload")}} の内容を示すプロパティを持つオブジェクトに解決する {{jsxref("Promise")}} を返します。 + +## 解説 + +サービスワーカーは、指定されたスコープ内のページに対して、サイトの代理として {{domxref("Window/fetch", "fetch()")}} イベントを処理します。 +ユーザーがサービスワーカーを使用するページに移動すると、ブラウザーは（まだ実行していなければ）ワーカーを起動し、フェッチイベントを送信して結果を待ちます。 +イベントを受信すると、キャッシュにリソースが存在する場合はそれを返します。存在しない場合はリモートサーバーからリソースを取得します（将来のリクエストで返すためのコピーを保存します）。 + +サービスワーカーは、起動するまでブラウザーからのイベントを処理できません。 +これは避けられませんが、通常は大きな影響はありません。 +サービスワーカーは、多くの場合、すでに開始されています（他にもリクエストされた処理が完了する時点までアクティブな状態が続きます）。 +サービスワーカーが起動しなければならない場合でも、多くの場合、キャッシュから値が返されるため、非常に高速です。 +しかし、リモートリソースを取得し始める前にワーカーが起動しなければならない場合、遅延は著しくなる可能性があります。 + +`NavigationPreloadManager` には、サービスワーカーの起動時にリソースを並列して取得するメカニズムが用意されており、これにより、ワーカーがブラウザーからのフェッチリクエストを処理できるまでに、リソースがすでに完全に、または部分的にダウンロードされている状態にすることができます。 +これにより、ワーカーがすでに開始されている場合と「同程度」に悪い状態で開始される場合、場合によってはそれよりも良い状態で開始される場合があります。 + +事前読み込みマネージャーは、事前読み込みリクエストに HTTP の {{HTTPHeader("Service-Worker-Navigation-Preload")}} ヘッダーを送信し、事前読み込みリクエストに対するレスポンスをカスタマイズできるようにします。 +例えば、元のページの一部だけに送信されるデータを削減したり、ユーザーのログイン状態に基づいてレスポンスをカスタマイズしたりするために使用できます。 ## 例 -#### ナビゲーションのプリロードの機能を検出して有効化 +この例は [Speed up Service Worker with Navigation Preloads](https://web.dev/blog/navigation-preload) (developer.chrome.com) から取ったものです。 + +#### ナビゲーションの事前読み込みの機能を検出して有効化 + +下記では、最初の {{domxref("ServiceWorkerRegistration.navigationPreload")}} を使用して、この機能に対応してしているかどうかを判断した後、サービスワーカーの activate イベントハンドラーでナビゲーションの事前読み込みを有効にしています（この関数は、サービスワーカー用の `NavigationPreloadManager` を返すか、機能に対応していない場合は `undefined` を返します）。 ```js addEventListener("activate", (event) => { event.waitUntil( - (async function () { + (async () => { if (self.registration.navigationPreload) { - // ナビゲーションのプリロードを有効にします！ + // ナビゲーションの事前読み込みを有効にします！ await self.registration.navigationPreload.enable(); } })(), @@ -35,19 +62,25 @@ addEventListener("activate", (event) => { }); ``` -#### プリロードされたレスポンスの使用 +#### 事前読み込みされたレスポンスの使用 + +次のコードは、事前読み込みされたレスポンス ({{domxref("FetchEvent.preloadResponse")}}) を使用するサービスワーカーのフェッチイベントハンドラーを示しています。 -次の例は、プリロードされたレスポンスを使用する fetch イベントの実装を示しています。 +`fetch` イベントハンドラーは、{{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} を呼び出して、コントロールするページにプロミスを渡すと、このプロミスはリクエストされたリソースで解決されます。リソースは、キャッシュ、事前読み込みされたフェッチリクエスト、または新しいネットワークリクエストから取得されます。 + +この {{domxref("Cache")}} オブジェクトに一致する URL リクエストがある場合、コードはキャッシュからレスポンスを取得するための解決済みのプロミスを返します。 +キャッシュに一致するものがなかった場合、コードは解決済みの事前読み込みレスポンス ({{domxref("FetchEvent.preloadResponse")}}) を返します。 +一致するキャッシュ項目または事前読み込みレスポンスがなかった場合、コードはネットワークから新しい読み取り操作を開始し、その読み取り操作のための（未解決の）プロミスを返します。 ```js addEventListener("fetch", (event) => { event.respondWith( - (async function () { + (async () => { // 可能なら、キャッシュから応答します const cachedResponse = await caches.match(event.request); if (cachedResponse) return cachedResponse; - // それがなく、プリロードされたレスポンスがあれば、それを使用します + // それがなく、事前読み込みされたレスポンスがあれば、それを使用します const response = await event.preloadResponse; if (response) return response; @@ -58,10 +91,55 @@ addEventListener("fetch", (event) => { }); ``` -## 仕様 +### 独自のレスポンス + +ブラウザーは、事前読み込みリクエストに HTTP の {{HTTPHeader("Service-Worker-Navigation-Preload")}} ヘッダーを、既定で `true` のディレクティブ値で送信します。 +これにより、サーバーは通常のフェッチリクエストと事前読み込みフェッチリクエストを区別し、必要に応じてそれぞれ異なるレスポンスを送信することができます。 + +> [!NOTE] +> 事前読み込みと通常のフェッチ操作で異なるレスポンスを返すことができる場合、サーバーは確実に異なるレスポンスがキャッシュされるように `Vary: Service-Worker-Navigation-Preload` を設定する必要があります。 + +{{domxref("NavigationPreloadManager.setHeaderValue()")}} を使用してヘッダー値を変更し、先読み操作に追加のコンテキストを提供することができます。 +例えば、最近キャッシュされたリソースの ID を値として設定すると、サーバーは実際に必要とされるまでリソースを返さなくなります。 +同様に、Cookie を使用する代わりに、認証ステータスに基づいて返値を構成することもできます。 + +下記のコードは、ヘッダーディレクティブの値を、変数 `newValue` に設定する方法を示しています。 + +```js +navigator.serviceWorker.ready + .then((registration) => + registration.navigationPreload.setHeaderValue(newValue), + ) + .then(() => { + console.log("Done!"); + }); +``` + +[Speed up Service Worker with Navigation Preloads > Custom responses for preloads](https://web.dev/blog/navigation-preload) は、記事のウェブページのレスポンスがキャッシュされたヘッダーとフッターから構築されるサイトの、より完全な例を提供します。これにより、記事コンテンツのみが先読みされるように返されます。 + +### 状態の取得 + +{{domxref("NavigationPreloadManager.getState()")}} を使用すると、ナビゲーションの事前読み込みが有効になっているかどうかを調べ、事前読み込みリクエストに対して HTTP の {{HTTPHeader("Service-Worker-Navigation-Preload")}} ヘッダーにどのようなディレクティブ値が送信されているかを判断することができます。 + +下記コードは、状態オブジェクトに解決するプロミスを取得し、結果をログ出力する方法を示しています。 + +```js +navigator.serviceWorker.ready + .then((registration) => registration.navigationPreload.getState()) + .then((state) => { + console.log(state.enabled); // boolean + console.log(state.headerValue); // string + }); +``` + +## 仕様書 {{Specifications}} ## ブラウザーの互換性 {{Compat}} + +## 関連情報 + +- [Speed up Service Worker with Navigation Preloads](https://web.dev/blog/navigation-preload) (developer.chrome.com) diff --git a/files/ja/web/api/navigationpreloadmanager/setheadervalue/index.md b/files/ja/web/api/navigationpreloadmanager/setheadervalue/index.md new file mode 100644 index 00000000000000..54ba6c070ac058 --- /dev/null +++ b/files/ja/web/api/navigationpreloadmanager/setheadervalue/index.md @@ -0,0 +1,61 @@ +--- +title: "NavigationPreloadManager: setHeaderValue() メソッド" +short-title: setHeaderValue() +slug: Web/API/NavigationPreloadManager/setHeaderValue +l10n: + sourceCommit: cfb7587e3e3122630ad6cbd94d834ecadbe0a746 +--- + +{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers}} + +**`setHeaderValue()`** は {{domxref("NavigationPreloadManager")}} インターフェイスのメソッドで、サービスワーカーのナビゲーション事前読み込み中に実行された {{domxref("Window/fetch", "fetch()")}} 操作の結果として送信されるリクエストに付加される {{HTTPHeader("Service-Worker-Navigation-Preload")}} ヘッダーの値を設定します。 +これは、`undefined` で解決する空のプロミス ({{jsxref("Promise")}}) を返します。 + +事前読み込みリクエストに {{HTTPHeader("Service-Worker-Navigation-Preload")}} ヘッダーが存在することで、サーバーは事前読み込みフェッチリクエストと通常のフェッチリクエストに対して、異なるリソースを返すように構成することができます。 +既定でこのディレクティブは `true` に設定されています。このメソッドでは、事前読み込みリクエストに対して複数の異なる応答を構成することが可能なのです。 + +> [!NOTE] +> このヘッダーを設定することで異なるレスポンスが返される可能性がある場合、サーバーは異なるレスポンスが確実にキャッシュされるように `Vary: Service-Worker-Navigation-Preload` を設定する必要があります。 + +## 構文 + +```js-nolint +setHeaderValue(value) +``` + +### 引数 + +- `value` + - : 対象とするサーバーが、リクエストされたリソースに対して何を返すべきかを決定するために使用する任意の文字列値です。 + +### 返値 + +{{jsxref('undefined')}} で解決するプロミス ({{jsxref("Promise")}}) です。 + +### 例外 + +- `InvalidStateError` {{domxref("DOMException")}} + - : この {{domxref("NavigationPreloadManager")}} が属する登録に関連するアクティブなワーカーがない場合。 + +## 例 + +次のコードは、この値を設定する方法を示しています。 + +```js +navigator.serviceWorker.ready + .then((registration) => + registration.navigationPreload.setHeaderValue(newValue), + ) + .then(() => console.log("Done!")) + .catch((e) => + console.error(`NavigationPreloadManager に対応していません: ${e.message}`), + ); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/http/headers/alt-svc/index.md b/files/ja/web/http/headers/alt-svc/index.md index 3c7a5c82a5304d..e5258d94f27bd1 100644 --- a/files/ja/web/http/headers/alt-svc/index.md +++ b/files/ja/web/http/headers/alt-svc/index.md @@ -1,15 +1,19 @@ --- title: Alt-Svc slug: Web/HTTP/Headers/Alt-Svc +l10n: + sourceCommit: 9231a7046973685f4600e1891fa644ecce41ef3b --- {{HTTPSidebar}} -**`Alt-Svc`** は HTTP のレスポンスヘッダーで、同じリソースに到達できる代替サービスを宣伝するために使用します。 代替サービスは、プロトコル/ホスト/ポートの組み合わせによって定義します。 +**`Alt-Svc`** は HTTP のヘッダーで、将来のリクエスト時に、そのオリジンのサーバーとして別のネットワーク上の場所（「代替サービス」）を扱うことができることをサーバーが示すことができます。 + +これにより、実行中のリクエストに影響を与えることなく、新しいプロトコルのバージョンを宣伝することができ、またサーバーのトラフィックを制御するのにも役立ちます。代替サービスを使用しても、エンドユーザーには見えません。URL やリクエストのオリジンのサーバーは変更されず、余分なラウンドトリップも発生しません。 ## 構文 -``` +```http Alt-Svc: clear Alt-Svc: =; ma= Alt-Svc: =; ma=; persist=1 @@ -18,19 +22,22 @@ Alt-Svc: =; ma=; persist=1 - `clear` - : 特別な値 `clear` は、そのオリジンのすべての代替を無効にすることをオリジンが要求することを示します。 - `` - - : {{Glossary("ALPN")}} プロトコル識別子。 例には、HTTP/2 の h2 および HTTP/3 プロトコルのドラフト 25 の h3-25 が含まれています。 + - : {{Glossary("ALPN")}} プロトコル識別子。例えば、HTTP/2 の `h2` および HTTP/3 プロトコルのドラフト 25 の `h3-25` があります。 - `` - : 任意のホストのオーバーライド、コロン、および必須のポート番号で構成される代替機関を指定する引用符付きの文字列。 -- `ma=`{{Optional_Inline}} - - : 代替サービスが新鮮であると見なす秒数。 省略した場合のデフォルトは 24 時間です。 代替サービスのエントリは、最大で _\_ から（{{ httpheader("Age") }} ヘッダーからの）レスポンスの経過時間を差し引いた秒数までキャッシュできます。 キャッシュされたエントリが期限切れになると、クライアントは新しい接続にこの代替サービスを使用できなくなります。 -- `persist=1`{{Optional_Inline}} - - : 通常、キャッシュされた代替サービスエントリは、ネットワーク構成の変更時にクリアされます。 persist=1 パラメータを使用すると、そのような変更によってエントリが削除されなくなります。 +- `ma=` {{optional_inline}} + - : 代替サービスが新鮮であると見なす秒数。 省略した場合の既定値 24 時間です。 代替サービスの項目は、最大で _\_ から（{{httpheader("Age")}} ヘッダーからの）レスポンスの経過時間を差し引いた秒数までキャッシュできます。 + キャッシュされた項目が期限切れになると、クライアントは新しい接続にこの代替サービスを使用できなくなります。 +- `persist=1` {{optional_inline}} + - : 通常、キャッシュされた代替サービス項目は、ネットワーク構成の変更時にクリアされます。 + `persist=1` 引数を使用すると、そのような変更によって項目が削除されなくなります。 -区切り文字としてカンマを使用して、単一の `Alt-Svc` ヘッダーで複数のエントリを指定できます。 その場合、早期のエントリーがより望ましいと考えられます。 +区切り文字としてカンマを使用して、単一の `Alt-Svc` ヘッダーで複数の項目を指定できます。 +その場合、先にある項目がより望ましいとみなされます。 ## 例 -``` +```http Alt-Svc: h2=":443"; ma=2592000; Alt-Svc: h2=":443"; ma=2592000; persist=1 Alt-Svc: h2="alt.example.com:443", h2=":443" @@ -39,9 +46,7 @@ Alt-Svc: h3-25=":443"; ma=3600, h2=":443"; ma=3600 ## 仕様書 -| 仕様書 | 状態 | 備考 | -| ------------- | -------- | -------- | -| {{RFC(7838)}} | IETF RFC | 初回定義 | +{{Specifications}} ## ブラウザーの互換性 @@ -49,4 +54,4 @@ Alt-Svc: h3-25=":443"; ma=3600, h2=":443"; ma=3600 ## 関連情報 -- [ウェブ上のリソースの識別](/ja/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web) +- [Alternative Services](https://www.mnot.net/blog/2016/03/09/alt-svc) （HTTP Working Group 代表 Mark Nottingham による `Alt-Svc` についての記事） diff --git a/files/ja/web/progressive_web_apps/tutorials/index.md b/files/ja/web/progressive_web_apps/tutorials/index.md new file mode 100644 index 00000000000000..ae113942be0680 --- /dev/null +++ b/files/ja/web/progressive_web_apps/tutorials/index.md @@ -0,0 +1,17 @@ +--- +title: チュートリアル +slug: Web/Progressive_web_apps/Tutorials +l10n: + sourceCommit: 8d202854ade7328f827da2951bc714455f78674f +--- + +{{PWASidebar}} + +このページには、PWAを開発するのに役立つチュートリアルが掲載されています。チュートリアルでは、アプリを作成する段階を最初から最後まで順を追って説明し、アプリのさまざまな機能の実装方法について解説しています。 + +- [初めての PWA の作成](/ja/docs/Web/Progressive_web_apps/Tutorials/CycleTracker) + + - : これは初心者向けのチュートリアルで、月の周期を追跡する PWA の作成方法を説明します。レッスンでは、完全に機能するウェブアプリを作成するために要求される HTML、CSS、JavaScript の概要、テスト環境の設定、ウェブアプリを PWA にアップグレードするための完全な説明（マニフェストの開発と検査、サービスワーカーのスクリプトの追加、サービスワーカーを使用した古いキャッシュの削除など）を記載しています。 + +- [PWA を深堀りする](/ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames) + - : これは中級者向けのチュートリアルで、[js13kGames 2017](https://2017.js13kgames.com/) 競技の A-Frame カテゴリーに送信したゲームに関する情報が掲載されている PWA の作成方法を説明しています。このチュートリアルでは、通知、プッシュ通知、アプリのパフォーマンスなどの追加機能を含め、PWA を作成するうえで必要な基本事項をすべて記載しています。 diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md index 69370f7884495a..fed5c4b0a94a3d 100644 --- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md +++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md @@ -144,7 +144,7 @@ create-react-app은 실행되는 동안 터미널에 메시지들을 출력할 이 과정이 완료되면 `moz-todo-react` 디렉토리 안으로 `cd`를 실행한 후 `npm start` 커맨드를 실행하세요. create-react-app에 의해 설치된 스크립트는 localhost:3000에서 실행되고 있는 로컬 서버에서 실행을 시작할 것입니다. 새로운 브라우저 탭을 열고 앱을 열면, 브라우저는 다음과 같이 무언가를 표시하고 있을 겁니다. -![Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application](./default-create-react-app.png) +![Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application](./default-vite.png) ### 애플리케이션 구조 diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md index 20819f0645f80b..ce17fdaafacff0 100644 --- a/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md +++ b/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md @@ -253,19 +253,19 @@ web storage 的一个关键特性是，数据在不同页面加载时都存在 ### 通过一个笔记存储示例演示 -在这里，我们将向你介绍一个示例，该示例允许你在浏览器中存储笔记并随时查看和删除它们，在我们进行时，我们将解释 IDB 的最基本部分并让你自己构建注释。 +在这里，我们将向你介绍一个示例，该示例允许你在浏览器中存储笔记并随时查看和删除它们，在我们进行时，我们将解释 IDB 的最基本部分并让你自己构建笔记。 这个应用看起来像这样： ![](idb-demo.png) -每个笔记都有一个标题和一些正文，每个都可以单独编辑。我们将在下面通过的 JavaScript 代码提供详细的注释，以帮助你了解正在发生的事情。 +每个笔记都有一个标题和一些正文，每个都可以单独编辑。我们将在下面通过的 JavaScript 代码提供详细的笔记，以帮助你了解正在发生的事情。 ### 开始 1、首先，将 [`index.html`](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/indexeddb/notes/index.html), [`style.css`](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/indexeddb/notes/style.css), 和 [`index-start.js`](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/indexeddb/notes/index-start.js) 文件的本地副本放入本地计算机上的新目录中。 -2、浏览这些文件。你将看到 HTML 非常简单：具有页眉和页脚的网站，以及包含显示注释的位置的主内容区域，以及用于在数据库中输入新注释的表单。CSS 提供了一些简单的样式，使其更清晰。JavaScript 文件包含五个声明的常量，其中包含对将显示注释的 {{htmlelement("ul")}} 元素的引用，标题和正文 {{htmlelement("input")}} 元素，{{htmlelement("form")}}本身，以及{{htmlelement("button")}}。 +2、浏览这些文件。你将看到 HTML 非常简单：具有页眉和页脚的网站，以及包含显示笔记的位置的主内容区域，以及用于在数据库中输入新笔记的表单。CSS 提供了一些简单的样式，使其更清晰。JavaScript 文件包含五个声明的常量，其中包含对将显示笔记的 {{htmlelement("ul")}} 元素的引用，标题和正文 {{htmlelement("input")}} 元素，{{htmlelement("form")}} 本身，以及{{htmlelement("button")}}。 3、将你的 JavaScript 文件重命名为 `index.js` 。你现在可以开始向其添加代码了。 @@ -354,7 +354,7 @@ web storage 的一个关键特性是，数据在不同页面加载时都存在 这是我们定义数据库的模式（结构）的地方; 也就是说，它包含的列（或字段）集。这里我们首先从`e.target.result`（事件目标的`result`属性）中获取对现有数据库的引用，该引用是`request`对象。这相当于处理程序`db = request.result;`内部的行`onsuccess`，但我们需要在此单独执行此操作，因为`onupgradeneeded`处理程序（如果需要）将在`onsuccess`处理程序之前运行，这意味着`db`如果我们不这样做，该值将不可用。 - 然后[`IDBDatabase.createObjectStore()`](/zh-CN/docs/Web/API/IDBDatabase/createObjectStore)，我们使用在打开的数据库中创建一个新的对象库。这相当于传统数据库系统中的单个表。我们给它起了名称注释，并且还指定了一个`autoIncrement`名为的关键字段`id`- 在每个新记录中，这将自动赋予增量值 - 开发人员不需要明确地设置它。作为密钥，该`id`字段将用于唯一标识记录，例如删除或显示记录时。 + 然后，我们使用 [`IDBDatabase.createObjectStore()`](/zh-CN/docs/Web/API/IDBDatabase/createObjectStore) 在打开的数据库中创建一个新的对象库。这相当于传统数据库系统中的单个表。我们将其命名为 notes，并且还指定了一个名为 `id` 的 `autoIncrement` 关键字段——在每个新记录中，这将自动赋予增量值——开发人员不需要明确地设置它。作为密钥，`id` 字段将用于唯一标识记录，例如删除或显示记录时。 我们还使用以下[`IDBObjectStore.createIndex()`](/zh-CN/docs/Web/API/IDBObjectStore/createIndex)方法创建另外两个索引（字段）:( `title`每个音符将包含一个标题），以及`body`（包含音符的正文）。 @@ -425,7 +425,7 @@ function addData(e) { - 使用 {{domxref("IDBDatabase.transaction()")}} 方法打开 `notes` 对象存储的 `readwrite` 事务。此事务对象允许我们访问对象存储，以便我们可以对其执行某些操作，例如添加新记录。 - 使用 {{domxref("IDBTransaction.objectStore()")}} 方法访问对象库，将结果保存在 `objectStore` 变量中。 - 使用 {{domxref("IDBObjectStore.add()")}} 添加新记录到数据库。这创建了一个请求对象，与我们之前看到的方式相同。 -- 在生命周期的关键点为 `request` 以及 `transaction` 对象添加事件处理程序以运行代码。请求成功后，我们会清除表单输入，以便输入下一个注释。交易完成后，我们 `displayData()` 再次运行该功能以更新页面上的注释显示。 +- 在生命周期的关键点为 `request` 以及 `transaction` 对象添加事件处理程序以运行代码。请求成功后，我们会清除表单输入，以便输入下一个笔记。交易完成后，我们再次运行 `displayData()` 函数以更新页面上的笔记显示。 ### 显示数据 @@ -498,9 +498,9 @@ function displayData() { - 接下来，我们`notes`使用[`IDBDatabase.transaction()`](/zh-CN/docs/Web/API/IDBDatabase/transaction)和[`IDBTransaction.objectStore()`](/zh-CN/docs/Web/API/IDBTransaction/objectStore)我们一样得到对象存储的引用`addData()`，除了这里我们将它们链接在一行中。 - 下一步是使用[`IDBObjectStore.openCursor()`](/zh-CN/docs/Web/API/IDBObjectStore/openCursor)方法打开对游标的请求 - 这是一个可用于迭代对象存储中的记录的构造。我们将一个`onsuccess`处理程序链接到该行的末尾以使代码更简洁 - 当成功返回游标时，运行处理程序。 - 我们[`IDBCursor`](/zh-CN/docs/Web/API/IDBCursor)使用 let 获取对游标本身（对象）的引用`cursor = e.target.result`。 -- 接下来，我们检查光标是否包含来自数据存储区（`if(cursor){ ... }`）的记录 - 如果是这样，我们创建一个 DOM 片段，用记录中的数据填充它，然后将其插入页面（`
    `元素内部）。我们还包括一个删除按钮，当单击该按钮时，将通过运行该`deleteItem()`功能删除该注释，我们将在下一节中查看。 +- 接下来，我们检查光标是否包含来自数据存储区（`if(cursor){ ... }`）的记录——如果包含，我们创建一个 DOM 片段，用记录中的数据填充它，然后将其插入页面（`
      `元素内部）。我们还包括一个删除按钮，当单击该按钮时，将通过运行 `deleteItem()` 函数删除该笔记（我们将在下一节中查看）。 - 在`if`块结束时，我们使用该[`IDBCursor.continue()`](/zh-CN/docs/Web/API/IDBCursor/continue)方法将光标前进到数据存储区中的下一条记录，然后`if`再次运行块的内容。如果有另一个要迭代的记录，这会导致它被插入到页面中，然后`continue()`再次运行，依此类推。 -- 当没有更多记录要迭代时，`cursor`将返回`undefined`，因此`else`块将运行而不是`if`块。此块检查是否有任何注释被插入`
        `- 如果没有，它会插入一条消息，说没有存储注释。 +- 当没有更多记录要迭代时，`cursor` 将返回 `undefined`，因此 `else` 块将运行（而不是 `if` 块）。此块检查是否有任何笔记被插入`
          `——如果没有，它会插入一条消息，说没有存储的笔记。 ### 删除一条笔记 @@ -538,7 +538,7 @@ function deleteItem(e) { - 第一部分可以使用一些解释 - 我们检索要删除`Number(e.target.parentNode.getAttribute('data-note-id'))`的记录的 ID - 回想一下记录的 ID 是在第一次显示时保存在`data-note-id`属性中的`
        • `。但是，我们需要通过全局内置的[Number（）](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number)对象传递属性，因为它当前是一个字符串，否则将无法被数据库识别。 - 然后，我们使用我们之前看到的相同模式获取对对象存储的引用，并使用该[`IDBObjectStore.delete()`](/zh-CN/docs/Web/API/IDBObjectStore/delete)方法从数据库中删除记录，并将 ID 传递给它。 -- 当数据库事务完成后，我们`
        • `从 DOM 中删除注释，然后再次检查以查看它是否`
            `为空，并根据需要插入注释。 +- 当数据库事务完成后，我们从 DOM 中删除笔记的 `
          • `，然后再次检查以查看 `
              ` 是否为空，并根据需要插入笔记。 就是这样了！你的例子现在应该有效。 diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/action/setbadgetext/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/action/setbadgetext/index.md new file mode 100644 index 00000000000000..ca22039476f464 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/action/setbadgetext/index.md @@ -0,0 +1,104 @@ +--- +title: action.setBadgeText() +slug: Mozilla/Add-ons/WebExtensions/API/action/setBadgeText +l10n: + sourceCommit: b30a10c08b986ebabd44733fb62f67667350403e +--- + +{{AddonSidebar}} + +设置浏览器操作的徽章文本（徽章将显示在图标上方）。 + +> [!NOTE] +> 该 API 在 Manifest V3 或更高版本中可用。 + +未指定特定徽章文本的标签页将继承全局徽章文本（默认为 `""`）。 + +## 语法 + +```js-nolint +browser.action.setBadgeText( + details // 对象 +) +``` + +该 API 同样以 `chrome.action.setBadgeText()` 的形式可用。 + +### 参数 + +- `details` + + - : 一个含有下列属性的对象： + + - `text` + + - : `string` 或 `null`，可以传入任意长度的字符串，但空间只能容纳大约四个字符。 + + 若你不希望显示徽章，可以使用空字符串 `""`。 + + 若指定了 `tabId`，`null` 将移除指定标签页的徽章文本使之继承全局徽章文本；否则，会将全局徽标文本撤销为 `""`。 + + 若指定了 `windowId`，`null` 将移除指定窗口的徽章文本使之继承全局徽章文本；否则，会将全局徽章文本撤销为 `""`。 + + - `tabId` {{optional_inline}} + - : `integer`，为给定标签页设置徽章文本。当用户将标签页导航到新页面的时候，文本将被重置。 + - `windowId` {{optional_inline}} + - : `integer`，为给定窗口设置徽章文本。 + + + +- 若同时指定了 `windowId` 和 `tabId`，则函数出错。 +- 若同时未指定 `windowId` 和 `tabId`，则将设置全局徽章文本。 + +## 示例 + +添加一个显示用户点击按钮次数的徽标： + +```js +let clicks = 0; + +function increment() { + browser.action.setBadgeText({ text: (++clicks).toString() }); +} + +browser.action.onClicked.addListener(increment); +``` + +{{WebExtExamples}} + +## 浏览器兼容性 + +{{Compat}} + +> [!NOTE] +> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.com/docs/extensions/reference/action/#method-setBadgeText) API。本文衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)。 + + diff --git a/files/zh-cn/web/api/htmlimageelement/image/index.md b/files/zh-cn/web/api/htmlimageelement/image/index.md index 4db5660fa59be0..7fbe5a893e302c 100644 --- a/files/zh-cn/web/api/htmlimageelement/image/index.md +++ b/files/zh-cn/web/api/htmlimageelement/image/index.md @@ -5,9 +5,7 @@ slug: Web/API/HTMLImageElement/Image {{ APIRef("HTML DOM") }} -**`Image()`**函数将会创建一个新的{{domxref("HTMLImageElement")}}实例。 - -它的功能等价于 {{domxref("Document.createElement()", "document.createElement('img')")}} +**`Image()`** 构造函数用于创建一个新的 {{domxref("HTMLImageElement")}} 实例。它的功能等价于 {{domxref("Document.createElement()", "document.createElement('img')")}}。 ## 语法 diff --git a/files/zh-cn/web/api/htmlmeterelement/index.md b/files/zh-cn/web/api/htmlmeterelement/index.md new file mode 100644 index 00000000000000..8380d7a308cc47 --- /dev/null +++ b/files/zh-cn/web/api/htmlmeterelement/index.md @@ -0,0 +1,47 @@ +--- +title: HTMLMeterElement +slug: Web/API/HTMLMeterElement +l10n: + sourceCommit: ec8d5627e822d866f350d9d8c06f0df58948015e +--- + +{{APIRef("HTML DOM")}} + +HTML {{HTMLElement("meter")}} 元素暴露 **`HTMLMeterElement`** 接口，其提供用于操作 {{HTMLElement("meter")}} 元素的布局和展现的特定属性和方法（除了 {{domxref("HTMLElement")}} 对象接口之外，它还可以通过继承来使用）。 + +{{InheritanceDiagram}} + +## 实例属性 + +_还继承其父接口 {{domxref("HTMLElement")}} 的属性。_ + +- {{domxref("HTMLMeterElement.high")}} + - : 一个 `double` 表示高档部分的数值下限，反映 [`high`](/zh-CN/docs/Web/HTML/Element/meter#high) 属性。 +- {{domxref("HTMLMeterElement.low")}} + - : 一个 `double` 表示低档部分的数值上限，反映 [`low`](/zh-CN/docs/Web/HTML/Element/meter#low) 属性。 +- {{domxref("HTMLMeterElement.max")}} + - : 一个 `double` 表示测量范围的上限，反映 [`max`](/zh-CN/docs/Web/HTML/Element/meter#max) 属性。 +- {{domxref("HTMLMeterElement.min")}} + - : 一个 `double` 表示测量范围的下限，反映 [`min`](/zh-CN/docs/Web/HTML/Element/meter#min) 属性。 +- {{domxref("HTMLMeterElement.optimum")}} + - : 一个 `double` 表示最佳数值，反映 [`optimum`](/zh-CN/docs/Web/HTML/Element/meter#optimum) 属性。 +- {{domxref("HTMLMeterElement.value")}} + - : 一个 `double` 表示当前数值，反映 [`value`](/zh-CN/docs/Web/HTML/Element/meter#value) 属性。 +- {{domxref("HTMLMeterElement.labels")}} {{ReadOnlyInline}} + - : 与此元素关联的 {{HTMLElement("label")}} 元素的 {{domxref("NodeList")}}。 + +## 实例方法 + +_此接口无具体方法，但继承了其父接口 {{domxref("HTMLElement")}} 的方法。_ + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- 实现此接口的 HTML 元素：{{HTMLElement("meter")}} diff --git a/files/zh-cn/web/api/htmlmeterelement/labels/index.md b/files/zh-cn/web/api/htmlmeterelement/labels/index.md new file mode 100644 index 00000000000000..43985c3e2ebeeb --- /dev/null +++ b/files/zh-cn/web/api/htmlmeterelement/labels/index.md @@ -0,0 +1,45 @@ +--- +title: HTMLMeterElement：labels 属性 +slug: Web/API/HTMLMeterElement/labels +l10n: + sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3 +--- + +{{APIRef("DOM")}} + +**`HTMLMeterElement.labels`** 只读属性返回与 {{HTMLElement("meter")}} 元素有关联的 {{HTMLElement("label")}} 元素的 {{domxref("NodeList")}}。 + +## 值 + +一个 {{domxref("NodeList")}}，包含与 `` 元素关联的 `