読者です 読者をやめる 読者になる 読者になる

リクルート住まいカンパニー Tech Blog

ITのちからで暮らしをよくしたい、エンジニア・デザイナーが発信するTech情報メディア

SUUMOスマホサイトへのService Worker導入 ①

f:id:recruit-sumai:20170307184345j:plain

こんにちは、スマートデバイス戦略開発グループの katayama です!

最近は Web業界において、Service Worker が大きく話題となっていますが、 SUUMOのスマホサイトでも、Service Workerを利用した機能を実現しております。(プレスリリースの内容はこちら)

本記事では、SUUMOでの実装方法を、事例を含めて紹介させていただきます。

Service Worker でできること

Service Worker の技術を利用することで、オフラインキャッシュや、プッシュ通知、バックグラウンド同期、ホームスクリーンへの追加などの機能を実装することができるようになります。

また、最近リリースされた、Android Chrome の version 47 からは、ホームスクリーンからの起動画面にスプラッシュスクリーンが表示されるようになり、よりリッチなネィティブアプリの様な体験ができるようになっています。

※ これらServiceWorkerを利用するには、https 化 が必須の条件となります。

SUUMOのスマホサイトでの事例紹介

SUUMO (https://smp.suumo.jp/) では、オフラインキャッシュの対応と、ホームスクリーンへの追加機能をいち早く対応しています。(プレスリリースの内容はこちら) Service WorkerはAndroidでしか動作しませんが、ご興味があるかたはぜひ使ってみてください。

また大変光栄なことにChrome Developer Summit 2015 のキーノートにて、 SUUMOの取り組みを紹介していただきました!(15:35あたりから)

[embed]https://www.youtube.com/watch?time_continue=1&v=m2a9hlUFRhg[/embed]

add to home screen の実現方法

まず add to home screen の実装についてです。

WebAppManifest (manifest.json) と呼ばれる仕組みを利用して Service Worker の記述を行います。 (最低限、以下が書いてあればOK)

[title="manifest.json(WebAppManifest)"]
{
   "lang":"ja",
   "name":"SUUMO",
   "short_name":"SUUMO",
   "icons":[
      {
         "src":"/launcher-icon-3x.png",
         "sizes":"144x144",
         "type":"image/png"
      },
      {
         "src":"/splashscreen-icon-192x192.png",
         "sizes":"192x192",
         "type":"image/png"
      },
      {
         "src":"/splashscreen-icon-256x256.png",
         "sizes":"256x256",
         "type":"image/png"
      },
      {
         "src":"/splashscreen-icon-384x384.png",
         "sizes":"384x384",
         "type":"image/png"
      },
      {
         "src":"/splashscreen-icon-512x512.png",
         "sizes":"512x512",
         "type":"image/png"
      }
   ],
   "background_color":"#ffffff",
   "theme_color":"#ffffff",
   "start_url":"/apps/homescreen/",
   "display":"standalone"
}

JSONファイルの各キーと意味は下記のようになっています。

key 説明
name スプラッシュスクリーンに表示される名前
short_name ホーム画面に表示されるのアプリの短い名前
icon  各解像度に合った画像を指定
start_url  立ち上げるページのURL
background_color  スプラッシュスクリーンの背景色などに利用される
theme_color  ヘッダーの色などに利用される
display  ブラウザの表示方法の指定。 fullscreen、standalone、minimal-ui、browser  からいずれかを指定。 standaloneなどは、アドレスバーが表示されなくなります。
orientation  orientation の設定などで、横向き・縦向きを設定可能

またこのWebAppManifestを利用して、ネイティブアプリのダウンロードバナーを出すことも可能です。 (Increasing engagement with Web App install banners の Native app install banner を参照)

次にadd to home screeを出したい画面に下記のようなJavasciptのコードを埋め込みます。 (ここではregisterServiceWorker.jsとしています。add to home screenのみを実現する場合はserviceworker.jsは空ファイルで構いません)

[title="registerServiceWorker.js"]
navigator.serviceWorker.register('/serviceworker.js').then(function(registration) {

    // Success!

}).catch(function(error) {

    // Error...

});

デバッグ・動作環境ほか

デバッグ方法

  • 既にホーム画面に追加をしたことがある場合、履歴やキャッシュを削除する。
  • アドレスバーに chrome://flags/#bypass-app-banner-engagement-checks を入力し、「ユーザー エンゲージメントの確認の省略」を有効化する。
  • 実装されているページを表示し、その後再表示を行う。

ServiceWorkerの動作環境について

ServiceWorker は 証明書が有効なHTTPS のページでのみ動作します。

※ localhost であれば、httpsでなくても動作をするため、開発は可能です

WebAppManifestのBasic認証について

開発環境でBasic認証などをかけている場合、通常は認証のためのダイアログが表示されます。

しかし、WebAppManifest (manifest.json) に対しては、Basic認証がかかっていてもクライアントに入力ダイアログが表示されず、「ホーム画面に追加」のボタンが出ないことがあります。

これを回避するために、manifest.json にはBasic認証を掛けないといった対応が必要です。

次回予告

次回は、Service Worker による、Offline Cache についてご紹介致します。

参考サイト