BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. PWAでウェブアプリとしてスマホのホーム画面に追加しよう
by 漢ムラタ 漢ムラタ

PWAでウェブアプリとしてスマホのホーム画面に追加しよう

PWAでウェブアプリとしてスマホのホーム画面に追加しよう

こんにちはムラタです。

今回は今後ビッグウェーブが来るかもしれないし来ないかもしれない、そんな「PWA」の触りの部分だけ実装してみたお話です。

PWAって?

Progressive Web Apps(プログレッシブ ウェブ アプリ)」の略で、Googleがモバイルユーザーの体験向上を目的として策定した仕組です。

特徴としてブラウザからアクセスするwebページとApp StoreやGooglePlayからダウンロードして使うネイティブアプリ両方の利点を兼ね備えたアプリということです。

超ざっくりいうと通常のwebページをアプリっぽい感じでユーザーに提供できるよ!みたいな感じで捉えていいと思います。たぶん。違ったらごめんなさい。

PWAでできること

PWAを実装することで以下のメリットを受けることが出来ます。

  • ページの読み込み速度の上昇
  • 通信環境が良くない場所、もしくは完全なオフライン状態でもページを閲覧可能にする。
  • 特定条件下において、ページ上にホーム画面に追加を促すバナーを自動で表示(現時点ではAndroid chromeのみ)
  • アプリでよくある「プッシュ通知」を送れる。
  • アプリだと必要なリリース審査が不要
  • App StoreやGooglePlayなどから検索してインストールといった手順が不要。webページから直接ホーム画面にインストールしてもらえる。
  • ユーザーのGPS情報を利用できる。

細かく言うともっとあるんでしょうがざっくりこんな感じでしょうか。
読み込み速度上昇やプッシュ通知などは結構使えるんじゃないでしょうか

PWAに必要な環境

魅力的機能を提供してくれるPWAですが、どのブラウザでも対応しているというわけではありません。PWA実装にあたって「Service Worker」というスクリプトを動かす必要があるのですが、IEはまあ当然といえば当然ですが対応していません。

またios safariも実は最近まで対応していなかったのですが、safari11.1からPWAの一部の機能が動くようになりました。
iosユーザーのほとんどがsafariを使っていると思うのでなるべく早く全ての機能が使えるようになって欲しいところです。

ただユーザーがPWAに対応していないブラウザを使っているからといって別にサイトが見れないというようなことはなく、単純に普通のwebサイトとして表示されるだけなので心配無用です。

現在のブラウザごとの対応状況は下記を参照してください。

それとブラウザ以外だとhttpsが必須だというのも条件に入っているので注意です。

実装方法

それでは早速必要最低限での機能でPWAを実装してみましょう。
最小限の構成ならとても簡単です。

マニフェストファイルを作成する。

まず今から作成するウェブアプリの概要をまとめたファイルを作成する必要があります。このファイルにアプリ名やアプリの簡単な説明文、アイコン画像の指定やアプリ起動時の背景色などを指定することができます。

早速「manifest.json」というjsonファイルを作成して、ルートに設置します。
今回用意したmanifest.jsonの中身は下記になります。

name

ここにはアプリ名を入れます。ウェブアプリなのでサイト名とかが一般的でしょうか。

short_name

この記述がある場合はホーム画面に追加したアプリアイコンの下に表示されます。上記アプリ名が長すぎる場合は省略名などをここに記述すればいいと思います。

description

アプリの説明を記述します。

start_url

アプリを起動した際最初に表示するページを指定します。記述がない場合はユーザーがホーム画面へ追加した時に開いていたページになるようです。
URLパラメーターを付与しておくことで、アナリティクス等でどれくらいアプリとして使われているかを計測することもできます。

display

これはアプリとして起動した際に、どのように画面を表示させるかを指定することができます。
指定できる項目は以下になります。

  • fullscreen
    時計とかバッテリー残量などの表示も無くなり、画面全てをアプリの表示領域とします。ゲームアプリなどが大体これに当てはまるのではないでしょうか。
  • standalone
    時計やバッテリー残量などの表示は残りますが、ブラウザで見る際は出ていたURLやタブボタン・メニューなどのUI部分が無くなり、アプリっぽい感じになります。
  • minimal-ui
    上記standaloneに戻るボタンなどナビゲーション制御のための最小限のUIを持たせるということらしいのですが、自分がiosで確認する限りではアプリとして認識されず普通にsafariで開かれていました・・・
  • browser
    通常のブラウザで開く処理になります。

アプリぽい感じを出したいだけならstandaloneあたりが無難じゃないかと思います。

orientation

アプリを開いた際の画面の向きを強制させることができます。
指定できる項目は以下になります。

  • landscape
    横向きになります。
  • portrait
    縦向きになります。

他にも指定できる項目があるようですが、とりあえず上記2つのどちらかを指定することになると思います。

ちなみに自分がiosで確認した所この指定は効いていませんでした。途中から追記したので反映に時間がかかるのか、そもそもiosが対応していないのか分からないですが・・・

background_color

ウェブアプリでは起動した際にほんの数秒アプリ起動画面が表示される(現時点ではandroidに限る)のですが、その際の背景色を指定することができます。

このようにアイコン画像とアプリ名と共に一瞬起動画面として表示されます。

theme_color

ステータスバーの色を指定することができます。現時点ではandroidに限ります。

実際には指定した色よりちょっと暗くした色が出るようです

icons

アプリのアイコン画像を指定します。様々なサイズのアイコンサイズを指定できますが、Googleによると最低でも192×192サイズのアイコンがあれば、それより小さいサイズに関しては用意する必要はないということらしいです。

今回は192と256と512のサイズを用意しました。

マニフェストファイルを読み込む

では作成したmanifest.jsonファイルを読み込みましょう。
head内の適当な場所にlinkで読み込みます。

問題なく読み込めているかどうかはchromeのデベロッパーツールを使うと分かりやすいです。
F12でデベロッパーツールを開いたら「Application」タブを選択します。

「APP Manifest」というタイトルでmanifest.jsonで指定した各項目が列挙されていれば問題ありません。

マニフェストファイルに関してはこれで終了です。

マニフェストファイルの変更に関して

ウェブアプリを運営していく過程で途中でマニフェストの内容を変更したい時があると思います、例えばアイコンを変更したい時や、画面の向きを固定したい時などです。

しかし、ユーザーが一度ホーム画面に追加してしまうといくらマニフェストファイルを変更してもその変更がユーザーに反映されることはありません。

変更を反映させるにはユーザーが一度ホームからウェブアプリを削除して再度ホーム画面へ追加してもらう必要があります。
そんなことをするユーザーはほとんどいないと思うので、現時点では実質一度マニフェストを決めてしまうとほぼ変更は効かないと思った方がいいです。
なのでマニフェストの内容は慎重に決めましょう。

Service Workerの登録

マニフェストの設定が終わったら次に「Service Worker」を登録します。

Service Workerとは

Service Workerというのはwebページとは別にバックグラウンド実行されるスクリプトで、これを使うことでオフラインでもページを表示できたりプッシュ通知を実装できちゃう凄い奴です。(正確にはService Worker単体での機能ではないようですが)

当然今回実装するPWAもこのService Workerが必須になります。

serviceworker.js

まずルートディレクトリに「serviceworker.js」ファイルを作成して設置します。(名前は別に任意でもOKです)
この中にService Workeの関する様々な処理を記述していくのですが、今回はオフライン対応やプッシュ通知などは使わず、ウェブアプリとしてホーム画面に登録させるという最小限の機能だけにします。

その場合のserviceworker.jsの記述はこれだけです。

登録

そして上記serviceworker.jsを登録させます。
ServiceWorkerの制御下に置きたいページのheadの中に登録の記述を書きましょう。

まず「if(‘serviceWorker’ in navigator)」でService Worker APIが存在しているかチェックをして、存在していれば今度は「serviceworker.js」ファイルをチェックして問題なければ登録成功のログを出すような流れです。

ちなみにserviceworker.jsから下の階層のみが制御下に置かれるのでファイルの置き場所には注意してください。

PCでの確認

一旦実機で確認する前にchromeのデベロッパーツールで確認してみましょう。

マニフェストファイルの時と同じく「Application」タブを選択して、「Identity」という項目に「Add to homescreen」というテキストリンクをクリックします。

すると画面上部に「このサイトをシェルフに追加するといつでも使えるようになります」というメッセージが出ると思います。
出ない場合はコンソールログにエラーが出力されていると思うので、そのメッセージ通り修正を行なってください。

「追加」ボタンをクリックすると「ショートカットを作成しますか?」というダイアログが表示され、任意の名前でchromeアプリとして登録することができます。

デスクトップに作成されたショートカットアイコンを開くと

このようにブラウザではなくアプリとして立ち上がります。

chromeアプリから削除したいときは「chrome://apps/」にアクセスして該当のアプリを右クリックで「chromeから削除」を選択してください。

これでchromeでの確認は終了です。次は実際に実機で確認してみましょう。

実機での確認

Android Chromeでアクセスした場合、画面下に「ホーム画面に追加」というインストールの導線が出力されると思います。

このボタンをタップすることでホーム画面へウェブアプリのインストールを行なってくれますが、この機能はまだAndroid chromeだけでiosに関しては対応していません。
ちなみに一度「×」を押して明示的に拒否しちゃった場合はしばらく出てこなくなります。

ではiosの場合はどうやってホーム画面へウェブアプリを登録させるのかというと、ios safariのメニューバーから「ホーム画面に追加」を選択するしか今のところありません。

正直サイトがPWA化してるかどうかなんてユーザーからは全く分からないですし、そもそもウェブサイトを「ホーム画面に追加」なんてするユーザーなんているんでしょうか・・・ブックマークで事足りますよね。
というわけでiosからではウェブアプリとしてホーム画面に追加してもらうことは現状ほぼ不可能なんじゃないかと思ってしまいます。

とりあえずホーム画面への追加は完了したので確認してみましょう。

iOSの方のアイコン画像がマニフェストファイルで指定した画像になっていないことが分かりますよね。
そうなんです、iOSではまだマニフェストファイルのiconsの指定が効かない仕様なんです。(2018年8月現在)

ではiOSのアイコン画像はどこで指定するのか、答えはheadの中に下記の記述を書くことです。

rel属性に「apple-touch-icon-precomposed」とし、hrefにアイコン画像へのパスを記述します。
今回画像のサイズは152×152のみとしていますが、デバイスに併せて複数のサイズを指定することもできるそうです。

それでは一度ホーム画面からウェブアプリを削除し、再度インストールしてみます。

今度は大丈夫そうですね。
これでウェブアプリとしてホーム画面に追加するという処理はひとまず完了です。

終わり

今回はPWAの中でもホーム画面にウェブアプリとして追加させるという触りの部分だけをご紹介しましたが、オフライン対応やプッシュ通知などまだまだ使えそうな機能は沢山あります。

ただなにぶんまだiosなどの遅れもあり、フル活用するのは難しい段階だと思います。
appleもiOSやmacOSのsafariでPWA対応を進める方向になったらしいので近いうちにすべての機能が使えるようになると思いますが待ち遠しいですね。

それではまた機会があれば別のPWA記事でお会いしましょう。

ページの先頭に戻る