このブログ記事にたどり着いたあなたは、おそらくPWAという言葉をどこかで聞いたことがあると思います。 よかったですね – PWA は 2018 年が記憶されるものですから、あなたはまさに最先端にいるのです。 なんとエキサイティングなことでしょう。 このブログ記事では、この用語が実際に何を意味するのか、なぜそれを気にする必要があるのかを説明します。
(source: Google Developer site)
PWAとは？
PWAとはProgressive Web Applicationの略で、プログレッシブ ウェブ アプリケーションのことです。 2つに分けて検証してみましょう。 後半の2つの単語（「Web Application」）がそれを物語っています。 PWAはWebアプリケーションです。 ここで、Webアプリケーションとは、単に、例えばTwitterのようなWebサイトとして動作するアプリを意味します。 用語の最初の部分である「プログレッシブ」は、ブラウザの機能に応じてユーザー体験が徐々に向上することを意味します。 つまり、ウェブアプリケーションは古いブラウザーでも問題なく動作しますが、ユーザーが新しいテクノロジーをサポートしているブラウザーであれば、新しいテクノロジーを利用してエクスペリエンスを向上させることができるのです。 簡単そうでしょう？ では、この用語はどこから来たのでしょうか。
Progressive とは、ブラウザーの機能に基づいてユーザー エクスペリエンスが徐々に強化されることを意味します
この用語は、Google Chrome エンジニアの Alex Russell が 2015 年に自身のブログ投稿で発表したものです。 それ以来、Google はその利用を積極的に推進し、さらに詳しく説明したサイトなど、この話題に関する多くのリソースを提供しています。
PWA に関するプレゼンテーションを行う際、私はいつもこの時点で同じ混乱に遭遇します。 「それは技術なのか？ 標準ですか？ Googleが所有/特許を持つものなのか？” いいえ、そのどれでもありません。 アプリケーションを設計し構築するための特定の方法を説明するための用語に過ぎません。
以下は、Alex Russell 氏による PWA のオリジナルの 9 つの特性と、この文脈での意味についての説明です：
- Responsive: ページはさまざまな画面サイズ (例: 携帯電話、タブレット、デスクトップ) で見栄えがする。 インターネット接続なしで機能する
- App-like-interactions: ネイティブアプリケーションのようなルック＆フィール
- Fresh: 常に最新であること
- Safe: セキュアな接続を利用して、複数の種類のセキュリティ脅威を軽減する
- Discoverable: ブラウザは自動的に PWA を識別する
- Re-engageable (再係合可能)。 プッシュ通知などを使ってユーザーをアプリに呼び戻すことができる
- Installable: ネイティブ アプリのようにホーム画面に保存できるが、App Store のような余分な手間がかからない
- Linkable:
- ホーム画面にインストール可能
- カメラ、ジオロケーション、振動、支払いなど、複数のネイティブ API にアクセス可能
【注意】このブログ投稿者のために、重要な機能性を紹介します。
- Push Notification のサポート
- Offline usage
- Full screen and splash screen support
(source: Alex Russell の blog post)
以上のすべての結論として、PWA ではネイティブ アプリケーションができることのほとんどを実行でき、ネイティブと Web アプリができることの間のギャップに常に近づいているのです。
なぜ今なのか
今までに、PWA はアプリケーションを実装するデフォルトの方法ではないので、このすべてがとても良く聞こえ、何か裏があるに違いないと考えているかもしれません。 そうです、そのとおりです。 キャッチはあります。 いくつかの環境では、PWAに力を与える技術のサポートが不足しています。 AndroidのサポートはAndroid 5からしばらく続いており、世界中のAndroid端末の80%以上（出典：GoogleのAndroid統計）がPWAを実装するために必要な技術をサポートしていることになる。 ヨーロッパや北米だけを考慮すると、その普及率はさらに高くなります。 3557>残念ながら、携帯電話市場を共有するもう1つの主要なプレーヤーは、この技術の実装にあまり熱心ではありません（その理由をお読みください）。 iOSのサポートは欠落しており、PWAの幅広い採用を妨げています。 しかし、まもなくリリースされるiOS 11.3では、iOSでもサポートされる予定です。 幸いなことに、iOSの新バージョンの採用は比較的早いので、今年後半には高レベルのサポートが提供されるものと思われます。 参考までに、Appleによると、バージョン10と11は、そこで使用されているすべてのiOSバージョンの93％を占めています。
PWAについて話すときは、しばしばモバイル環境に焦点が当てられますが、デスクトップでも機能します。 今月初め、Microsoftから、EdgeとWindows 10でPWAがサポートされるようになったという重要な発表がありました。 Chrome と Firefox はすでに PWA をサポートしており、デスクトップ Safari の次のリリースもそうなる予定です。 Twitter Lite
PWA の最も有名な例は、Twitter Lite と呼ばれる Twitter の PWA バージョンです (Android またはデスクトップで mobile.twitter.com で試してみてください)。 Twitter は、PWA 版を構築した理由も公表しています。 この投稿からいくつかの事実を紹介すると、ネイティブアプリと比較して、PWA版のサイズはわずか1～3％で、平均ロード時間は30％短縮されています。
PWAの他の有名な例としては、Forbes、Trivago、Washington Post、Telegram、Alibaba、最近ではGoogle Maps Goが挙げられます。 PWAのディレクトリも公開されています。
結論
2018年は、PWAの年になると予想されます。 すでにツールは素晴らしいレベルにあり、どんどんPWAが登場してきています。 iOSでのサポートが高度に充実すれば、PWAはネイティブアプリの現実的な選択肢となる。 PWAが正しい選択かどうか検討している場合は、「ネイティブアプリの代わりにPWAを使うべきか」というガイドを書くので、近日中にチェックしてみてください。 アーキテクチャの選択、設計、PWAの実装で助けが必要な場合でも、遠慮なくご連絡ください。
Gofore BLOGからのさらなる読み物
アジャイル変革の実践 – パート1
アジャイル変革の実践 – パート2
何がポイントでアジャイル拡大するか