MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

この記事は翻訳作業中です。

PWA(Progressive web apps; 進歩したウェブアプリの略) は伝統的なウェブサイト/アプリを受けて — ウェブがもたらした利点はそのままに — ネイティブアプリと同じユーザー体験を多く与える機能を追加したものです。この一連の文書では知っておくべきすべてをお伝えします。

PWA は下記のセクションに一覧されたすべての利点を備えるべきです。

発見できる

最終的なねらいとして、ウェブアプリは検索エンジンでより良く表示されたり、簡単に公開され、カタログされ、ランクされ、ブラウザーに特別な能力を与えるメタデータを備えないといけません。

この能力は、すでにプロプラエタリ技術を使った Open Graph のようなウェブベースのプラットフォームによって可能になっており、これはHTML の<head> にてメタタグを使って指定できるのと同じようなフォーマットを提供しています。

関連するウェブ標準は Web アプリマニフェスト で、これは名前、アイコン、スプラッシュスクリーン、色などを JSON-フォーマットのマニフェストファイルで指定するアプリ機能を定義します。

インストールできる

アプリのユーザー向の体験の主な部分は、ホーム画面のアプリアイコンと、プラットフォームに素晴らしく統合されたネイティブコンテナの中にタップしてアプリを開けることです。

モダンなウェブアプリは、ウェブアプリマニフェストにセットしたプロパティと、ホーム画面に追加というモダンなスマートフォンブラウザーで使える機能によって、このネイティブアプリの使い心地を得ています。

リンクできる

ウェブの最も強力な特徴はアプリと特定の URL をリンクできることです — アプリストアは不要で、ややこしいインストール処理も不要です。これはずっと続いてきたやり方です。

ネットワークに依存しない

モダンウェブアプリはネットワークが信頼できない、または存在しないときにも動作します。ネットワークから独立する基本的なアイデアは、次ができることです:

  • ネットワークが利用できない場合でもサイトを再訪問してコンテンツを取得できる。
  • ユーザーが1回でも訪問したことのある、あらゆるコンテンツを、接続が悪い状況でもブラウズできる。
  • 全く接続がない状況でユーザーに見せるものを管理できる。

これはいろいろな技術の組み合わせにより達成されます — ページリクエストを管理する Service Workers (例えば、オフラインに保管する), ネットワークリクエストへの応答をオフラインに保管する Cache API (サイトの資産を保管するのにとても便利), アプリケーションデータをオフラインに保管する Web StorageIndexedDB のようなクライアント側のデータ保管技術。

プログレッシブ

モダンなウェブアプリは完全な能力のブラウザーにはとてもかっこいい体験を、そんなに能力のないブラウザーには受け入れられる体験(キラキラしてなくても)を提供します。何年も progressive enhancement のようなベストプラクティスでこうしたことを行ってきました。

再エンゲージ可能

ネイティブプラットフォームの主な利点は、ユーザーがアプリを見たり端末を使っていないときでも、アップデートにより新しいコンテンツに再エンゲージされることです。

モダンなウェブアプリはこれを行うことができて、その方法としてページを管理する Service Workers や、service worker 経由で更新をサーバーからアプリに直接送れる Web Push API や、システム通知を生成してブラウザーにいないユーザーをエンゲージするのに役立つ Notifications API を使います。

レスポンシブである

レスポンシブウェブアプリは、UI があらゆるフォームファクター(デスクトップ、モバイル、タブレット、その次に来る何でも)にフィットするのを確認するため、メディアクエリーとviewport といった技術を使います。

安全である

ウェブプラットフォームは覗き見を防いでコンテンツが不正にいじられないような安全な配信メカニズムを提供します — ただし HTTPS の利点を使い、セキュリティに気をつけてアプリを開発する限りでは。それに加えて、正しい URL であることを確認して PWA の性質を検証することができて、いっぽうアプリストアのアプリは1つのものであるようにも見えますが、そうでありません (example)。

主なガイド

ツール

  • localForage — a nice simple JavaScript library for making client-side data storage really simple; it uses IndexedDB by default, and falls back to Web SQL/Web Storage if necessary.
  • ServiceWorkerWare — an Express-like microframework for easy Service Worker development.
  • oghliner — not only a template but a tool for deploying Offline Web Apps to GitHub Pages.
  • sw-precache — a node module to generate service worker code that will precache specific resources.
  • workbox — spiritual successor to sw-precache with more advanced caching strategies and easy precaching.
  • upup — a tiny script that makes sure your site is always there for your users.
  • The service worker cookbook — A series of excellent service worker/push recipes, showing how to implement an offline app, but also much more.

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: Uemmra3
 最終更新者: Uemmra3,