PWAでwebプッシュ通知を作る (2) - 簡単なwebページをPWA化してみる

今回のテーマ:PWA化の具体的なコードの書き方

watanabeです。前回触れたとおり、PWA化に必要な具体的なコードの書き方を説明します。

今回のテーマ:PWA化の具体的なコードの書き方
PWA化に最低限必要なコードと具体的な記述方法
デモページ
次回予告
採用情報

例として、以下のwebページをPWA化してみます。真ん中のまねき猫の画像をクリックするとランダムに台詞を表示する簡単なスクリプトで書かれたページです。 webページなので一度アクセスしてもオフラインでは閲覧不可ですが PWA化することで、オフラインでも閲覧可、またアプリのような挙動にすることができます。

PWA化に最低限必要なコードと具体的な記述方法

以下の手順でwebページをPWA化します。

アイコンを作成する
ServiceWorker を作成する
manifest.json の記述をする
HTMLファイルに記述を追加する
Webサーバにアップロードする

1 アイコンを作成する

まず、アプリの顔となる、アプリの起動時のスプラッシュ画像やホーム画面に表示されるアイコンを作成します。

正方形の画像を透過可能なpng形式で作成して保存します。

同じ画像の拡張子を「.ico」に変更したものも用意します。

2 ServiceWorker を作成する

PWA用の処理を記述するjsファイルです。ファイル名は「serviceworker.js」や「sw.js」等識別しやすいものであれば自由です。

//キャッシュ名（今回はmanekineko という固有の名前）
var cacheName = 'manekineko';

//キャッシュしたいファイルのリスト(今回は3種類。HTML本体、jsファイル、CSSファイルが対象)
var filesToCache = [
   'index.html',
   'jquery.js',
   'style.css',
];

//ブラウザへのインストール時にキャシュしたいファイルを追加する
self.addEventListener('install',function(event){
  event.waitUntil(
    caches.open(cacheName).then(function(cache){
      return cache.addAll(filesToCache);
    })
  );
});


//ServiceWorkerが有効になるときcacheNameがちがうキャッシュを削除する
self.addEventListener('activate',function(event){
  event.waitUntil(
    caches.keys().then(function(keyList){
      return Promise.all(keyList.map(function(key){
        if(key !== cacheName){
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});


//キャッシュがあれば呼び出し、ない場合ネットワークから取りに行く
self.addEventListener('fetch',function(event){
  event.respondWith(
    caches.match(event.request).then(function(response){
      return response || fetch(event.request);
    })
  );
});

3 manifest.json の記述をする

jsonファイルに、PWA化に必要な定義をしていきます。このファイルでアプリとして起動したときの見た目や挙動も指定します。

{
  "lang": "ja",
  "name": "Manekineko",
  "short_name": "manekicat",
  "icons": [{
        "src": "iconV2.png",
        "sizes": "61x60",
        "type": "image/png"
      }],
  "start_url": "https://watanabe0601.github.io/sw.github.io/index.html",
  "display": "standalone"
}

各定義や具体的な記述方法は以下のドキュメントにあります。

ウェブアプリマニフェスト | Web | Google Developers

4 HTMLファイルに記述を追加する

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <!--アイコン-->
    <link rel="apple-touch-icon" href="iconV2.png">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <!--manifest.jsonの読み込み-->
    <link rel="manifest" href="manifest.json">
 
    <title>ランダムでしゃべる招き猫</title>
    <script src="jquery.js"></script>
    <script type="text/javascript">
     -----略------
    </script>
  </head>
  <body>
    <div class="container">
      -----略-----
    </div>
    <!--ServiceWorkerの登録（成功したらログを表示）-->
    <script  type="application/javascript">
if('serviceWorker' in navigator){
  navigator.serviceWorker.register('serviceworker.js').then(function(){
    console.log('Service Worker Registered');
  });
}
  </script>
    <!--ServiceWorkerの読み込み　終わり-->
  </body>
</html>

5 Webサーバにアップロードする

作成したファイルをhttps対応のサーバにアップロードします。 PWAはキャッシュを用いて、サーバの代わりにローカルのファイルを読み込む機能などがあり、安全な通信でないと第三者からの割り込みの危険性があるため、安全な通信ができるHTTPSでなければいけません。

デモページ

実際にPWA化した画面のデモです。こちらにスマホからアクセスしてみてください。

PWA化したことで以下のようなことが可能になりました。（検証OS・ブラウザ：Android 8.0.0・Chrome ）

スマホのブラウザから開き、メニューから「ホーム画面に追加」を選択すると"インストール"され「ホーム画面」にアイコンが表示される
オフライン（機内モード）でも起動できる
アプリとして、ブラウザとは別のタスクとして起動されている

次回予告

次は実際にプッシュ通知を受け取る部分を作成します。

参考文献：プログレッシブウェブアプリ PWA開発入門 (NextPublishing)

採用情報

朝日ネットでは新卒採用・キャリア採用を行っております。

朝日ネット　技術者ブログ

朝日ネットのエンジニアによるリレーブログ。今、自分が一番気になるテーマで書きます。