PWA対応 Webサイトのアイコンをホーム画面に追加

PWA(Progressive Web Apps)は、Webサイトをアプリのように使えるようにする仕組みです。対応することによりWebサイトに対してホーム画面にアイコン追加、プッシュ通知やオフライン対応が可能になります。

Webサイトを簡易に携帯アプリ化したように見せるときに有効です。

いくつか注意があります。

※現時点ではAndroidは正しく動きますが、iosはまだ動きません。

※httpsである必要があります。

※マーケットからアプリを取得するわけではなく、Webサイトに訪問してもらってから追加となります。

 

今回はホーム画面にアイコンを追加の対応について試してみます。

①httpsのページを用意

httpsのページを用意します。

いったんindex.htmlの中身は以下です。

 

 

②manifestファイル作成

manifest.jsonを作成します。

アイコンはimagesフォルダ配下に配置を想定

name:アプリ名称
short_name:アプリ省略名称(ホーム画面で表示されます)
icons:アイコン(ホーム画面に表示されるアイコン)
start_url:アプリを開いたときのURL
display:表示形式(standaloneの場合アドレスバーが消えます。)
theme_color:テーマカラー

※設定の詳細は以下を参照

https://www.w3.org/TR/appmanifest/

 

③serviceWorker.jsファイル作成

serviceWorker.js

ホーム画面にアイコン表示だけの場合、特に中身に詳細を書く必要はありませんが。

空だと正しく動かないようです。

 

④index.htmlにmanifestとserviceWorker.jsを読み込む

index.html

 

この時点でchromeの開発者ツール(F12)を表示すると以下のようにみえています。

表示されていなかったりコンソールにエラーが表示されている場合は、どこかのファイルでミスがあります。

 

⑤androidで表示する

androidで表示すると画面下に「ホーム画面に追加」が表示されます。

追加をクリック

ホーム画面にアプリのようなアイコンが表示されます。

アイコンをクリックすると以下のような画面が表示されます。

簡単にできました。既存のWebサイトをアプリ化するために、WebViewのみのアプリを作成するよりはいいかもしれません。

はやくiosでも対応してほしいものです。

以上です。

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です