ホームページ制作リスティング広告運用代行システム開発ブログお問い合わせ最新技術、PWAとは?通常のHTMLとネイティブアプリの違いについて2018年07月25日Web制作・ホームページ制作スマホサイトは当たり前、そんなの世の中で、どうスマホ対応すれば他の企業と差別化できるか。考えたとき、今ホットな施策「PWA対応」はいいかもしれない。Apps(プログレッシブウェブアプリ)の略で、Googleがモバイルユーザーのユーザビリティー向上を目的とした、今までのウェブページ(通常のHTML)とネイティブアプリの良いところ取りした仕組みです。以下のようなことが可能になります。「ホームに追加」ボタンの表示と、ホーム追加した場合のアイコンがアプリをインストールしたかのように表示される等、ネイティブアプリでできることが可能になります。ネイティブアプリとの違いで、インストール不要、ストアの審査がなくなるのもメリットになります。PWA対応ブラウザは?対応できるブラウザは以下のようになります。Workerが利用できるかどうかで見ています。ver.11.4以上なお、iOSの場合、対応はできるがAndroidと違い以下の制限があるようです。オフラインのデータ容量は50MBまでユーザが数週間PWAを使用しないとキャッシュデータを削除するため、次のPWA使用時は再起動されるBluetoothにはアクセスできない音声認識ができないバックグラウンドでの機能動作はできないプッシュ通知はできない等、その他にも細かい機能の制限があるようなので、使用する際は注意が必要です。PWA対応サイトについて既に海外では数多くのサイトがPWA対応し、結果を出しています。以下、海外サイトも含め一部PWA対応したサイトをご紹介します。イギリスの大手衣料品ブランド「George」Georgeはスマホでの最高のショッピング体験を求める消費者の期待に応えて、時代遅れのモバイルソリューションを改良し、モバイルのコンバージョン促進のため、デザイン、スピード、機能性を重点に起き、PWAを採用しました。PWAのベストプラクティスに従って構築し、スマホサイトの買い物客のページ読み込み速度を3.8倍短縮させ、直帰率半減、ページビュー数20%増加、コンバージョン率31%増加に成功しました。Lite」をリリースしました。リリースしたことにより、作成された画像を最適化しデータ通信量を70%も削減し、直帰率20%減少、ツイート数75%増加に成功しました。日本の有名不動産サイト「Suumo」Suumoは快適な物件探し体験を考え、ネイティブアプリを作成しダウンロードを促していたが、思ったよりもダウンロードがされず、またコストが多くかかったことから、ネイティブアプリ同様の体験ができるPWAに注目し、早い段階で導入を考え取り入れました。その結果、ウェブサイトの表示速度は75%短縮し、Webプッシュ通知のオープン率31%達成に成功しました。まとめこのようにPWAを導入したことにより、スマホサイトの改善に成功している企業は多数います。ネイティブアプリみたいな快適さが通常のブラウザでできるのは、離脱防止や、ページビュー数の向上に繋がります。プッシュ通知を許可してもらえれば、アプリをインストールしていないユーザにも自社のお知らせを流せるため、ユーザの再訪問にも繋げることができます。PWAはこれからどんどん開発が進み、更に使いやすく、ネイティブアプリに近くなってくるため、今後に期待できる技術だと思います。FacebookTwitterGoogle+はてブPocket関連記事2019.02.22Web制作・ホームページ制作ホームページ読み込み時に使いたい!CSSローディング最近ではどこのサイトも、ホームページ読み込み時にローディングが表示されるサイトが多くなっています。