プログレッシブウェブアプリとは何ですか？
この文章は機械翻訳によって提供されています。原文は英語であり、OpenAIによって翻訳されました。
近代的なウェブ開発は、基本的なHTML、CSS、JavaScriptのサイトの初期の日々から長い道のりを歩んできました。最近では、ウェブブラウザに限定されていた焦点は、iOSおよびAndroidデバイス向けに構築されたネイティブモバイルアプリに移っています。ネイティブアプリは、従来のウェブサイトでは提供できなかった、より没入型のユーザーエクスペリエンスやシームレスなオフライン利用など、多くの機能を提供します。
ほとんどの大規模なオンラインビジネスは、オンラインバンキング、フードデリバリーやその他のeコマースサイト、ソーシャルメディア、政府サービスなど、さまざまな活動において、顧客にネイティブウェブアプリのエクスペリエンスを提供しています。そのようなアプリのほぼ普及率は、「それに対応するアプリがあると思う！」という表現を生み出しました。
ウェブ技術の状態は、時間の経過とともに改善し続けてきたため、そのようなネイティブアプリと同様の方法で機能するウェブアプリのニーズが増加し、ついに「プログレッシブウェブアプリ」（またはPWA）が生まれました。
プログレッシブウェブアプリとは具体的には何ですか？
前述のように、PWAはHTML、CSS、JavaScriptを使用して構築されたアプリケーションです。ただし、これらのアプリには、ネイティブアプリのように機能し、感じるための革新が含まれています。
主な改善点のいくつかには、プッシュ通知やオフラインでのアプリの使用があります。PWAはまた、現代のAPIの力を活用して、ウェブサーバーからページを常にリロードすることなく、リアルタイムにコンテンツを非同期に配信します。PWAフレームワークには、開発をより簡単かつ迅速にするためのさまざまなオープンソースのコミュニティプラグインやオプションが付属しています（ゼロから構築する必要がないため）。PWAはまた、ダウンロード可能であり、ネイティブアプリのようにデバイスにインストールすることもできます（ただし、いくつかの制限があります）。
PWAの主な利点の1つは、企業がiOSおよびAndroidデバイスの両方で実行される単一のアプリを構築できることです。大企業は引き続きネイティブアプリも構築しますが（通常はWebアプリを試してみる新規ユーザーを対象にダウンロードを促す）、企業が小規模で開発リソースが限られている場合は、単一のコードベースを維持し、PWAを提供することも可能です。
ネイティブアプリとウェブアプリの両方を提供する多くの大企業は、Uber、Tiktok、Spotify、Twitterなど、ウェブオファリングにPWAアプローチを取っています。これらのほとんどのPWAアプリは、ユーザーのデバイスのホーム画面にインストールすることができます。
PWAの共通機能
レスポンシブデザイン
PWAはデスクトップおよびモバイルブラウザを含むウェブブラウザ向けに構築されているため、すべてのデバイスサイズでうまく動作することが重要です。これは、レスポンシブデザインの原則（使用されているデバイスのメディアクエリに応じてCSSクラスをアクティブにするなど）によって達成することができます。または、デバイスに応じてロードされる一意のデスクトップ、タブレット、またはモバイルビューを持つことでも達成できます。どちらにせよ、ウェブアプリはどの画面サイズでもシームレスに動作し、任意のビューポートサイズでコンテンツを表示する必要があります。
PWAのインストールオプション
PWAはユーザーのデバイスのホーム画面にインストールすることができ、ネイティブアプリと似た外観と感触を提供します。これにより、ユーザーはアプリを使用するたびにウェブサイトに直接アクセスする必要がなくなり、ユーザーエンゲージメントが大幅に向上します。
オフラインでの利用可能性
ほとんどのPWAの主な機能は、コンテンツをキャッシュまたはローカルに保存し、アプリがオフラインの状態でもシームレスに動作するようにすることです。これは、ユーザーの関与を維持し、より良いユーザーエクスペリエンスを提供するために重要です（ネイティブアプリと同様）。オフラインでの使用例には、オンラインで投稿されたコンテンツの読み取りや編集、またはアプリがインターネットに接続されていない場合でもデバイス上のメディアファイル（音楽やビデオなど）を保存する能力が含まれます。
SEO
PWAがネイティブアプリよりも優れている主な利点の1つは、オンライン検索結果に直接表示されることができることです。ネイティブアプリはランディングページで発見されたり、ウェブサイトにリンクされたりすることができますが、通常はまずアプリストアからダウンロードする必要があります。PWAはまだウェブサイトであり、Googleなどの検索エンジンでインデックスされるため、人気のあるPWAはSEOの観点から有益です。
PWAとネイティブアプリの主な比較
開発コスト
PWAの開発、テスト、および保守コストは、通常、ネイティブアプリよりもはるかに安くなります。ネイティブアプリには、特定の言語（iOSおよびAndroid用）に特化した開発チームが必要であり、ほとんどの場合、両方が必要です。
PWAの場合、フロントエンドはほぼ常にJavaScriptで構築され、React、Vue、Angularなどのモダンなフレームワークがよく使用されます。JavaScriptの開発者は一般的により多目的（フルスタック）であり、PWAがサービスするすべてのプラットフォームに対して単一のコードベースを維持するだけで済みます。また、iOSやAndroidのSDKと連携する必要がないため、複雑さも少なくなります。
全体的に、これによりコストが大幅に削減され、小規模企業やスタートアップにとってはネイティブアプリが必要になるまでの間、はるかに実現可能なオプションとなります。
セキュリティ
ネイティブアプリは通常、それらが構築されたオペレーティングシステムのインフラストラクチャによってセキュアですが、これには多くの対策が必要です（マルチファクタ認証など）。
PWAはHTTPSプロトコル上で実行する必要があり、これによりクライアントからサーバへの通信が非常にセキュアになります。 ただし、いくつかの現代のJavaScriptフレームワークでは（ブラウザに脆弱な情報を保存するなど）、脆弱性が組み込まれる可能性があるため、これに対する対策が必要です。
PWAの構築に必要な主要な要件
フロントエンドフレームワーク
PWAを構築するための最も一般的なJavaScriptフレームワークはReact、Vue、Angularです。 特にReact用のNext.jsおよびVue用のNuxt.jsなどのオープンソースフレームワークには、ボタンのクリック数回でインストールでき、必要に応じて構成できるPWAプロジェクトが組み込まれています。
HTTPSプロトコル
https接続は、PWAのフロントエンドとバックエンドサーバー間でデータを安全に転送するために必要です。
フロントエンドシェル
これはユーザーが通常最初に見るビューであり、通常はサーバーサイドでレンダリングされたHTMLで、アプリの骨格として機能します。 このビューは非常に速く読み込まれ、必要に応じてユーザーに何が起こっているかを示すためのプレースホルダーまたはローディングビューコンポーネントを持つべきです。 次に、APIを介してデータが引き出され、読み込まれたときにアプリに挿入されます。
サービスワーカー
PWAがオフラインで機能し続けるためには、バックグラウンドコードを実行し、必要に応じてデータを高度にキャッシュするサービスワーカーが必要です。 サービスワーカーの主な機能はネットワークの変更を検出し、データを非同期に取得し、ユーザーのインターネット接続が復元されたときに通知をプッシュすることです。 これにより、全体としてユーザーエクスペリエンスが大幅に向上します。
KurocoはPWAと手を組んでいます
ビジネス用にPWAを構築することを考えている場合、複数のプラットフォームでコンテンツを管理するためにはコンテンツ管理システム（CMS）が必要です。 KurocoはPWAプロジェクトに最適なソリューションであり、異なるフロントエンドに対してエンドポイントをカスタマイズできるAPI管理機能を備えています。
当社のソリューションは、React/NextやVue/Nuxtなどの主要なフレームワークとシームレスに連携し、お使いのビジネスにどのように役立つかについて詳しく知りたい場合は、お気軽にお問い合わせください。質問にお答えいたします！