スマートフォンの時代が始まってから何年も経ちました。それに伴い、ネイティブアプリの時代が到来しました。アプリは私たちの生活に大きく貢献をしています。しかしネイティブアプリの管理や保守はとても面倒です。一方、PWA(プログレッシブウェブアプリ)は比較的簡単に管理することができる仕組みです。

What?

PWAとは何ですか？

PWAはプログレッシブウェブアプリ（Progressive web application）の略です。これは、HTML、CSS、JavaScriptなど、誰もが知っていて愛用しているWebテクノロジーから構築されたアプリですが、実際のネイティブアプリに匹敵する感触と機能を備えています。いくつかのスマートなテクノロジーのおかげで、ほとんどすべてのWebサイトをプログレッシブWebアプリに変えることができます。

これは、開発が非常に難しいネイティブアプリとは異なり、PWAはかなり迅速に構築できることを意味します。さらに、プッシュ通知、オフラインサポートなど、ネイティブアプリのすべての機能を提供できます。

PWA(プログレッシブウェブアプリ)とは？ 1 — Twitter.comはPWAです

ネットで見るけることができる多くのサイトは、実際にはプログレッシブWebアプリです。たとえば、twitter.comを見てください。スマートフォンでそのサイトにアクセスすると、ホーム画面にアプリをインストールできます。保存したTwitterサイトを開くと、ネイティブアプリと同じように表示され、動作することがわかります。ブラウザウィンドウなどはありません。iPhoneまたはAndroidスマートフォンから実行することに違いはありません。ログインするだけで準備完了です。これは、PWAを念頭に置いてWebアプリを構築することの大きなメリットです。

PWAは人気を集めています。Starbucks.com、Pinterest.com、Washingtonpost.com、Uber.comなどの多くの大きなサイトはPWAであり、実際にはホーム画面にインストール可能であり、ネイティブアプリと同等のエクスペリエンスを提供します。

Difference

ネイティブアプリとPWAの違いは何ですか？

AppleのAppStoreやGoogleのPlayストアからダウンロードしたようなネイティブアプリは、多くの場合、そのプラットフォームに固有のプログラミング言語で構築されています。つまり、iOSアプリの場合はSwiftになり、Androidアプリの場合はJavaになります。これらのプラットフォーム用のアプリを作成する場合は、テクノロジーを知っている必要があります。

もちろんショートカットとして、ノーコードを使ったりテンプレートを利用することもできますが、簡単な分、機能的な制限が多いです。すべてのモバイルプラットフォームでアプリを使用する場合は、さまざまなテクノロジーをすべて知っている必要があります。例えばAndroidにもiOSにも公開したい場合は、多くの知識とスキルが必要になります。

一方、プログレッシブウェブアプリはシンプルです。これはブラウザベースで実行されるので、Andorid、iOS関係なく作動します。PWAのパフォーマンスとクオリティが高い場合は、実際のユーザーはそれがネイティブアプリかWEBベースのアプリかどうかも気づかないと思います。

PWAのメリットは何ですか？

多くの方がアプリに注目している主な理由は、アプリが大きなエンゲージメントを提供するからです。アプリをインストールしてもらえれば、頻繁に開いてくれる可能性があり、顧客に対してアプローチがしやすくなります。また、コンバージョン率もWEBサイトに比べて高くなります。

またプッシュ通知などの機能を使うことで、効率よくユーザーに最新情報やセール情報を伝えることができます。

以下がPWAの主なメリットです。

一般的なWebテクノロジーを使用してPWAを構築できます
ネイティブアプリに比べて構築が安い
WEBサイトをアプリに変えているので、維持するコードベースが少なくなります
PWAはレスポンシブ性が高く、さまざまな画面サイズで機能します
PWAはスムーズ、高速、軽量です
通常のサイトとは異なり、オフラインでも動作します
プッシュ通知を使用して、ユーザーを再エンゲージできます
PWAをインストールすると、エンゲージメントが高まる可能性があります

全体として、モバイルマーケティング戦略にPWAを使用するのはとても理にかなっています。

PWAとSEO

PWAは本質的にWeb中心です。もちろん検索されやすいように検索エンジン（Googleなど）を念頭において開発されました。ただし多くのPWAは機能を追加するためにJavaScriptを利用しています。基本的に検索エンジンはJavaScriptのレンダリングにも適していますが、一部の意見ではこれがSEOの邪魔をしてしまう恐れもあるようです。

PWAを設定するときは、JavaScriptにアクセスできることを確認する必要があります。ボットのファイルをブロックせず、リンクが利用可能であることを確認してください。レンダリングプロセスを改善するために、JavaScriptフレームワークにサーバー側のレンダリングを使用させることができます。

PWAの要素３つ

PWAを設定するのにそれほど時間はかかりません。サイトが有効なPWAになる前に、提供する必要があるものが3つあります。

安全な接続（HTTPS）： PWAは信頼できる接続でのみ機能し、安全な接続を介してサービスを提供する必要があります。これはセキュリティ上の理由だけでなく、ユーザーにとって非常に重要な信頼要素でもあります。
サービスワーカー：サービスワーカーは、バックグラウンドで実行されるスクリプトの一部です。これは、PWAのネットワーク要求を処理する方法を決定するのに役立ち、より複雑な作業を行うことができます。
マニフェストファイル：このJSONファイルには、PWAの表示方法と機能に関する情報が含まれています。ここでは、名前、説明、アイコン、色などを決定します。

Googleのマニフェストのサンプルは次のとおりです。


  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "description": "Weather forecast information",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6"
}

上記の3つは、PWAを実行するための最小要件です。JavaScript（フレームワーク）を介して機能を拡張できます。