• Home
  • ブログ
  • 【2023年】PWAとは?初心者向けのProgressive Web Appsを徹底解説

【2023年】PWAとは?初心者向けのProgressive Web Appsを徹底解説

本記事では、Progressive Web Apps(PWAs)とは何か、そのコア原則は何か、Web アプリやモバイルアプリとの違いについてご紹介していきます。

また、この記事が PWAWebレスポンシブネイティブ アプリのどちらが適しているか悩んでいる方のヒントになりますと幸いです。
それでは本題に入りましょう!

ウェブの変化によりPWAsが誕生

ウェブはここ数年で大きく変化しました。例えば、 2000 年代初頭、Web ページは新聞記事や百科事典のエントリに似ていましたが、10 年間で、より洗練されたブログ、ビデオ、および e コマース サイトに進化しました。

スマートフォンの登場により、ますます多くのユーザーがモバイル デバイスで Web を閲覧するようになりました。 デジタル メディアの使用量では、モバイル アプリが Web サイトを急速に上回りました。アプリはより多くの機能を提供し、ユーザーとのより良い関係を築くことができるため、企業は Web サイトからアプリに関心を移しました。

一方、US Mobile App Report 2017 によると、スマートフォンを利用しているユーザーの半分は1 か月間新しいアプリをインストールしていません。
Web の次の大きなものであるProgressive Web Apps(PWAs)は、モバイル アプリの機能と、現代のインターネットの基盤であるアクセシビリティ、発見可能性、および使いやすさを組み合わせることを目的としています。

Progressive Web Apps(PWAs)とは?

Progressive Web Apps(PWAs)

PWAとはProgressive Web Appsという、Web を通じて提供されるアプリケーション ソフトウェアの一種であり、HTML、CSS、JavaScript、WebAssembly などの一般的な Web テクノロジを使用して構築されます。そして、以下の要素を持っています。

信頼性(Reliable):PWAは、ネットワークの状態 (つまり、オフラインまたは遅い接続) に関係なくロードされ、ユーザーのインターフェースを即座に表示する必要があります。

高速(Fast):ユーザーは自分のアクション (スイッチの切り替え、入力など) に対する応答をすぐに受け取れ、表示させます。アニメーションなどもスムーズです。

エンゲージメント(Engaging):PWA は、ネイティブのアプリと同等のエクスペリエンスを提供します。 ユーザーはそれらを自分のデバイスにインストールでき、カスタムのアイコンを表示したり、デバイスの機能 (プッシュ通知、カメラ、Bluetooth など) を使用したりできます。

PWAsは、一連のテクノロジではなく、Webプラットフォームのアクセシビリティを維持しながら、ネイティブのような動作に焦点を当てたユーザーエクスペリエンスです。

PWA は特定のフレームワークに限定されず、任意のフレームワークで構築することができ、フレームワークを一切使わなずに構築できます。そこで、どのフレームワークをPWA開発するかというよりは、考え方・アプローチ・設計の観点から接近し、最後にフレームワークやAPIsなどを考えると良いです。

PWAで開発する場合、Web開発と同じような流れで進めても大丈夫です。すると通常は次のような傾向が見られます。

・​​Rich Internet Applications(RIA):柔軟で優れた表現力や操作性を持ったWebアプリケーション。

・Single Page Application(SPA):単一のページでコンテンツの切り替えを行うWeb アプリケーションのアーキテクチャ。

・Responsive Web Design(RWD):どんな大きさの画面でも見やすく、使いやすいWebサイトにするために必要なものです。1つのHTMLで配信し、CSSはデバイスごとに用意して表示を変えさせます。

・JavaScript-based Native App:Electron、Cordova、Ionic、React Native などのフレームワークを使用し開発する技術です。

PWA は、Web プラットフォームに対して高まる期待を受け入れ、可能な限り最高のものを提供しようとします。
多くの人にとって、Web アプリケーションを PWA として定義するための最低限の要件は、オフラインで実行する機能 (少なくともアプリをオフラインで開くことができることを意味します) と、ホーム画面に追加する機能でしょう。しかしながらこれらの機能を追加するだけでは Web アプリが PWA にはならないことを理解する必要があります。ネイティブ アプリの感覚がまだ欠けている可能性があるからです。

Progressive Web Applications – PWAsのコア原則

PWAのコア原則

PWAのコア原則、その1:​​信頼性

オフラインサポート

PWA は、ホーム画面から起動すると、ネットワークの状態に関係なく起動することができます。 これは、クライアント側がJavascriptコードにワーカーサービスを利用したら実現できます。 通常、PWA の場合、次のシナリオが発生します。

・ユーザーが初めてアプリケーションを開きます。
・クライアント側の JavaScript コードは Service Worker を登録します。
・Service Worker は、Web アプリケーションを表示するために必要なリソースを取得してキャッシュします。
・次にアプリケーションが開かれると、Service Worker は、ページを表示するために必要なリソースをダウンロードするためにブラウザーによって行われたネットワーク要求 (HTML ファイルの最初のサーバー呼び出しを含む) をインターセプトし、必要に応じてキャッシュされたバージョンで応答できます。

PWA は、ユーザーがオフラインのときに全部の情報を表示する必要はなく、ネットワークがダウンしているというメッセージをユーザーに表示するだけで十分です。 アプリケーションによっては、オフライン サポートはそれ以上の意味を持つ場合があります。

例えば、
・ニュースアプリは、アプリが開かれるたびに最も重要な記事またはユーザーに関連する記事をキャッシュし、接続がオフラインのときはいつでもユーザーがそれらを読むことができるようにすることができます。
・メッセージング アプリは、最近のメッセージが届いたときに保存し、ユーザーがオフラインで閲覧できるようにすることができます。
・共同スプレッドシート アプリは、最近のドキュメントを保存し、ユーザーの接続がオンラインに戻ったときに同期されるようにすることができます。

また、オフラインのサポートは Service Worker の使用に限定されず、デザイナーやプロダクトのオーナーがアプリケーションがオフラインの時、何をするかを考えてから始まります。

遅いネットワーク状態

PWA は、低速のネットワーク状態でも動作することができます。 アプリ内のナビゲーションは、モバイルアプリの場合と同様に、帯域幅と遅延に関係なくスムーズに動作する必要があります。

繰り返しになりますが、遅延ロードされたルートをキャッシュすることによって、Service Worker はそのようなシナリオで対応できます。さらに、リソースを表示するためにネットワークを使う場合は、スケルトン画面を使用して進行状況を示すことができます。

PWAのコア原則、その2:パフォーマンス

パフォーマンスは、あらゆる Web アプリケーションの非常に重要な指標です。 Google は次のように報告しています。
・サイトの読み込みが 3 秒を超えると、53% のユーザーがサイトを放棄します。
・ページの読み込み時間が 1 秒から 3 秒になると、直帰率が 32% 増加します。
・ページの読み込み時間が 1 秒から 5 秒になると、直帰率が 90% 増加します。

Railモデル

Google のパフォーマンスエンジニアは、RAIL と呼ばれるパフォーマンスを測定するためのユニバーサルモデルを開発しました。

RAIL は、コンピューター プログラムと人間の相互作用を研究することによって作成されたユーザー中心のモデルです。RAIL モデルによって設定された目標は、ユーザー指向のソフトウェア プログラムに適用できます。 Web サイト、モバイルおよびデスクトップ アプリケーション、およびビデオ ゲームなど

RAIL は、主要なパフォーマンスメトリックを表す頭字語です。
・Respond:100 ミリ秒でユーザーのインプットに応答します。
・Animate:アニメーションは 60fps で実行するべき。
・Idle:アイドル時間を最大化します。
・Load:1 秒未満でコンテンツをユーザーに表示し、5 秒未満でインタラクティブになります。

PRPLパターン

PRPL パターンを適用すると、前述の目標を達成するのに大いに役立ちます。PRPL は次の略です。
・Push:URL ルートの重要なリソースをプッシュします。
・Render:初期ルートをレンダリングします。
・Pre-cache:残りのルートを事前にキャッシュします。
・Lazy-load:必要に応じて残りのルートを遅延ロードして作成します。

パフォーマンス測定ツール

手動測定ツール
・ブラウザの開発者ツール:現在、Google Chrome には最高のパフォーマンスツールがあります。
・JSPerf.com、ESBench、Speedracer for Chrome などのベンチマーク
分析は、さまざまなプラットフォーム上の Web サイトと Web アプリケーションの両方で、実際のユーザー パフォーマンスを追跡するのに役立ちます。

自動測定ツール
・Lighthouse は、パフォーマンス テストのプロセスを自動化し、CI サーバー上で実行することもできます。

PWAのコア原則、その3:エンゲージメント

PWA は、ネイティブ アプリのように感じられ、ネイティブ アプリの機能を備えている必要があります。

すべての主要なモバイルプラットフォームで、PWA をユーザーのホーム画面にインストールして、ブラウザコントロールを表示せずに開くことができます。 デスクトップ プラットフォームでは、PWA をタスクバーやドックに追加したり、ショートカットをデスクトップに追加したりできますが、現時点ではまだブラウザで開くことができます。

Web プラットフォームは非常に成長しており、次のような機能のAPIを提供しています。
・位置情報
・カメラ
・プッシュ通知
・ネイティブ プラットフォームの支払い (Apple Pay、G Pay など)
・振動
・ブルートゥース
・USBなど

PWAの導入事例を紹介

PWA は、ユーザー エンゲージメントとコンバージョンを大幅に向上させることができます。 読み込み時間の短縮とインターフェースの高速化により、重要な指標に影響を与える、より長く魅力的なインタラクションが得られます。

セッションあたりのページ数、セッションの長さ:
・Twitter では、Twitter のセッションあたりのページ数が 65% 増加し、送信されたツイートの数が 75% 増加しました。
・AliExpress では、アクセスされるページが 100% 増加し、セッションあたりの滞在時間が 74% 増加しました。

変換速度:
・AliExpress は、新規ユーザーのコンバージョン率を 104% 増加させました。
・Trivago は、ホテルのオファーのクリック率を 97% 向上させました。
・OLX は、広告のクリック率を 146% 向上させました。 プッシュ通知を使用することで、ユーザーの再エンゲージメントが 250% 増加しました。
・Treebo はコンバージョン率を 4 倍に高め、
・Alibaba はコンバージョンを 76% 増加させました。

直帰率:
・OLX は直帰率を 80% 削減しました。
・Housing com は直帰率を 40% 下げました。

参考:12つのPWAアプリの導入事例を詳しく紹介

PWAの各プラットフォームでの機能比較

Web プラットフォームは大きく成長しましたが、一部のデバイスではモバイル アプリの基本的な機能がサポートされていません。

プッシュ通知は Android で完全にサポートされています。つまり、アプリとブラウザーを閉じても、デバイスは引き続き通知を受け取ることができます。 デスクトップ デバイスでは、ブラウザが開いているときにのみ通知を受け取ります (Web サイトを閉じることはできますが、ブラウザが実行されている必要があります)。iOS デバイスでは、ブラウザーのプッシュ通知はまったくサポートされていません。

・バックグラウンド位置情報サービスはブラウザでは利用できません。つまり、位置情報に基づいて一部のタスクを自動化するアプリを作成することはできません (ホーム コントロール システムなど)。

・Bluetooth、USB、NFC は Chrome ブラウザでのみサポートされています。

・デバイス認証は現在開発中であり、Web 上で指紋、TouchID、FaceID に基づいてユーザーを認証および/または承認する方法は現在ありません。

一部の重要な機能が欠けている可能性がありますが、PWA が従うべき原則がネイティブ アプリ (特に、React Native などの Web テクノロジを使用して構築されたもの) に適用できないという意味ではありません。

PWA は優れたユーザー エクスペリエンスを提供することに重点を置いているため、どのアプリでも、達成するために設定した目標に従い、ユーザーにアピールできます。

参考:PWAとネイティブアプリの比較と選定基準を説明

PWA 開発を開始するための要件概要

PWA の構築を開始するのにそれほど時間はかかりません。 必要なものがいくつかあるだけで、準備完了です。

ツール:PWA を開発するための最もよく知られているテクノロジは AngularJS です。 その他には、ReactJS と Polymer が含まれます。

HTTPS:HTTPS 接続のサーバーが必要です。 これにより、ユーザーのデータが確実に保護されます。 サイトにセキュリティ層を追加します。

アプリケーション Sheel:アプリが読み込まれたときの第一印象が良くなります。 簡単に言えば、これはユーザーがアプリを初めて操作するときに表示されるものです。

Service Workers:PWA の背後にある主要なテクノロジの 1 つです。 アプリのオフライン作業をサポートし、高度なキャッシュを実行し、バックグラウンド タスクを実行します。 

Manifestファイル:これは、ジェネレーターで作成された JSON ファイルです。 このファイルには、PWA がどのように表示され、機能するかを示す情報が含まれています。 PWA の名前、説明、アイコン、色、その他の機能を決定できます。

{
"short_name": "Miichisoft Blogger",  
"name": "Miichisoft Blogger",  
"description": "All dev stories under one roof",
"theme_color": "#eb5252",  
"background_color": "#000000",  
"display": "fullscreen",  
"Scope": "/",  "orientation": "portrait",  
"icons": [    
    {
        "src": "images/android/android-launchericon-48-48.png",      
        "type": "image/png",      
        "sizes": "48x48"
    },
    {      
        "src": "images/android/android-launchericon-96-96.png",
        "type": "image/png",      
        "sizes": "96x96"    
    },    
    {      
        "src": "images/android/android-launchericon-192-192.png",
        "type": "image/png",      
        "sizes": "192x192"    
    }  
   ],  
       "start_url": "index.html?utm_source=homescreen"
  }

アプリ監査:Google Lighthouse ツールを使用することで可能です。 Google Lighthouse はオープンソース ソフトウェアであるため、誰でも任意の Web ページで使用できます。 Google は PWA の強力な擁護者であり、Web の未来として PWA を推し進めています。 Lighthouse を使用すると、PWA の速度、アクセシビリティ、および SEO への対応状況を確認できます。

まとめ

本記事はProgressive Web Apps(PWAs)の簡単な情報を紹介しました。

アメリカにはPWAを検討・導入している企業(開発者も含む)が増えてきましたが、日本市場ではまだまだ先になります。

そこでPWAsをセニアとして開発できるリソースが足りない時があります。開発は勿論のこと、アプリをローンチしてからの改修・機能追加なども必要になりますので、しっかりの体制を心がけましょう。

MiichisoftはWeb系の開発チームとPWAsに対応可能なチームがありますので、何かサポートすることがありましたら、気軽にご相談くださいませ。

ご連絡お待ちしております。
よろしくお願いいたします。

ソース:
   freeCodeCamp (What is a PWA? Progressive Web Apps for Beginners)
   BrainHub (Progressive Web Application (PWA) – Beginners’ Guide)

関連記事

スマートコントラクトの市場需要、特徴と開発流れを解説

Post Views: 519 スマートコントラクトはトランザクションプロトコルであり、ブロックチェーン上の事前にプログラムされた条件またはアクションであり、契約条件に従ってイベントの制御、実装、および文書化を自動化することを目的としています。 これにより、仲介者や裁定取引業者の必要性が減り、不正なスキームが大幅に減少します。DAppsの開発にはスマートコントラクトが不可欠です。さらに、それらは分散型ネットワークを作成する上で重要な部分です。 本記事はスマートコントラクトの市場需要、特徴と開発流れをご紹介します。 スマートコントラクトの概要と市場規模 イーサリアム の コントラクト コントラクトプラットフォーム だけでなく だけでなく だけでなく だけでなく だけでなく だけでなく は 分散型 金融

仮想通貨ウォレットとは?種類、開発流れと主な機能を解説

Post Views: 505 暗号通貨が世界の金融空間に深くて恒久的に定着したことを疑う人はほとんどいません。その結果、このエコシステムをうまく拡張し、使いやすくするための一種の付属製品が作成されています。通貨があるということは、どこかに保管しなければならないということです。これが暗号ウォレットの誕生であり、ユーザーは暗号通貨取引を迅速かつ安全に実行できます。 ただし、複雑すぎて使用できない技術は、十分な人気を得て普及することはできません。 そのため、暗号資産ウォレット用のアプリを作成するという決定は非常に成功し、実用的であることが証明されています。この記事では、仮想通貨ウォレットとは何か、作成方法、およびアプリケーションを開発する際に注意すべき点について説明します。 仮想通貨ウォレットとは? 仮想通貨ウォレット(Crypto Wallet)は、特定のブロックチェーンネットワークの参加者間でデジタルトランザクションまたは暗号通貨を転送し、ブロックチェーンスマートコントラクトをトリガーするアプリです。 そのストレージ機能は電子財布と同じですが、暗号通貨にも適用されます。 これは、暗号通貨を安全に保管し、取引記録 (売買、入金) を追跡するソフトウェアです。ウォレットは、識別子およびブロックチェーン アカウントとしても機能します。 暗号通貨ウォレットはスマートフォンにインストールできるため、非常に簡単です。 ラップトップ、任意のブラウザー、さらにはポケットに保存できます。 ウォレットは取引の仲介者を排除します。これにより、顧客は即座に操作を行うことができます。暗号資産ウォレットを使用すると、取引手数料が大幅に削減されるか、ゼロになることさえあります。その結果、ユーザーの満足度と交流の強度が高まります。 参考:Web 3.0 とは?ブロックチェーンに基づく次世代ネットワーク

有望なDeFiのサービスと開発流れを徹底解説

Post Views: 508 分散型金融、または略してDeFi(英語:​​decentralized finance)は、テクノロジーベースのブロックチェーンネットワークであり、管理当局なしで自分のポケットに銀行サービスを提供し、自分は自分そのものの銀行機関です。 DeFi の魅力は、個人データのセキュリティ、コードがすべてに公開されていることによるプロセスの透明性、高金利、仲介者の不在にあります。さらに、このアイデアは投資家にとって非常に魅力的であるように思われたため、2022 年 1 月の時点で、約 923 億ドルが分散型金融で回転しています。 このようにかなりの金額にもかかわらず、市場はまだ過飽和には程遠いです。 さらに、それはその旅を始めています。したがって、DeFi開発に取り掛かることを計画している場合、この機関車の最後のステップにジャンプすることは絶対にありません。まだまだ先!そのため、DeFi 開発サービス市場をナビゲートして、信頼できる会社からサービスを探すことが非常に重要です。 DeFi開発の流れ DeFi 開発は複雑なプロセスであり、Web3領域の仕様により、従来の開発とは多くの分岐、機能、および複雑さがあるため、多少異なります。したがって、絶対にすべての専門家になることは不可能です。 各開発チームは、理想的な結果を達成するために、特定のソリューションセットに対して研鑽を積む必要があります。したがって、膨大な人数のスタッフを雇用し、適応させ、一緒に作業する時間を与えることは意味がありません。成功したプロジェクトを背後に持っていない専門家を外部委託することをお勧めします。 参考:DeFIとは?

Progressive Web Apps – PWAは将来性があるか?

Post Views: 515 人口の3分の2がモバイルデバイスで接続されている世界では、注目を集めたいなら強力なモバイルプレゼンスは不可欠な要素です。 問題なのは、モバイル アプリ (iOS と Android) とレスポンシブ Web サイトの両方を開発および維持することなく、どうやってモバイルユーザーとデスクトップユーザーを同じようにターゲットにできるか?という。 近年、多くの Web 開発者はProgressive Web Apps(PWA)アプリが最良の答えであると確信するようになりました。この記事では、それらが本当にWeb デザインの未来、将来性があるかどうかご紹介いたします。 Progressive Web

【2023年】12つのPWAアプリの導入事例を詳しく紹介

Post Views: 538 オンラインでマーケティングやEコマースなどをする際、成功の一つのポイントはシステムとアプリのパフォーマンスに不可欠な要素と言っても過言ではありません。それで多くのWebサイトはProgressive Web Apps(PWAs)と呼ばれる新しい技術標準を利用してパフォーマンスを向上させています。 GoogleでサポートされているWebアプリPWAsは、デバイスやネットワークの状態に関係なく、高レベルのパフォーマンスを提供することを目的としています。 信頼性が高く、速く、魅力的なネイティブアプリの品質でPWAを強化しているため、 多くの注目を集めています。 ​​Progressive Web Apps – PWAが従来のレスポンシブWebサイトとどのように異なるかを深く理解するために、さまざまな業界にわたる印象的なPWAアプリの例を以下のように紹介していきたいと思います。 それでは、始めましょう! PWAアプリの導入事例、その1:Starbucksアプリ スターバックスは、すべての顧客にアクセス可能でユーザーフレンドリーなオンライン注文を提供することを目指して、Web上に注文システムのPWAを構築しました。 言い換えれば、オフラインモードで実行する機能により、スターバックスPWAを使用すると、顧客はメニューを閲覧し、注文をカスタマイズし、アイテムをカートに追加できます。 オンラインでは、場所固有の価格設定を表示し、食べ物や飲み物の注文を行うことができます。 PWAのほとんどはネットワーク接続なしで利用できるため、1日を通して接続性に出入りする可能性のある顧客や、接続の信頼性が低い農村コミュニティのような新興市場に最適です。

【2023年】PWAとネイティブアプリを比較・選択方法を解説

Post Views: 519 消費者はモバイルの使用に不可欠です。ユーザーはデスクトップよりもモバイルで 2 倍の量のコンテンツを視聴しており、企業がエンゲージメントを生み出し、カスタマー エクスペリエンスを向上させる絶好の機会を生み出しています。 長い間、企業はモバイル アプリの開発に関して 2 つの選択肢しかありませんでした。 現在、彼らには 3 つ目の選択肢があります。Progressive Web Apps (PWAs)です。 PWA技術は、モバイルでのプレゼンスを確立するための最良の方法としてしばしば歓迎されますが、実際にそのように優れているのでしょうか? このPWAアプリとネイティブアプリの比較で詳しくご紹介します。 エンジニアの観点からPWA