PWAとは何ですか？ 非技術者のための簡単な説明

この投稿はマーケティング担当者の視点で書かれていることを前もって知っておく必要があります。 （まあ、私はいくつかのHTMLとCSSを読み書きできます、私はJavascriptをある程度理解できますが、それは私を技術者にしません）。

PWAとは何ですか？

PWA（ P rogressive W eb A pps）を使用すると、Webブラウザーでネイティブモバイルアプリ（iOSおよびAndroidストアからダウンロードしたアプリ）のルックアンドフィールを実現できます。 これらのネイティブアプリは、Webプッシュ通知などの独自の機能を備えながら、スムーズなモバイルエクスペリエンスを実現するように最適化されています。 PWAテクノロジーは、ChromeやSafariなどのブラウザーでのWebサーフィン体験を活用しているため、ネイティブアプリの体験に近づきます。 これにより、結果として、Webへのトラフィックとエンゲージメントが向上します。

この用語は、2015年にGoogleによって最初に導入されました。PeteLePage– Google Developer Advocateによると、「プログレッシブ」の部分は、「ユーザーが時間の経過とともにアプリとの関係を徐々に構築するにつれて、アプリはますます強力になる」と説明できます。 」。

PWAはウェブサイトと同じですか？

はい、プログレッシブウェブアプリケーションはウェブサイトです。

ただし、最新のWebテクノロジーのおかげで、見た目も使い心地もアプリのようになっています。 つまり、ユーザーは他のWebサイトと同じようにURLを使用してブラウザーでプログレッシブWebアプリを閲覧できますが、PWAにアクセスした直後は、ブラウザーで「アプリ」を使用することができます。ダウンロードとインストール。

「アプリ」であることは、PWAがモバイルに限定されていることを意味するものではありません。 デスクトップにも実装できます。 実際、気付かないうちにPWAに頻繁にアクセスしたことがある可能性があります。 ラップトップでInstagram、Pinterest、またはTinderを閲覧したことがある場合は、おめでとうございます。 あなたはウェブ上で最も成功したPWAの採用者のいくつかに出会ったことがあります。

PWAをより簡単に理解するのに役立つため、PWAWebサイトの例を見てみましょう。

PWAの例

G-SPeコマースウェブサイトはPWAです。 モバイルでWebサイトにアクセスすると、実際にWebサイトのURLを携帯電話のホーム画面に追加できます。

その後、Webサイトに再度アクセスしたいときはいつでも、FacebookやLinkedinなどの他のアプリと同じように、ホーム画面にアイコンが表示されます。

ホーム画面からG-SPWebアプリを開くと、ブラウザーの検索バーがなく、Webサイトが全画面表示になっていることがわかります。 また、その下部にはアプリのようなナビゲーションメニューがあります。 さらに、スクロールしてタップすると、バターのように滑らかに感じられます。これは、これまでのWebブラウジング体験とは異なります。

 推奨読書：
-G-SP PWAケーススタディ：一流のモバイルエクスペリエンスの変革
-PWAのトップ3のユースケース

WebサイトがPWAであるかどうかを判断するためのヒント

開発者であり、サイトのソースコードを掘り下げない限り、WebサイトがPWAテクノロジに基づいて構築されているかどうかを正確に判断する方法はありません。

そうは言っても、正確な結果を保証するものではありませんが、特定のWebサイトがPWAであるという兆候を示すことができるいくつかのトリックがあります。

単一ページのウェブサイト

これは、WebサイトがPWAであるかどうかを判断する最も簡単な方法です。 これは、PWAの性質に基づいています。プログレッシブウェブアプリは、技術的には単一ページのウェブサイトです。 これは、PWAに基づいて構築されたWebサイトに1つのページしかないという意味ではありません。 これは、ユーザーが最初にWebサイトをロードしたときに、ページビューイベントが1回だけ発生することを意味します。 その後、すべてのページの読み込みはJavascriptによって処理されます。 これは通常のWebサイトとは異なり、ページを変更するたびに、HTMLソース全体とともにページが再読み込みされます。

では、これはどのように機能しますか？ 非常に簡単です。ブラウザのアクティブなタブを見てください。 サイトがPWAの場合、ページを変更してもサイトは再読み込みされません。つまり、ブラウザタブに「読み込み中」のアニメーションはありません。

ニューヨークタイムズのウェブサイトはPWAではないことがわかります。

例として、当社のWebサイトSimiCartを見てみましょう。

私が何を意味するのか分かりますか？ ページを変更してもサイトはリロードされません！ 技術的には、常に1つの「ページ」にとどまっているだけです。 そのため、PWAページは非常に高速でスムーズに読み込まれます。 すべてのページは、最初にサイトにアクセスしたときにプリロードされ、その後配信されます。 これらはネットワーク速度に依存せず、オフラインでも機能します。

サービスワーカー

いいえ、これは人間の労働者ではありません。 Service Workersは、プログレッシブWebアプリの背後にあるテクノロジーの名前であり、オフライン機能、プッシュ通知、およびリソースキャッシュを強化します。 Googleによると、ServiceWorkerはPWA技術の中核です。 したがって、WebサイトがService Workersテクノロジを使用しているかどうかを判断できれば、そのサイトがPWAである可能性があるかどうかを判断できます。

Chromeベースのブラウザを使用している場合は、インスペクターツールを使用してこれを簡単に確認できます。 チェックするWebサイトを右クリックし、[要素の検査]をクリックします。 次に、[アプリケーション]タブ>[サービスワーカー]に移動します。 そのサイトにServiceWorkerがいるかどうかを簡単に確認できます。

繰り返しますが、このトリックは、特定のWebサイトがPWAである可能性のヒントを与えるだけです。 Service WorkerはPWAの中核部分ですが、PWAだけに限定されているわけではありません。 PWA以外のWebサイトでも、ServiceWorkerを利用して機能を強化できます。

PWA Service Workerについて詳しく知りたい場合は、この驚くべきテクノロジーについてすべて学ぶための独占記事を用意しています。

HTTPSセキュアオリジン

ただし、URLを確認することで、WebサイトがPWAではないかどうかを正確に判断できます。 WebサイトのURLがhttps： //ではなくhttp：//で始まる場合、それはPWAではありません。 これは、PWAがHTTPSである安全なドメインで実行されているWebサイトでのみ機能するためです。

PWAはどのくらい人気がありますか？

Googleが示唆しているように、PWAは「モバイルアプリの未来」であり、PWAは、最初は大企業、次に中小企業や組織の間で人気を集めています。

Windowsプラットフォームから、Google Playストアなどの主要なアプリ市場まで、ほぼすべての場所で競争を推進しています。

多くの有名人のウェブサイトは、Telegram、AliExpress、FlipBoardのようなPWAであり、2048やWebFlapのようなおなじみのPWAゲームのPWAバージョンでさえあります。

PWAのメリット：プログレッシブウェブアプリで何ができるか？

この記事が書かれた時点で、PWAは以前はネイティブアプリに限定されていたほとんどのことをすでに実行できます。 これには、カメラとマイク、GPS、オフラインモード、ファイルアクセスなど、デバイスレベルの機能へのアクセスが含まれます。 PWAの機能の概要については、 https：//whatpwacando.today/をご覧ください。

したがって、Webアプリは、モバイルアプリに投資することなく、オンラインでブランドのモバイルエクスペリエンスを向上させたい人に最適です。

通常のモバイルアプリやレスポンシブウェブサイトに対するPWAのメリットについてもう少し詳しく見ていきましょう。

PWAとレスポンシブウェブサイト

たとえば、 Webサイトと比較すると、PWAは次の理由で優れています。

• 速度：同じコンテンツが与えられた場合、 Service Workersテクノロジーのおかげで、PWAは通常のWebサイトよりも高速に読み込まれます。 すべてのコンテンツを事前にキャッシュし、必要に応じて配信するため、最初のロードで高速になり、2回目のロード以降はさらに高速になります。
• オフラインモード：オフラインでの可用性は、ServiceWorkerテクノロジーによっても可能になります。 Service Workerが適切に統合されているため、最初にPWAにアクセスしたときにすべてのコンテンツがプリロードされ、その後Javascriptを使用して配信されるため、PWAは、中断のないエクスペリエンスが必須のWebサイトにとって新しい頼りになるアプローチになります。 PWAが必要になった場合に備えて、PWAをオフラインで機能させる方法についてのガイドがあります。
• Webプッシュ通知：ネイティブモバイルアプリと同様に、PWAはモバイルWebブラウザーから直接ユーザーのホーム画面にプッシュ通知を送信できます。 これは、eコマースストアがパーソナライズされた取引やオファーを顧客に送信するのに特に役立ちます。 PWA AndroidのWebプッシュは何年も前から有効になっており、幸いなことに、まもなくPWAiOSに導入される予定です。
• ホーム画面に追加：この機能は、モバイルユーザーにPWAを「インストール」するように促します。 ユーザーがプロンプトを受け入れると、PWAがモバイルホーム画面に追加され、インストールされている他のアプリと同じように実行されます。 これがPWAのホーム画面への追加ガイドです。 お見逃しなく！

Chromeの古い「ホーム画面に追加」プロンプトは次のようになります。

 >>推奨読書：PWAとレスポンシブウェブサイトの完全な比較

PWAとネイティブアプリ

また、PWAはウェブサイトよりも優れているだけでなく、PWAがもたらす次の特典により、ブランドはネイティブアプリよりもPWAを選択するようになりました。

• クロスプラットフォーム：PWAはOSベースではなくブラウザベースであるため、PWAが構築されると、Android、iOS、Windowsなどのモバイルプラットフォームを介してアクセスできます。
• 最新：PWAに加えられた変更は、ユーザーがページを更新するとすぐに有効になります。
• インデックス作成可能性：PWAは技術的にはまだウェブサイトであるため、そのコンテンツはインデックスに登録され、Googleなどの検索エンジンで検出できます。 これにより、SEO（検索エンジン最適化）プラクティスの機会が開かれ、ネイティブアプリと比較してPWAがより多くのユーザーにリーチできるようになります。
• 公開する必要がない：ネイティブアプリでは、アプリストアの公開プロセスが非常に面倒な場合があります。 アプリストアにアプリを送信し、興奮して5日間待った後、10回再読する必要があり、それが何について話しているのかわからないという理由で拒否を取り戻すことを想像してみてください。 また、場合によっては、アプリが受け入れられないこともあります。 （風俗店やアーク製品、誰か？）。 PWAでは、アプリの提出はありません。 なんて安心！ PWAをAppleAppstore、Google Play、Microsoft Storeに公開する場合は、次の方法で行います。
• 低開発コスト：PWAは一度開発すれば、それをサポートするすべてのモバイルプラットフォームとブラウザーで利用できるため、PWAの開発コストはネイティブアプリに比べて比較的小さくなります。 もう1つの理由は、PWAが、より一般的に理解され、はるかに多くの開発者ベースを持つプログラミング言語とテクノロジーを使用していることです。

 推奨読書：
-プログレッシブウェブアプリとネイティブアプリ：どちらが適していますか？
-eコマースのためのPWAの利点

PWAの欠点

明らかに、これはすべて真実には良すぎるように聞こえます。 そして、何かが真実ではないように思えるとき、人々はしばしば「オーケー、キャッチは何ですか」と尋ねます。

PWAは、業界を定義する特性にもかかわらず、依然として欠点があります。

• 到達可能性

テクノロジーはまだ新しく、すべてであるため、PWAの現在のアプリ市場は存在せず、ある意味でより幅広いオーディエンスにリーチする能力が低下します。 ただし、Microsoftなどの既知の企業からMicrosoft StoreにPWAが組み込まれているという動きがあり、Windows10のPWAのすべての未来をそれほど先取りしているようには見えません。

• インストールされている他のアプリとの通信：

PWAは依然として基本的かつ本質的にアプリのようなウェブページであるため、さまざまな方法で制限できます。 最大の制限は、アプリケーション間の通信可能性が制限されていることである可能性があり、これは開発者にとって問題となる可能性があります。

よくある質問

PWAは何に使用されますか？

高速で信頼性が高く、楽しく使用できるWebアプリは、さまざまな目的で提供できます。 たとえば、AliexpressのPWAであるTik Tokは、人々にサイトに慣れてもらうため、ネイティブアプリをダウンロードするように促します。 SpotifyはPWAを使用して、ウェブサイトのパフォーマンスと応答性をさらに最適化し、アプリのダウンロード以外にユーザーに別のオプションを提供します。 パックマンや2048のようなゲームも、PWAを使用してより多くのWebユーザーにリーチします。

PWAと通常のアプリの違いは何ですか？

技術的な観点からは、Webブラウザーを介してPWAにアクセスできる間、ネイティブアプリをアプリストアからダウンロードする必要があります。 ビジネスの観点から、PWAは、よりSEOに適した、より安価で、より迅速に開発できる可能性があります。 一方、ネイティブアプリは、複雑なモバイルプロジェクトにも最適です。また、ブランドの信頼性を高めることができます。

PWAはモバイルデバイスでのみ機能しますか？

いいえ、PWAはデスクトップ、モバイル、タブレットの両方で機能します。

PWAのプログラミング言語は何ですか？

PWAは、HTML、CSS、Javascript、WebAssemblyなどの一般的なプログラミング言語とWebテクノロジーで構築されています。

結論

「PWAはネイティブアプリに取って代わりますか？」

私たちはそうは思いません。

まだ。

2019年の第4四半期の時点で、Google Playには約300万のアプリがあり、Apple App Storeには200万を超えるアプリがあります（Statista、2019）。 この数はまだ増え続けており、これらすべてのアプリがすぐに置き換えられるとは限りません。 ユーザーの習慣は重要であり、変更するのは簡単ではありません。

そうは言っても、プログレッシブWebアプリには大きな可能性があります。 SimiCartでは、プログレッシブWebアプリが未来であると信じています。 PWAは、その速度、レイアウトの柔軟性、および機能機能により、デスクトップサイト、モバイルサイト、ネイティブモバイルアプリ、さらにはネイティブWindowsアプリケーションに取って代わる運命にあります。 はい、あなたはそれを正しく聞きました、 Windowsアプリケーション。 eコマースの世界だけでも、プログレッシブWebアプリは現在、オンラインショッパーに軽く、応答性が高く、魅力的なエクスペリエンスを求めているストアオーナーにとって頼りになるアプローチです。

実際、統計によると、PWAの実装が1か月遅れると、収益が140万ドルも失われ、ブランドが6か月遅らせると決めた場合はさらに680万ドルの損失が発生する可能性があります。

万能の完璧なMagentoPWAソリューションを探しているeコマースストアの所有者のために、ここSimiCartではあなたとあなたのストアのための完全なパッケージを提供します。