---
title: プログレッシブウェブアプリの紹介
slug: Web/Progressive_web_apps/Introduction
tags:
  - Introduction
  - PWA
  - Progressive web apps
  - js13kGames
  - progressive
  - ウェブマニフェスト
  - サービスワーカー
  - プログレッシブウェブアプリ
translation_of: Web/Progressive_web_apps/Introduction
---
<div>{{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}}</div>

<p class="summary">この記事では<ruby>プログレッシブウェブアプリ<rp> (</rp><rt>Progressive Web Apps</rt><rp>)</rp></ruby> (PWA) を紹介し、それが何なのか、また普通のウェブアプリよりもどのような利点があるのかを説明します。</p>

<h2 id="What_is_a_Progressive_Web_App" name="What_is_a_Progressive_Web_App">プログレッシブウェブアプリとは</h2>

<p>PWA は数々の特定の技術と、ウェブアプリとネイティブアプリの機能の利点を併せ持った標準パターンを使用して開発されたウェブアプリです。</p>

<p>例えば、ウェブアプリはより見つけやすいものです。— アクセスするのは、アプリケーションをインストールするよりはるかに簡単で手早く、リンクを通してウェブアプリを共有することもできます。</p>

<p>一方、ネイティブアプリはオペレーティングシステムとより調和するので、ユーザーにもっと継ぎ目のない使い勝手を提供します。ネイティブアプリをインストールするとオフラインで動作し、ユーザーはブラウザーを使ってアプリに移動するのではなく、ホーム画面のアイコンから好きなアプリをタップするだけで簡単にアクセスできます。</p>

<p>PWA によって、ネイティブアプリの利点を引き継いでウェブアプリケーションを作成できます。</p>

<p>PWA は新しい概念ではありません。このような考えは、今までも様々なアプローチで検討されてきました。既に、プログレッシブエンハンスメントやレスポンシブデザインを用いてモバイルに適したウェブサイトを作成することができます。オフラインでの動作やアプリケーションとしてのインストールも、数年前に Firefox OS で実現されていました。</p>

<p>しかし、PWA はウェブを素晴らしいものにする既存の機能を一切排除することなく、これらすべてとそれ以上の機能を提供します。</p>

<h2 id="What_makes_an_app_a_PWA" name="What_makes_an_app_a_PWA">何がアプリを PWA にするのか</h2>

<p>前に述べたように、PWA は単一の技術によって成り立っているわけではありません。PWA とはウェブアプリケーションを構築するための新しい哲学を表しており、いくつかの特定のパターンや API、機能を含みます。一見しただけではそのウェブアプリが PWA かを見極めることはできません。ウェブアプリは、特定の要件を満たしているか、あるいは特定の機能を実装している場合に、PWA と見なされます。例えば、オフラインで動作すること、インストールできること、簡単に同期できること、プッシュ通知を送信することができることなどです。</p>

<p>更に、アプリの完成度をパーセント値で測定するツールもあります (今の所は <a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> が最も有名です)。様々な技術的優位性を実装することでアプリをより進化的(progressive)にすることができ、より高い Lighthouse のスコアを得ることができます。しかし、このスコアは大まかな指標でしかありません。</p>

<p>ウェブアプリが PWA として見なされるために、いくつかの重要な原則があります。</p>

<ul>
 <li><a href="/ja/Progressive_web_apps/Advantages#Discoverable">Discoverable</a>: コンテンツを検索エンジンで見つけることができる。</li>
 <li><a href="/ja/Progressive_web_apps/Advantages#Installable">Installable</a>: アプリは端末のホーム画面に追加できる。</li>
 <li><a href="/ja/Progressive_web_apps/Advantages#Linkable">Linkable</a>: URL を送るだけでアプリを共有できる。</li>
 <li><a href="/ja/Progressive_web_apps/Advantages#Network_independent">Network independent</a>: オフラインか、あるいは貧弱なネットワーク環境でも使用できる。</li>
 <li><a href="/ja/Progressive_web_apps/Advantages#Progressive">Progressive</a>: 古いブラウザーでも基本的な機能は使用でき、最新のブラウザーではすべての機能が使用できる。</li>
 <li><a href="/ja/Progressive_web_apps/Advantages#Re-engageable">Re-engageable</a>: 新しいコンテンツがあるときには、通知を送ることができる。</li>
 <li><a href="/ja/Progressive_web_apps/Advantages#Responsive">Responsive</a>: 携帯電話やタブレット、ノートパソコン、テレビ、冷蔵庫など、画面とブラウザーを備える全ての端末で使用できる。</li>
 <li><a href="/ja/Progressive_web_apps/Advantages#Safe">Safe</a>: アプリからの通信が第三者からの攻撃に対して安全であり、機密情報を保護できる。</li>
</ul>

<h3 id="Is_it_worth_doing_all_that" name="Is_it_worth_doing_all_that">取り組む価値はありますか？</h3>

<p>もちろん！基本的な PWA の機能を実装するのに必要な労力は比較的小さく、得られる便益は膨大です。例をあげましょう。</p>

<ul>
 <li>アプリのインストール後、<font color="#0b0115"><a href="/ja/docs/Web/API/Service_Worker_API">Service Worker</a></font> のキャッシュのおかげで読み込み時間が減少する。大切な帯域の利用量も同様。</li>
 <li>アプリ更新の際、変更があった内容だけを更新する機能。対照的にネイティブアプリの場合、ほんの小さな変更だとしてもユーザーにアプリケーション全体を再びダウンロードさせてしまう。</li>
 <li>ネイティブプラットフォームとよく統合されたルックアンドフィール。例えばホームスクリーンのアプリアイコンや、フルスクリーン動作するアプリなど。</li>
 <li>システム通知やプッシュメッセージによるユーザーの再訪問。これはエンゲージユーザーやコンバージョン率の向上に繋がる。</li>
</ul>

<p>PWA の道を試みて、ネイティブアプリよりもウェブサイトの使い勝手の向上を選択し、その結果として大きな利益を得るに至った企業の成功例は多数あります。<a href="https://www.pwastats.com/">PWA Stats</a> というウェブサイトはこのような便益を示すたくさんの調査を公開しています。</p>

<p>もっとも有名な成功例は、おそらく <a href="https://stories.flipkart.com/introducing-flipkart-lite/">Flipkart Lite</a> でしょう。インド最大手の e コマースサイトは 2015年に PWA へと作り直され、その結果コンバージョン数が 70%増加しました。<a href="https://m.aliexpress.com/">AliExpress</a> の PWA もまた新規ユーザーのコンバージョン率が 104%向上という、ウェブやネイティブアプリよりも良い結果となりました。このような利益の増加や PWA 転換に必要な労力が比較的少ないことを考えると、PWA の利点は明確です。</p>

<p>一方では <a href="https://www.couponmoto.com/">couponmoto</a> のような初期段階にあるスタートアップも消費者エンゲージメント促進のため PWA を使い始め、企業の大小問わずユーザーの (再) エンゲージに効果的であることが示されています。</p>

<p>他にも例を知りたければ <a href="https://pwa.rocks/">pwa.rocks</a> を確認してみてください。特に <a href="https://hnpwa.com/">hnpwa.com</a> のページは注目に値します。これは (よくある TodoMVC アプリの代わりに) Hacker News ウェブサイトの実装例を掲載しており、様々なフロントエンドフレームワークの利用例を見ることができます。</p>

<p><a href="https://www.pwabuilder.com/">PWABuilder</a> を利用すると、PWA をオンラインで生成することもできます。</p>

<p>Service Worker - およびプッシュ通知 - に固有の情報を探しているならば、<a href="https://serviceworke.rs/">Service Worker Cookbook</a> も忘れずにチェックしてください。モダンなサイトにおける Service Worker のレシピ集です。</p>

<p>PWA のアプローチは挑戦する十分な価値があります。あなたのアプリでそれがどう動くのか、ぜひ自身で確認してみてください。</p>

<h2 id="Browser_support" name="Browser_support">ブラウザーの対応</h2>

<p>前述のように、PWA は単一の API に依存するのではなく、さまざまなテクノロジーを使用して、可能な限り最高の Web エクスペリエンスを提供するという目標を達成します。<br>
 <br>
 PWA に必要な重要な要素は、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Service_Worker_API">service worker</a> のサポートです。ありがたいことに、Service Worker は現在、デスクトップとモバイルの<a href="https://jakearchibald.github.io/isserviceworkerready/">すべての主要なブラウザー</a>でサポートされています。<br>
 <br>
 <a href="https://wiki.developer.mozilla.org/ja/docs/Web/Manifest">Web App Manifest</a> や <a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Push_API">Push</a>, <a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Notifications_API">Notifications</a>, <a href="https://wiki.developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Add_to_home_screen">Add to Home Screen</a> などの他の機能も幅広くサポートされています。現在、Safari では、ウェブアプリマニフェストとホーム画面に追加のサポートが制限されており、ウェブプッシュ通知はサポートされていません。ただし、他の主要なブラウザーはこれらすべての機能をサポートしています。<br>
 <br>
 これらの API の一部は実験的であり、ドキュメントはまだドラフトですが、Flipkart や AliExpress のような成功事例を見ると、ウェブアプリで既に PWA機能の一部を試して実装するよう確信するはずです。<br>
 <br>
 何よりも、progressive enhancement rule に従う必要があります。サポートされている場合にのみ、そのような拡張機能を提供するテクノロジーを使用しますが、サポートされていない場合でもアプリの基本機能を提供します。この方法で誰もが使用できるようになりますが、最新のブラウザーを使用するユーザーは PWA機能をさらに活用できます。</p>

<h2 id="An_example_application" name="An_example_application">アプリケーションの例</h2>

<p>このシリーズの記事では、 <a href="http://2017.js13kgames.com/">js13kGames 2017</a> コンペティションの <a href="http://js13kgames.com/aframe">A-Frame category</a> に提出されたゲームに関する情報をリストする、非常にシンプルなウェブサイトのソースコードを調べます。ウェブサイトの実際のコンテンツについて考える必要はありません。主なポイントは、自分のプロジェクトで PWA機能を使用する方法を学ぶことです。<br>
 <br>
 オンラインバージョンは <a href="https://mdn.github.io/pwa-examples/js13kpwa/">mdn.github.io/pwa-examples/js13kpwa</a> (<a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">ソースコードも参照</a> )で見つけることができます。これについては、次のいくつかの記事で詳しく説明します。<br>
 <br>
 それでは、このシリーズの第2部に移り、サンプルアプリの構造を見ていきましょう。</p>

<p>{{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}}</p>

<div>{{QuickLinksWithSubpages("/ja/docs/Web/Progressive_web_apps/")}}</div>