３分でWebサイトを PWA としてアプリ化させてみる

最近 PWA って言葉をよく聞きます。

PWAはこの略　⇒　「Progressive Web Apps（プログレッシブ　ウェブ　アプリ）」

なんか長ったらしい名前だけど、普通のサイトをアプリ化できるってことです。

ホーム画面にアイコンも作れるし、
アドレスバーも隠せるし、
プッシュ通知とかも送信できるし、、、

こんなのが普通のWebサイトで使えるなんて・・・一昔前は信じられなかったです。

僕も少し興味があったので、実際にあるWebサイトをPWA化してみました。

同じようにPWA化したい人のために、
ここではWebサービス・サイトをPWA化する手順をまとめてみます。

このページの目次

手順１．manifest.jsonを作成する
手順２．manifest.jsonを全ページで読み込みする
手順３．サービスワーカーの作成
手順４．ページ内でサービスワーカを登録する
ラスト．Chrome開発者ツールでPWA化したか確認する
ここまでのPWA化手順まとめ

手順１．manifest.jsonを作成する

PWA化で絶対にやらないといけないこと

それが manifest.json の作成

いわゆるマニフェストファイルというやつで、
この名前のファイルをWebサイトのルートディレクトリに作成します。

▼ 内容はたとえばこういう感じ（最小構成）

{
  "name"              : "Pisuke PWA",
  "short_name"        : "PskPWA",
  "description"       : "PWAのサンプル的なの",
  "start_url"         : "/?pwa=1",
  "display"           : "standalone",
  "background_color"  : "#ff0000",
  "theme_color"       : "#ff0000",
  "icons": [{
      "src"           : "/icon-192.png",
      "sizes"         : "192x192",
      "type"          : "image/png"
    }, {
      "src"           : "/icon-256.png",
      "sizes"         : "256x256",
      "type"          : "image/png"
  }]
}

{

"name" : "Pisuke PWA",

"short_name" : "PskPWA",

"description" : "PWAのサンプル的なの",

"start_url" : "/?pwa=1",

"display" : "standalone",

"background_color" : "#ff0000",

"theme_color" : "#ff0000",

"icons": [{

"src" : "/icon-192.png",

"sizes" : "192x192",

"type" : "image/png"

}, {

"src" : "/icon-256.png",

"sizes" : "256x256",

"type" : "image/png"

}]

}

このJSON内のプロパティについては次の通り

name
PWA化したいWEBサイト・サービスの名前。
short_name
PWA化したいサイト・サービスの省略名
description
どういう内容のサービスなのか一応書いておく。この内容がどこに表示されるかは不明
start_url
ホーム画面のアイコンをクリックしたときなどに最初に開くURL。この例の ?pwa=1 みたいにPWA専用のパラメーターを設定しておくといいかも
display
この値に "standalone" を指定するとネイティブアプリのような見た目になる。他にも "full_screen" , "minimal-ui" 、"browser" が指定できる
icons
アイコンは 192x192 と 256x256 のサイズを用意しておけばいいらしい。あまり必要ないけど 512x512 も含めることも可能

最低限 manifest.json で必要なのが、これらの情報

作成したらサイトの一番上のディレクトリにそのままアップしちゃえばOKです。

手順２．manifest.jsonを全ページで読み込みする

次はWebサイトのheadタグで manifest.json を読み込み

これは必ず head タグ内で読み込まないといけません。

▼ 全ページで読み込みさせておく

<head>
  <meta charset="UTF-8">
  <title>PWAのサンプル的なの</title>
  <link rel="manifest" href="/manifest.json">
</head>

<head>

<title>PWAのサンプル的なの</title>

</head>

linkタグから rel="manifest" を指定してマニフェストファイルを読み込み

PWA化で必ずしておくべき作業です。

手順３．サービスワーカーの作成

お次はサービスワーカー(Service Worker)の作成

これはバックグランドで動くスクリプトを制御するためのモノで、
これがあるから次みたいなネィティブアプリ的な機能が使えるようになります。

オフラインでのページ表示
通知バーへのプッシュ通知
バックグラウンド同期

ホーム画面にアイコンが作れるだけが PWA じゃありません。

まあサービスワーカーの名前はなんでもいいんですが、
ここでは service-worker.js という名前で作ってみることにします。

▼ その内容がコチラ

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
});

// サービスワーカー有効化に必須
self.addEventListener('fetch', function(event) {});

self.addEventListener('install', function(e) {

console.log('[ServiceWorker] Install');

});

self.addEventListener('activate', function(e) {

console.log('[ServiceWorker] Activate');

});

// サービスワーカー有効化に必須

self.addEventListener('fetch', function(event) {});

これが最低限 PWA を動かすための最小構成（最後の行は必ず必要）

この内容で保存したら、service-worker.js をルートディレクトリに配置しておきます。

つまり manidest.json と同じ場所でOKってことです。

手順４．ページ内でサービスワーカを登録する

最後はサービスワーカー（Service Worker）の登録

PWA化したい全ページで service-worker.js を読み込みします。

この処理を書いておかないとPWAとして機能しないので大事です。

▼ その具体的なコード例は以下の通り

if('serviceWorker' in navigator){
	navigator.serviceWorker.register('/serviceworker.js').then(function(){
		console.log("Service Worker is registered!!");
	});
}