◎PWA機能を有効化する方法

この記事では、PWA機能を有効化する方法をご紹介します。

「PWA機能」とは?

PWA(Progressive Web Apps)とは、モバイル端末上で、Webサイトをスマートフォン向けアプリのように使える仕組みのことです。

PWAを導入することで、ホーム画面へのアイコンの追加・プッシュ通知など、スマートフォンアプリの特徴的な機能をWebサイトに追加することができます。

ユーザーはアプリを起動するようにWebサイトを閲覧・利用することができるようになります。

PWAの特徴

オフラインでもサイト閲覧できる

キャッシュを活用することで、オフライン時も一度読み込んだことのあるページならサイト表示することができます。

例えば、あるユーザーが過去にそのサイトを訪問していた場合、ネット接続できない場所でもサイトを自由に閲覧でき、コンテンツを楽しめます。

ホーム画面にアイコンを追加ができる

スマートフォンなどのホーム画面に、Webサイトに直接アクセスするためのアイコンを表示することができます。

通常のアプリのようにアイコンをタッチするだけでWebサイトを開くことができるため、ユーザーは容易にサイトへアクセスすることができるようになります。

サイト表示の高速化

キャッシュを利用することで、サイトの表示速度が大幅に向上します。

PWA機能は、サイト閲覧に必要なデータをブラウザなどに保存しておくことができるため、再び、同じサイトを訪問した際の読み込み速度が格段に速くなります。

PWAを使用する際の注意点

PWAは、キャッシュを利用することで高速表示することを実現しています。そのキャッシュは非常に強力です。

サイト運営者視点では、カスタマイズを行ったにも関わらず、カスタマイズが反映されていないように見えてしまうケースがあります。(※実際には反映されている)

特に、サイト開設直後でサイト作成のためのカスタマイズを頻繁に行っている時期に、PWA機能を有効化している場合は、カスタマイズが反映していないように見えてしまう可能性がありますので、PWA機能を有効化しないことをおすすめします。

また、PWA機能を有効化している状態で、カスタマイズが反映しない場合は、PWAのキャッシュが原因である可能性が高いため、キャッシュの削除を試してみましょう。

「PWA機能」を有効化する

Step1.「テーマ設定」→「PWA設定」に進む

はじめに、「テーマ設定」→「PWA設定」の順に進みます。

 

Step2.「PWA機能の有効化設定」をONにする

(1)「PWA設定」→「基本」に進みます。

(2)初期設定の状態では、基本設定の画面で「PWA機能の有効化設定」がOFFになっていますので、ON」にチェックを入れます。

(3)最後に、「変更を保存」を押して下さい。

これで、PWA機能が有効化されました。

※既に、「PWA機能の有効化設定」がONになっている場合は、Step2の操作は不要です。
※この記事2ページ目↓では、有効化以外の設定についてご紹介していますので、ご参照ください。