Webテクノロジーは絶えず進化しており、近年、CSS3、HTML5、クラウドバックエンド、JavaScriptライブラリやフレームワークなどでサポートされる「モダンWeb」と呼ばれる豊かな表現力を持つスタイルに進化しています。
このような最新のWeb技術から生まれたPWA（Progressive Web Apps）は、「Webサイト/Webアプリをネイティブアプリのようにインストールできる技術」です。この記事では、ここ数年で話題になっている新しいWebスタイルと「PWA」について説明します。
PWA開発とは？
PWA開発とは、WebサイトやWebアプリをネイティブアプリのようにインストールできるようにするテクノロジーを活かして開発を行うことです。
ネイティブアプリとは、AndroidやiOSなどの個々の環境に合わせた固有のアプリのことを指します。App Store、Google Play、およびその他のアプリストアからダウンロードしインストールするアプリケーションを指します。
多くの方はPWA開発の「Progressive」は「革新的」で「最先端」であるという印象を持っていますが、もう一つの意味として「Webアプリケーションの表現力を段階的に拡充させる」という意味も含まれています。
そもそもWebサイトは「情報を伝えるだけでなく、常に表現力を高め機能を便利にしていく」役割を担っています。そのため、Webコンテンツを作成する上で、便利な機能を実装しても、エラーが発生するなどして不便になってはならないのです。
また、できるだけ既存の環境に影響を与えず、機能を追加・実装する必要があります。したがって、PWA開発を実装することの意義は、「これまでの機能、表現、表示を損なうことなく、新機能によりユーザは新しい恩恵を受けられるよう実装できる」ことといえます。
PWA開発が注目される理由
そもそも、なぜPWA開発が注目されているのでしょうか？
日本のモバイル市場はiOSのシェアが高く、iOSで使用できないPWA開発は今のところあまり注目されていません。
しかし、2017年の秋、Appleは、iOS「Safari」にPWA開発のコア機能であるService Workerを搭載することを発表しました。2018年3月、iOS 11.3についにService Workerが加わりました。
iOS+Safari環境でのService Workerが利用できるようになったことで、Service Workerへの対応環境に関するシェアは40％から80％台に一機に引き上げられました。さらにモバイル環境に関しては、99％以上がService Workerに対応したことになります。
実行環境が整ったことで今後、PWA開発の普及が一気に加速することが見込まれます。また、PC環境では、MicrosoftはedgeがPWA開発をサポートすることを発表しており、アプリストアにPWA開発を掲載する予定です。
もともとAndroidのシェアが高い海外では、すでにPWA開発対応サイトが大幅に増えており、日本でも今後も同様の傾向が見込まれます。
ネイティブアプリとPWA開発の違い
PWA開発とネイティブアプリ開発の最大の違いは、「アプリストア」の有無です。PWA開発にはそのような「仲介者」がいないため、iOSとAndroidの決まりに縛られることなく開発を進められます。プラットフォーマーのレビューの必要がないため、準備ができたらすぐにアプリをリリースできるのです。
Web技術に関連するプラットフォームであるため、PWAはほとんどのブラウザ環境で機能します。PWAを用いて構築することで、ユーザーがデバイスを変更した場合でも、一貫したUXを提供できます。
またユーザーは、アプリストアで検索しダウンロードなくても、URLからアプリを起動できるためすばやく起動できます。URLで起動できるため、SNS、メール、テキストメッセージ、オンライン広告、QRコードなど共有方法は豊富にあります。現在、ウェブ検索の60％は携帯端末から行われていますが、今後さらに増えることが予想されるため、PWA開発の仕組みを有効活用すべきでしょう。
モバイルブラウザとの違い
PWA開発は、ネイティブアプリとモバイルブラウザを組み合わせたものですが、レスポンシブWebデザインとはどう違うのでしょうか？
ページの読み込みに3秒以上かかる場合、ユーザーの53％が閲覧をやめてしまいますが、PWA開発はネットワークの品質に関係なく素早く読み込み表示するためユーザーにストレスを与えることはありません。
モバイルブラウザとは異なり、ネットワーク環境に依存しないため、高速で信頼性の高いUXを保証できます。また、バックグラウンドで更新されるため、リロードする必要はありません。
またPWA開発は、主に静的情報を処理する従来のモバイルブラウザと比較して、動的な機能を提供できます。 たとえば、配達注文、会員制度への参加、およびビジネス上の連絡先をフルスクリーンで体験をさせることで、エクスペリエンスを向上させることができます。ネイティブアプリのようにWeb経由でプッシュ通知を配信し、ユーザーをアプリに呼び戻すこともできます。
PWA開発のメリット
多くの可能性を秘めているPWA開発ですが、導入することによるメリットはどこにあるのでしょうか。ここではPWA開発を用いる5つのメリットについて紹介しましょう。
ネイティブアプリと比べコストを抑えられる
PWA開発は、Webサイトに少し手を入れるだけで実現できるテクノロジーです。したがって、新しいアプリケーションを作成する場合でも、別のアプリケーションを作成するよりも簡単かつ低コストで導入できます。
一般的に、ネイティブアプリの開発コストはWebアプリよりも高くなる傾向があります。Android、iOS、およびその他のさまざまなプラットフォーム用に複数のアプリを開発すると、Webアプリの何倍もの費用がかかる可能性があります。
もちろんネイティブアプリは、PWA開発よりも高いパフォーマンスを実現できることが多いです。しかし、PWA開発だけで必要な機能を実現できる場合は、まずPWA開発を導入した上で状況を見ながらネイティブアプリを作り込む方法もアプローチの1つといえるでしょう。
既存Web資源の活用が可能
既存のWebサイトがある場合は、それを利用しない理由はありません。既存のWebサイトをそのままPWA開発として、あるいは既存のサイトを「データ」として利用することもPWA開発は可能です。これにより開発費用や工数の削減ができます。
容易に更新ができる
PWA開発ではWeb上のコンテンツがそのままアプリコンテンツとなるため、Webサイト、アプリ双方のコンテンツ更新が非常に楽に対応できます。
ただし、コンテンツの更新とPWA開発への反映は完全に同一ではないため、「反映できる」と表現するのが正しくなります。したがって、キャッシュ制御により、変更を適切に反映するように構成することが重要です。
アプリストアのようにWebサイトの更新を確認する際に膠着状態はありません。慣れているサイトを更新するので、通常のアプリよりもはるかに簡単に更新できます。
またWbサイトの更新は、アプリストアのようにレビューする必要はありません。慣れているサイトを更新するだけなので、通常のアプリよりもはるかに簡単に更新できます。
高速
上記のキャッシュによりオフラインでも表示が可能なほか、表示速度を高速化できるというメリットがあります。キャッシュされたデータを使用すると、一度アクセスしたコンテンツを通信なしで表示できます。
また、高速なWebサイトよりも一段と早いレスポンスでコンテンツを表示することもできます。このキャッシュコントロールは、PWA開発の最も重要な機能です。
キャッシュは、PWA開発アプリをインストールしなくても機能します。PWA開発のコア技術であるキャッシュ制御は「アプリ化」だけでなく、キャッシュを制御によるサイト高速化という活用方法もあります。
通信料金低減
PWA開発はコンテンツをダウンロードしてキャッシュすることができます。通常のウェブサイトと同じサイズで一度キャッシュすれば、次回からのダウンロード量を節約できるので、総通信量を減らすことができます。
この点は、通信速度が遅い国や地域でのサービス開発にも非常に効果的です。サーバーへのリクエスト数を減らすことで、インフラコストの削減にもつながります。
PWA開発のデメリット
多くのメリットがあるPWA開発ですが、デメリットはあるのでしょうか。環境依存しないことが特徴のPWA開発ですが、残念ながら環境によってはできないことがあります。また使い方によってコスト面での課題が生じるケースもありえます。
ここでは、PWA開発にある3つのデメリットとそのシーンについて紹介します。
デバイスによってはプッシュ通知が利用できない
ネイティブアプリでは、デバイスの機能であるプッシュ通知を使用できますが、PWA開発アプリでは、特定のデバイスでプッシュ通知が利用できません。実は日本でよく使われるiOSはサポートしていません（2021年12月）。
アプリを介して新しいメッセージやニュースを受信したときに、ロック画面またはホーム画面で自動的に通知する機能、それがプッシュ通知です。プッシュ通知を使用すると、ユーザーはアプリが実行されていない場合でもリアルタイムで情報を取得でき、ワンアクションでアプリの操作を開始できます。
プッシュ通知が使えないモデルでは、すぐに情報共有したくとも、意識的に確認しないと気づけないデメリットが生じてしまいます。
ネイティブアプリより開発コストがかかる
PWA開発はプラットフォームに依存しないため、開発コストはネイティブアプリよりも低くなる傾向にありますが、Webブラウザのみで展開するよりもわずかにコストがかかります。
基本的なデザインはそれほど変わりませんが、プッシュ通知などPWA開発の機能を反映するために追加の開発が必要となるからです。
ただしこれは利便性を向上させるためであり、その追加コストは仕方がないともいえる内容です。大事なポイントは、追加費用が必要なことをあらかじめ理解しておくことではないでしょうか。
利用するブラウザに動作依存する
ネイティブアプリとは異なり、PWA開発を作成すればさまざまなデバイスで使用できますが、使用するブラウザによって動作環境が異なる場合があります。
上記のプッシュ通知で述べたように、PWA開発アプリのサポートを強化しているAndroidに対し、iOSはサポートが遅れており、使用できる機能が制限されています。
OS側のサポート有無で利用できる機能が異なるため、すべてのブラウザで同じように表示したい場合は実現不可能なケースも出てきてしまいます。
PWA開発が向いているケースとは？
PWA開発アプリは以下のような方々におすすめできます。
・検索サイト経由でスマートフォンユーザーを取り込みたい
・初期コストを削減したい
・早期リリースしたい
開発と運用のコストはネイティブアプリよりも安価なため、PWA開発アプリはコストを抑えたい人に適しています。
また、アプリストアを確認する必要がないため、できるだけ早くリリースしたい方にもおすすめです。アプリを更新するときはアプリストアのレビューも必要なので、更新を短期間で実施するならPWA開発アプリが適しています。
PWA開発アプリは、スマートフォンユーザーを惹きつけターゲット範囲を広げたい場合や、既存ユーザーへのアプローチとして、使いやすさを向上させたい場合においても適した環境といえるでしょう。
モバイルサイトをPWA開発アプリに変えると、アイコンを使用できるようになるため、ワンアクションでサイト表示できます。必要な情報をすぐに入手できるので、利便性向上につながります。ユーザーの視点から多くのメリットがある場合、アプリのユーザー数は増える可能性があります。
PWA導入は段階的に実施しよう
PWA開発は、ネイティブアプリのメリットをリスクなしで現在のWebサイトにもたらす素晴らしいツールです。しかし正しい使い方をしなければ、Webサイトの価値を損なう可能性があるのもまた事実です。よってPWA開発を導入する場合は、十分な検証を行いながら段階的に進めることをおすすめします。
この記事をきっかけにPWA開発を導入されてはいかがでしょうか。
なお、どういうケースにどのような開発手法・手順を使うべきか？その判断は多くの経験値・開発知識を必要とする難しい判断と言えます。そのため、専門知識をもつ開発会社を利用することをおすすめします。
どの開発会社を選ぶべきか悩んでいらっしゃるのであれば、ぜひ株式会社エイチビーラボにお任せください。
株式会社エイチビーラボでは、ベトナムに特化したオフショア開発サービスを提供しております。お客様のご要望に合わせてWebシステムやスマホアプリ、AIデータ作成などさまざまなシステムを提供することが可能です。システムの開発でお困りの方は、ぜひお気軽にお問い合わせください。ご相談から、開発、運用まで親身にサポートいたします。
