
ブログ
バックグラウンドで定期的にデータを同期する方法
定期的なバックグラウンド同期を使用すると、プログレッシブ ウェブアプリまたはサービス ワーカーがサポートするページが起動されたときに最新のコンテンツを表示できます。アプリやページが使用されていないときにバックグラウンドでデータをダウンロードすることで、この処理が行われます。 サービス ワーカーがインストールされたら、 Permissions API を使用して periodic-background-sync をクエリします。これは、ウィンドウ コンテキストまたは Service Worker
- HTML
- CSS
- JavaScript
2024年12月21日
アプリのショートカットを作成する方法
アプリのショートカットを使用すると、ユーザーはウェブアプリ内で一般的なタスクやおすすめのタスクを簡単に開始できます。アプリアイコンが表示されている場所からこれらのタスクに簡単にアクセスできるため、ユーザーの生産性が向上し、ウェブアプリのエンゲージメントも高まります。 アプリ ショートカット メニューは、ユーザーのデスクトップのタスクバー(Windows)またはドック(macOS)にあるアプリアイコンを右クリックするか、Android でアプリのランチャー
- HTML
- JavaScript
2024年11月18日
より機能が充実したインストール UI を追加する方法
デフォルトのエクスペリエンスについては以下の例をご覧ください。十分なコンテキストが提供されていません。 通常の小さいデフォルトのプロンプトではなく、リッチなインストール UI ダイアログを表示するには、ウェブ マニフェストに screenshots フィールドと description フィールドを追加します。以下の Squoosh.app の例をご覧ください。 [Richer Install UI] ダイアログは、ウェブ マニフェストの description フィールドと
- JavaScript
- HTML
2024年8月14日
How to create an app badge
Badges are used to convey non-urgent information to the user. For example, they are used to indicate the status of an app, or the number of unread items. The classic way of creating an app badge is to add a number to the favicon. On modern browsers,
- JavaScript
- CSS
- HTML
2025年2月27日
How to access contacts from the address book
Sometimes you want to let users of your app select one of their contacts to message via an email or chat application, or help them discover which of their contacts have already joined a social platform. To get contacts from the address book, you need
- CSS
- JavaScript
- HTML
2025年2月27日
How to use multiple screens
To make sure your browser supports the getScreenDetails() method, first check if it exists on the window object. Then, call window.getScreenDetails() to get attached screens. Adding an event listener to adapt to changed screen details allows you to
- CSS
- HTML
- JavaScript
2025年2月27日
How to let the user share the website they are on
Letting the user share the website they are on is a common web apps pattern that you can find on many news sites, blogs, or shopping sites. Since linking is one of the web's super powers, the hope is to acquire traffic from users who see the shared
- JavaScript
- HTML
- CSS
2025年2月27日