この翻訳は不完全です。英語から この記事を翻訳 してください。

この記事ではプログレッシブウェブアプリ (Progressive Web Apps) (PWA) を紹介し、普通のウェブアプリよりもどのような利点があるのかを説明します。

プログレッシブウェブアプリとは

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

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

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

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

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

しかし、PWA は Web を素晴らしいものにする既存の機能を一切排除することなく、これら全てとそれ以上の機能を提供します。

何がアプリを PWA にするのか

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

更に、アプリの完成度をパーセントで測定するツールもあります (今の所は Lighthouse が最も有名です)。様々な技術的優位性を実装することでアプリをより進化的にすることができ、より高い Lighthouse のスコアを得ることができます。しかし、このスコアは大まかな指標でしかありません。

Web アプリが PWA として見なされるために、いくつかの重要な原則があります。

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

取り組む価値はありますか?

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

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

PWAの道を試みてネイティブアプリよりもウェブサイト体験の向上を選択し、その結果として大きな利益を得るに至った企業の成功例は多数あります。PWA Statsというウェブサイトはこのような利益を示すたくさんの調査を公開しています。

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

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

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

PWABuilderを利用すると、PWAをオンラインで生成することもできます。

Service Worker(やプッシュ通知)に固有の情報を探しているならば、Service Worker Cookbookも忘れずにチェックしてください。モダンなサイトにおけるService Workerのレシピ集です。

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

ブラウザーの対応

As mentioned before, PWAs don't depend on a single API, but rather using various technologies to achieve the goal of delivering the best web experience possible.

The key ingredient required for PWAs is service worker support. Thankfully service workers are now supported on all major browsers on desktop and mobile.

Other features such as Web App Manifest, Push, Notifications, and Add to Home Screen functionality have wide support too. Currently Safari has limited support for Web App Manifest and Add to Home Screen and no support for web push notifications. However, other major browsers support all these features.

Some of these APIs are experimental, with the documentation still in draft, but seeing success stories like those of Flipkart and AliExpress should convince you to try and implement some of the PWA features in your web app already.

Above all you should follow the progressive enhancement rule — use the technologies that provide such enhancements only where they are supported, but still offer the basic functionality of your app if it isn't. This way everybody will be able to use it, but those with modern browsers will benefit from PWA features even more.

アプリケーションの例

In this series of articles we will examine the source code of a super simple website that lists information about games submitted to the A-Frame category in the js13kGames 2017 competition. You don't have to think about what the actual content on the website is — the main point is to learn how to use PWA features in your own projects.

You can find the online version at mdn.github.io/pwa-examples/js13kpwa (also see the source code), which we will be carefully explaining in the next few articles.

Now, let's move to the second part of this series, where we’ll be looking at the structure of our example app.

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

このページの貢献者: ginpei, comame, mfuji09, mdnwebdocs-bot, chrisdavidmills, szk0u
最終更新者: ginpei,