こちらの記事は、2018年8月に公開された『 What is a PWA and why should you care? 』の和訳になります。
本投稿は転載であり、本記事はこちらになります。
#はじめに
過去数年間で、スマートフォンのユーザーは劇的に増加しました。 現在、インターネットの総通信量の60％以上がスマートフォンでアクセスされています。
その理由は明らかで、持ち歩きやすいこと、比較的安い機器であること、インターネットへ簡単にアクセスができること、およびスマートフォンで可能なインターネット上のサービスが増えていることが挙げられます。 モバイルユーザーが増えると、スマートフォン上でのユーザーエクスペリエンスの最適化が不可欠になります。
多くの場合、コストや時間の制約のためにネイティブアプリを持たない中小企業にとって、Webアプリで最高のユーザーエクスペリエンスを提供することは、ユーザーを獲得する重要な機会になります。
企業に専用のネイティブモバイルアプリがある場合、多くのユーザーがハードウェアとメモリの制約や個人的な好みのためにダウンロードとインストールを避けるためにWebアプリを好む傾向があります。
企業がユーザーをできるだけ多く獲得したい場合、Webアプリの操作感とネイティブアプリの操作感はできるだけ同じくする必要があります。
Webサイトに対する期待は非常に大きいものがあります。 ほぼ25年前にWebサイトが発明されたとき、その目的は主に情報を発信することだけでした。
今やWebサイトには多くの役割が期待されています。例えば、オンラインショッピング、ソーシャルネットワーキングやチャット機能、家の検索や世界地図の閲覧、PowerPointやExcelがブラウザで使えることだってそうですよね！
原著者からのメッセージ：
Bitを使用すると、コンポーネントを高速に作成できます。コンポーネントをチームと共有し、再利用して新しいアプリを構築することができます！ 是非試してみて下さいね。
#プログレッシブWebアプリケーションに対応する
スマートフォンのWhatsappアプリを例に説明しましょう。Whatsappではネットワークに接続できなくても、アプリを開いて受信したメッセージを確認したり、返信したりすることができます。そしてスマートフォンがインターネットに接続すると、メッセージはバックグラウンドで自動的に送信されるのです。
これが、PWAのWebアプリで提供できることの一つです。 ネットワークに接続できない場合でもWebアプリをロードすることを可能にし、バックグラウンドで同期しながらシームレスに処理を実行し、ユーザーにネイティブアプリのような操作感を提供するのです。
#PWAの特別な機能とは？
通常のWebアプリケーションにはない、PWAの特別な機能について考えてみましょう。
1.信頼性
アプリはネットワーク接続がない場合や2Gのような低速なネットワークを使用している場合でも、瞬時に起動する必要があります。Googleの発表によると、ページの読み込みに3秒以上かかった場合、ユーザーの53％がそのWebサイトを使用しない傾向があります。
2.高速性
ユーザーがWebアプリを操作しているとき、スクロールとページの移動は滑らかでなければなりません。誰でも遅いスクロールは嫌なものです。
3.汎用性
アプリは、さまざまなサイズのデバイスすべてに適合する必要があります。完璧なWebアプリは、どのサイズでもぴったりとフィットします。
4.インストールが可能である
Webアプリをネイティブアプリに近づける場合、ユーザーがワンクリックでPWAにアクセスできるように、他のネイティブアプリとともにホーム画面にインストールできる必要があります。
5.スプラッシュスクリーンをもつ
PWAは、アプリの起動時にスプラッシュスクリーンを表示します。そのため、PWAがネイティブアプリのように感じられます😉
6.高度な機能を提供できる
アプリはユーザーの関心を引き付ける必要があります。 PWAは、プッシュ通知、ホーム画面アイコン、フルスクリーン、オフラインの最初のアプリなどの機能を提供して、ユーザーエンゲージメントを向上させます。
上記のすべての機能をPWAは提供できます。PWAは通常のWebアプリより洗練されているのです🎓
#PWAと最新のUIフレームワーク
PWAがReact Js、Angular 6、Vue.jsなどの最新のUIフレームワークと組み合わされていると考える人がいますが、必ずしもそうではありません。 PWAは、使用しているフレームワークとは関係なく、PWAの実現に必要な技術要素さえあれば良いのです。
#PWAはどうしてWebサイトをオフラインで使えるのか？
それがまさに私のPWAについての最初の疑問でした。 インターネットに接続せずに、どうやってWebアプリを開くことができるのか？
ネイティブアプリをダウンロードしてインストールすると、UIコンポーネントや一部のデータなどの重要なリソースがデバイスに保存されるため、インターネットに接続せずにネイティブアプリを開くことができることは誰もが知っています。 PWAも同じことをしています😀
PWAはHTMLファイル、CSSファイル、および画像をブラウザキャッシュに保存し、開発者はネットワークの利用を完全に制御できるのです。 これらはすべて、サービスワーカーによって達成されているのです。
#PWAを実現する技術要素は？
PWAには、連携して通常のWebアプリを起動する重要な技術要素がいくつかあります。 優れたPWAを開発するには、次の技術要素が必要です。
それぞれの概要を見てみましょう。
サービスワーカー
通常のWebアプリはインターネットを経由し、ネットワークに接続されていない場合は、画面にかの有名な恐竜が表示されます。
このプロセスを最適化するために次の方法をとります。 初めてダウンロードするときにサービスワーカーは必要なリソースをブラウザーキャッシュに保存します。
ユーザーが次にアプリを使用するとき、サービスワーカーはキャッシュを確認して、ネットワーク接続する前にキャッシュした画面を表示します。
サービスワーカーは、ブラウザとネットワーク間のプロキシとして機能するJavaScriptコードのコンポーネントにすぎません。 サービスワーカーはプッシュ通知を管理し、ブラウザーのキャッシュAPIを使用してまずオフラインで立ち上がるWebアプリケーションを構築する手助けをします。
これが、サービスワーカーが通常のWebサイトをPWAにする方法です。
サービスワーカーによって、デバイスのインターネット接続にかかわらず、アプリのパフォーマンスを高速化できます。
開発者は、アプリの動作と、さまざまなシナリオでアプリがどのように応答するか完全に制御できます。 サービスワーカーには、独自のライフサイクルイベントがあります。
キャッシングが完了し、オフラインアクセスの準備ができたら、キャッシングが完了したことを表示して自慢することもできます。ユーザーはこれもオフラインでアクセスできます。
マニフェストファイル
マニフェストファイルは、インストール時にホーム画面に表示されるアイコン、アプリケーションの短縮名、背景色、テーマなど、アプリケーションの情報を含む設定JSONファイルです。
マニフェストファイルが存在する場合、Chromeでは自動的にWebアプリをインストールするかどうか同意を求めるバナーが出てきます。ユーザーが同意すると、ホーム画面にアイコンが追加され、PWAがインストールされます。 オシャレですよね？ 😎
サンプルマニフェストファイルは次のようになります。
{
"short_name": "Spinner",
"name": "Fidget spinner",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/home/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/home/",
"theme_color": "#3367D6"
}
次のスクリーンショットで動作中のマニフェストファイルを確認してください。
##HTTPS
サービスワーカーでは、リクエストをインターセプトし、レスポンスを変更することもできます。 サービスワーカーは、スマートフォンですべてのアクションを実行するためPWAにはセキュアなプロトコルHTTPSが必要なのです。
サービスワーカーはプッシュ通知とバックグラウンド同期を受け取ることができます。これにより、ユーザーエクスペリエンスが確実に向上し、よりユーザーを引き留めることができます。 プッシュ通知とバックグラウンド同期はオプションですが、よりネイティブに近い操作感を提供するためにお勧めします。
#デモ
現在では、多くのPWAが公開されています。 PWAでサービスワーカーの動作を確認したい場合は、例えば、fidgetspin.xyzにアクセスし、ChromeのDevToolsの[アプリケーション]タブを開いてみてください。
1.ステータス：
サービスワーカーがアクティブ化され実行されていることを通知します。
2.オフライン：
このオプションをオンにすると、Chromeはオフライン時アプリを起動します。 タブを更新すると、ネットワークがないときPWAがどのように応答するかを検証できます。 Wi-Fiまたはデータ通信をオフにしてPWAをテストすることもできます。
3.キャッシュ：
このセクションには、サービスワーカーがキャッシュに保存するすべてのファイルが表示されます。
4.プッシュ通知と同期：
これらのセクションは、プッシュ通知とバックグラウンド同期をテストするために開発中に使用されます。
https://pwa.rocks/にアクセスしてください。沢山の優れたPWAアプリがあります。
#PWA開発ツールとライブラリ
PWAを改善し、簡単に開発できるオープンソースのツールはほとんどありません。
-
Lighthouseは、公開済のサイトまたは個人のWebページに対して実行できる監査ツールであり、PWAに必要なチェックリストを使用して1つのレポートを作成します。 Lighthouseでは、PWAの開発中に使用することで、ユーザーエクスペリエンスをさらに改善するための推奨事項をクロスチェックすることができます。
-
Workboxは、Googleによってオープンソース化されたライブラリのコレクションで、サービスワーカーファイルの作成に使用できます。 Workboxは、画像やその他のリソースなど、さまざまなキャッシュを管理します。
#PWAの成功事例
Googleは、PWAを利用した企業の成功事例を公開しています。 このページにアクセスして、企業が低速ネットワークの問題を解決した方法、ユーザーエクスペリエンスを最適化し、コンバージョンとSEOパフォーマンスを最大80％向上させた方法について詳しくご覧頂けます。
これは、世界中のさまざまな企業が直面しているさまざまな問題と、PWAを使用してそれをどのように解決したかを示しています。 PWAがどのように役立つかについての示唆も得られると確信しています。
ご質問やご提案がございましたら、お気軽にコメントしてください。この投稿が気に入ったら、拍手を下さい。 一緒に学習と共有を続けましょう😊
この記事の内容があなたの助けになったら、コーヒーをご馳走してください。
翻訳協力
Author: Mahesh Haldar
Thank you for letting us share your knowledge!
記事選定: yokomichi
翻訳/技術監査: Sumihiro Kawamura / @aoharu
Markdown化: @aoharu