【Webサイト制作者必見】PWAでWebサイトをアプリのように見せる方法 | 千葉で集客ホームページ制作はティーエスフォート
コラム

【Webサイト制作者必見】PWAでWebサイトをアプリのように見せる方法

【Webサイト制作者必見】PWAでWebサイトをアプリのように見せる方法

今回の記事ではPWA(Progressive Web Application)についてご紹介します。

PWAを使うことで、Webサイト、Webサービスをスマホのアプリのように使うことが可能です。

はじめに

今回の記事ではPWA(Progressive Web Appls)についてご紹介します。

PWAを使うことで、Webサイト、Webサービスをスマホのアプリのように使うことが可能です。

PWAとは

PWAを実装すると、Webサイトとネイティブアプリの利点を掛け合わせた、ネイティブアプリのようなWebサイトを作成することができるようになります。

ネイティブアプリとは、iOSであればApp Storeでインストールするアプリのことです。Webサイトをアプリの感覚でユーザーに使ってもらうことができます。

PWAのメリット

PWAには主に次のようなメリットがあります。

1.高速化



ページの読み込みが遅いサイトは直帰率が上がり、速いサイトはコンバージョン率を高めることができます。

PWAはキャッシュコントロールなどを活用し、パフォーマンスをあげることで直帰率の低下・コンバージョン率の上昇が期待できます。

2.導入コストの削減



ネイティブアプリ+Webサイトで開発する場合Android・iOS・Webサイトそれぞれで開発する必要があり、大規模な体制になってしまいます。

PWAはマルチデバイスに対応することができるため、ネイティブアプリ+Webサイトの開発と比較するとプロジェクト規模・開発期間・コストを抑えることができます。

PWAのデメリット

iOSではAndroidと比較してPWAで一部使用できない機能があるというデメリットがあります。

iOSではまだ通知機能が対応していません。ネイティブアプリほどまだメジャーではないという点もデメリットです。

PWAの主な特徴

1.ホーム画面に追加できる



PWAはWebブラウザ上でも動作しますが、ユーザーがインストールすることでスマホのホーム画面にアプリアイコンを追加することができます。

アプリアイコンがあるだけでもアプリのような感覚で使うことができます。

また、インストールした場合はアドレスバーなどのブラウザUIのないWebサイトとして実行することが可能です。

2.オフラインでも利用できる



データをキャッシュコントロールすることにより、オフラインやインターネットの接続が悪い環境でもページを機能させることが可能です。

webサイトはネットにつながっていないと開くことすらできないので、この点はPWAの差別性でもあります。

3.マルチデバイス対応



メディアクエリやビューポートなどの技術を使用して、デスクトップ、モバイル、タブレット どのような形状のUIにも適合させることができます。

WebページをPWAにする方法

PWA開発では、主にHTML、CSS、JavaScriptが使われます。

開発する際は、PWAの機能を段階的に導入できるため、モバイルアプリ開発と同様の要領でPWA化が可能です。

PWA開発で欠かせないのがService Workerと呼ばれるJavaScriptの活用です。

Webページを作る部分とは別に、Webブラウザがサーバー側で動くよう指示するために使用されます。

Service Workerとは、PWAの中枢的な機能であり、実態はWebページの裏側で処理を行うイベント駆動のJavaScript環境です。

Service Worker の特徴をまとめると以下のようなものがあります。

・イベント駆動の JavaScript Worker のひとつ。
・Web サイトとは独立したバックグラウンド処理を行う。
・Web サイトとは独立したライフサイクルを持つ。
・ネットワークリクエストをコントロール可能。
・必要に応じて起動、終了するため、ライフサイクル間でステータスを共有できない。
・DOM に直接アクセスができない。ただし、コントールするページ経由であれば可能。

Service Worker は Web ページとは独立したバックグラウンド環境で動作するため、ライフサイクルも異なります。

Web ページのライフサイクルは、ページを開いてから他のページに移動、またはページを閉じるまでになります。

一方、Service Worker のライフサイクルは、インスタンスが初期化され、それが破棄されるまでの期間になります。

Service Worker のライフサイクルにおけるステータスは、以下の 6 つの状態があります。

parsed
installing
installed
activating
activated
redundant

PWAの設定

以下を準備する必要があります。

・manifest.jsonを作成し、配備します。
・ServiceWorker起動のためのJavascriptを作成し、配備します。

manifest.json


public/manifest.json{
"short_name": "パスワードマネージャ",
"name": "パスワードマネージャ",
"display": "standalone",
"start_url": "index.html",
"icons": [
{
"src": "img/192x192.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
ページ先頭へ