1.0ハイブリッドテクノロジーズhttps://hybrid-technologies.co.jp/blogHT Blog Adminhttps://hybrid-technologies.co.jp/blog/author/ht_admin_blog/rich600338<blockquote class="wp-embedded-content" data-secret="3E1QeAczHq"><a href="https://hybrid-technologies.co.jp/blog/knowhow/20230313_2/">PWA（プログレッシブウェブアプリ）とは？基本的な機能や導入メリットを解説</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://hybrid-technologies.co.jp/blog/knowhow/20230313_2/embed/#?secret=3E1QeAczHq" width="600" height="338" title="“PWA（プログレッシブウェブアプリ）とは？基本的な機能や導入メリットを解説” — ハイブリッドテクノロジーズ" data-secret="3E1QeAczHq" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script type="text/javascript"> /* <![CDATA[ */ /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://hybrid-technologies.co.jp/blog/wp-includes/js/wp-embed.min.js /* ]]> */ </script> https://hybrid-technologies.co.jp/blog/wp-content/uploads/2023/06/202303_blog_1_1_feature-min.jpg312312アプリ開発にはさまざまな技術が使われていますが、近年注目されているPWAはご存知でしょうか。本記事では、PWAの特徴、機能、導入メリット、注意点などについて解説します。自社でPWAの導入を検討されている企業のご担当者はぜひ参考にしてください。 ハイブリッドテクノロジーズの開発サービスはこちら PWA（プログレッシブウェブアプリ）とは PWAは、”Progressive Web Apps”の略称です。Webサイトをスマホ向けのネイティブアプリのように閲覧できる仕組みをつくる技術を指します。 PWAには、Googleが決めた要素が備わっています。例えば、ユーザーの画面サイズに合わせて最適化されたデザイン（レスポンシブデザイン）や、暗号化された通信方式を導入するhttps化などです。また、プッシュ通知機能、オフライン時の対応、ホーム画面へのアイコンの表示などに対応するため、ウェブブラウザにService Workerなどを組み込んでいることも特徴です。 Webサイトをブラウザで表示させると、ブラウザに応じた枠組内にメニューバーやアドレスバーが表示されますが、PWAではそうしたブラウザの影響は受けません。ブラウザでもPWAでもどちらを使って閲覧しても、サイトの内容は同じですが、Webサイトをアプリのような感覚で利用できるPWAは、ユーザーエンゲージメントの改善に有効な仕組みとして注目されています。 PWAの特徴 まず、アプリのような動作が大きな特徴です。具体的には、プッシュ通知の機能、端末の画面全体に対応した表示、ホーム画面へのアイコン設定など、ネイティブアプリでのみ実現できた機能がブラウザでも実装できます。 次に、読み込み速度が速いことです。Webサイトを閲覧するときにページのロードが遅くなることがありますが、PWAはキャッシュ利用により、読み込みがとてもスムーズです。結果としてユーザーの離脱減少につながるため、信頼性も高いといえます。 PWAはアプリストア経由でないことを除けば、日常的に使っているアプリの特徴と変わらないといえるでしょう。 PWAとネイティブアプリの違い ネイティブアプリは、iOS・Androidの各環境に合わせて作成される専用アプリです。私たちが日頃から「アプリ」と呼んでいる、Apple StoreやGoogle Playでダウンロードして使っているアプリを指します。 しかし、PWAは「プログレッシブウェブアプリ」と名前にはアプリというワードが使われていますが、実際にはWebサイトであって、アプリではないのです。しかし、Webサイトからのインストール後は、ホーム画面上にアイコンが表示できるため、一般的なアプリと似たように使うことができます。 関連リンク：ネイティブアプリとは？Webアプリとの違いやメリット・デメリットなどを徹底解説 PWAが効果を発揮する機能 アプリのようであり、WebサイトのようでもあるPWAの特徴的な機能を見ていきましょう。 モバイル端末にもインストールできる モバイル端末へのインストールも可能です。端末にインストールするとアイコンがホーム画面に表示されますので、そのアイコンをタップするとPWAを使用できます。似た機能として、Webページのショートカットアイコンをモバイル端末のホーム画面に追加できる機能があります。しかし、PWAはホーム画面に表示させるアイコンのショートカットと異なり、プッシュ通知やキャッシュの利用といった機能が備わっているのです。PWAから起動したWebサイトは、フルスクリーンで表示することができ、また起動時の処理の最中に表示される画面（スプラッシュスクリーン）の設定もできます。PWA対応サイトは、ユーザーにとってもサイト運営者にとってもメリットといえます。 モバイル端末にインストールできることで得られるメリットについて、サイト運営者・ユーザー別に次の見出しで詳しく説明します。 モバイル端末のホーム画面にアイコン設置ができることのメリット ■サイト運営者のメリット アプリサイトの審査を受けなくて良い ネイティブアプリは、アプリ登録する際にGooglePlayやApp Storeで審査を受けなければならないため、アプリが実際に配信できるまでには時間がかかります。PWAは審査がないため、リリースすればすぐにアイコンが表示されます。 OSごとに対応しなくて済む ネイティブアプリはOSに依存しているため、iOS、Android用の両方のアプリを用意することが必要です。一方、PWA対応サイトはWebサイトです。OSに依存しないため、個別に対応する必要はありません。 ■ユーザーのメリット 通信量、データ容量を抑えられる PWAでは、ダウンロードするデータ量がネイティブアプリより少ないため、通信量やデータ容量が大きくならないことはユーザーにとってメリットといえます。め、リリースすればすぐにアイコンが表示されます。 アプリダウンロードが不要 近年はネイティブアプリが普及し、さまざまな企業や店舗がアプリを作成しています。店舗で買い物などの際に、アプリのダウンロードが必要になることがあり面倒に感じている方もいるでしょう。PWAはダウンロードの必要がないため、手間がかりません。 キャッシュの利用ができる PWAでは、Service Workerの機能を活用することで、キャッシュが利用できます。キャッシュは、Webサイトの情報を保管しておく機能です。読み込んだデータを呼び出せるため、2回目以降の表示速度が速くなります。表示速度が速くなれば、ユーザーにとって使いやすくなります。ホーム画面からのアクセスはもちろん、サイト内でのページ遷移もスムーズです。読み込みスピードの速さは、SEOから見ても評価されやすくなるでしょう。 また、オフラインでアクセスしてもキャッシュを利用してページを正常に表示させ、サイトを閲覧することができます。オフラインのときに入力したデータをオンライン後に送信することも可能です。 プッシュ通知ができる Service Workerは、プッシュ通知も可能にしてくれます。従来のWebサイトでは、提供者側からユーザーへ積極的に通知や呼びかけはできませんでした。しかし、プッシュ通知を使えば、アプリと同様に、ユーザーに直接的に通知することで、新商品などのお知らせを配信でき、ユーザーのWebサイトへの再訪を促せます。 なお、PWAを介するプッシュ通知は、一般的には、Android + Google Chromeの環境で行われます。iOSやSafariでは、未対応です。 通常のWebサイト同様にアクセスできる PWAはWebサイトなので、通常のサイトと同様に検索結果やURLからアクセスすることが可能です。ページをシェアするときは、URLを送れば共有できます。また、検索エンジンで調べれば、PWA対応サイトを見つけることもできます。 ブラウザを使ってWebページにアクセスするときと異なり、フルスクリーンで画面表示できますので、URLバーやメニューバーは表示されません。 […]