PWAとは、簡単に言えば、Webサイトを「アプリ化」する技術のことです。Webサイトにアプリのような便利な機能を付けることができ、取り入れている企業も徐々に増えてきています。

今回は、そんなPWAを活用して、iPadアプリをWebサイトに移行したアメリカン・エキスプレス・ジャパン株式会社様の事例をご紹介します。

PWAを活用するメリット

iPadアプリをPWAに移行した背景を説明する前にPWA (Progressive Web Application)の基本的なメリットを紹介します。

PWAには、ざっと挙げるだけでも以下のようなメリットがあります。

• ネイティブアプリのように見える
• Apple Store, Google Playストア, Microsoft Storeなどのストアに公開する必要がない
• ユーザーエクスペリエンスに影響を与えることなく更新可能
• ハイパフォーマンス（操作性が高く、UX向上につながる）
• インストール不要
• iOSの場合、エンタープライズアプリのエンタープライズライセンスが不要
• iOSの場合、新しい証明書とプロビジョニングプロファイルを使用して再構築する必要がない
• OSアップデートへの影響はわずか（実質、ほとんどない）
• OSに関係なくどの端末でも動作する
• オフラインで作業可能
• 開発とメンテナンスにかかる費用を抑えられる
• プッシュ通知を送信できる
  └これまでiOSは非対応でしたが、2023年3月末からiOS16.4で対応可能に
• アップデートが容易（インスタントアップデート）
• 強化されたセキュリティ（httpsのみサポート）
• ネイティブアプリよりもストレージ使用量が少ない

ほかにも使用方法によって享受できるメリットも多々あります。PWAについて詳しくは「PWAとは？Webサイトを「ほぼアプリ化」する方法」で解説していますので、参考にしてください。

 

iPadアプリをPWAに移行した背景

アメリカン・エキスプレス・ジャパン株式会社様では、American Express営業サポートiPadアプリをPWAに移行しました。ここからは、iPadアプリをPWAに移行した背景についてご紹介します。

従来、プロダクトやキャンペーン紹介を大量の紙資料で行っていた営業ツールでしたが、

• コスト削減
• 持ち運びしやすさ（コンパクト化）
• 情報更新のリアルタイム化

を目的にDX推進を図り、2015年にiPad版エンタープライズ Appとして開発提供しました。

その後、システム運用は専用更新CMSツールのメンテナンスと、毎年行われる新規プロビジョニングプロファイルでのリビルド、何年かに1度発生するiOSのアップデートのためのリビルド程度でした。

一方で、実際の営業側の運用では、リビルドごとに各端末に配置されたアプリの再インストールが必要となり、営業担当の手間が大きく、アップデートの確認も煩雑になりがちになるなど、運用に課題を抱えていました。

そこで課題解決の手段としてPWAを選択しました。

PWAの特徴のうち、特に以下のメリットが効果的に見られるため、実装の判断となりました。

• 元のネイティブアプリと同等のUIデザインが担保できる
• Apple Store, Google Playストア, Microsoft Storeなどのストアに公開する必要がない
• エンタープライズライセンスが不要
• 新しい証明書とプロビジョニングプロファイルを使用しての再構築が不要
• OSアップデートへの影響はほぼ皆無
• 開発と更新メンテナンスがネイティブアプリより低コストで実施可能

 

PWAアプリの開発

iPadアプリをPWA 化するにあたり、通常のWeb アプリと異なる、見た目と動作を考慮に入れ、開発を進めました。それぞれ、どのような開発をおこなったのか、簡単にご紹介します。

ネイティブアプリのような見た目

ネイティブアプリのような見た目を実現するために、manifest.jsonとhtmlのメタタグプロパティを使用して、以下を設定しました。

• アプリのアイコン（apple-touch-icon）
• アプリの名（apple-mobile-web-app-title）
• ネイティブアプリのように全画面表示（apple-mobile-web-app-capable）
• アプリスプラッシュ画面（apple-touch-startup-image）

アプリの動作

PWAでアプリの動作を制御するため、Workboxを使用しました。Workboxは、PWAアプリの環境に対応したGoogleが提供するService Workerを強化できるライブラリのセットです。

Workboxに用意されているworkbox-strategiesの中からStale-While-Revalidate、Cache-first を使用しました。これにより、アプリを１回使用してあれば、利用可能なネットワークがない場合もキャッシュからアプリを使用できるようになります。

Stale-While-Revalidateは、常に最新版を表示しなくてもいい（ネットワークにつないだ際に更新すればいい）場合に活用されるケースが多く、Cache-firstも同様に、オフラインでの操作を優先する場合に有効です。

htmlのコンテンツは、更新が発生することがあるため、Stale-While-Revalidate strategiesを使用しました。一方で、画像ファイル、CSSファイル、jsファイルは、クリティカルなアセットではないため、速度を優先するためcacheFirst strategiesを使用しました。

内部コンテンツは、アプリ内SPA（Single Page Application）として設置しています。そのため、ネイティブアプリに近い操作感を実現できます。

外部リンクは以下のように、PWAアプリの上に別レイヤーで表示されるようになります。

PWA活用でUX改善！

American Express営業サポートiPadアプリをPWAに移行した事例についてご紹介しました。PWAを活用することで、これまでのiPadアプリで利用していたのと同等またはそれ以上のUXを実現できています。

パンタグラフでは、以前からPWAを活用したWebサイトの構築やUXを高めるためのコンサルティング、PWA導入支援などを行っています。

PWAについて気になること、UX改善にご興味のある方は、お気軽にご相談ください。

お問い合わせはこちら