FrontEnd

Vue CLIでPWAが簡単に実装できる 〜 Service Worker と A2HS 〜

投稿日:2020年2月24日 更新日:

はじめに

本記事では、  Vue.js で PWA(Progressive Web App)を開発する方法を説明します。プロジェクトの作成には Vue CLI を使用します。

参考までに、今回使用した主なライブラリ等のバージョンを記載します。

  • Node.js v13.2.0
  • yarn 1.17.3
  • Vue CLI 4.1.1

環境構築

Vue.js をインストールする方法はいくつかありますが、 PWA 関係の設定を簡単にするために、今回は Vue CLI を使用します。

はじめに、Vue CLI をインストールしてプロジェクトを作成する手順を説明します。

Vue CLIをインストール

Vue CLI は npm 経由でインストールすることができます。

Vue CLI のバージョンを指定する場合は以下のとおりです。

プロジェクトを作成

インストールが完了したら、 Vue CLI のコマンドでプロジェクトを作成します。

上記のコマンドを実行すると以下のような表示に切り替わります。

Manually select features にカーソルを合わせてEnterキーを押下します。すると、機能を選択する表示に切り替わるので、以下のように選択してEnterキーを押下します。

その他の設定に関しては、自分の好みに合わせて選択してください。参考までに、今回は以下のように選択しました。(Vue.js+TypeScriptな環境構築については以前紹介していますので、よろしければこちらもあわせてご覧ください)

インストールが完了したら、環境構築は完了です。

PWA選択時に追加されるファイル

Progressive Web App (PWA) Support オプションを選択した場合、以下の npm package が追加されます。

  • “register-service-worker”: “^1.6.2”,
  • “@vue/cli-plugin-pwa”: “^4.2.0”,

また、 Service Worker 関連で registerServiceWorker.ts が追加されます。registerServiceWorker.ts の中身は以下のとおりです。

その他、 public ディレクトリにアイコン画像一式と robots.txt が追加されます。

動作確認時の注意

通常、開発時にブラウザで確認するために yarn run serve でサーバーを起動すると思いますが、この方法では後述する Service Worker が動作しません。そのため、 Service Worker の機能を確認するためには、一度 yarn run build でビルドし、 Firebase Hosting などに適宜デプロイして確認してください。

Service Worker

はじめに、ブラウザによっては Service Worker の機能が利用できなかったり、制限されることがあるということを知っておく必要があります。特に iOS 端末での Service Worker を含む PWA の対応はまだまだなので、テストを行うには Android 端末のほうが良いと思います。

また、 Service Worker は HTTPS で通信するページでしか登録できないため、サーバ側が HTTPS に対応している必要があります。

Service Workerとは

Service Worker は、ブラウザがWebページとは別にバックグラウンドで実行するスクリプトです。主にPUSH通知やバックグラウンド同期のために用いられます。

Service Walker について押さえておくべきポイントは以下の4点です。

  • Service Worker は JavaScript Worker の一種なので DOM を直接操作することはできない。その代わりに、制御するページとの通信を postMessage インターフェースに応答することで行い、それにより DOM を操作することができる。
  • ページからのネットワークリクエストを制御することができる。
  • 使用されていない間 Service Worker は終了しているので、 onfetch や onmessage ハンドラ内でグローバルに定義したステートを頼りに実行することはできない。そのため、 ServiceWorker の複数のライフサイクルで値を共有したい場合は、 indexDB API にアクセスする必要がある。
  • Service Worker は JavaScript の Promises を多用する。

Service Workerのライフサイクル

Service Worker 以下のようなライフサイクルで動作します。

Installing
Service Worker をインストールするには、Webページの JavaScript から Service Worker を登録する必要があります。 Service Worker を登録すると、ブラウザはバックグラウンドでインストールを行います。このとき、一般的にはいくつかの静的なアセットがキャッシュされます。

もし、1つでもファイルのキャッシュに失敗した場合、 Service Worker はアクティベートされません(インストール失敗)。その場合、再度、 Service Worker を登録することでインストールをやり直すことができます。

Activated
インストール完了後、アクティベーション処理が行われます。アクティベーションステップは古いキャッシュの処理などを行うのに最適な段階です。

アクティベーションステップが終わると、 Service Worker はそのスコープ内の全てのページを制御します。ただし、 Service Worker を登録したページはこの時点ではまだ制御されず、次に読み込まれた時に制御されるようになります。

Terminated と fetch/message
Service Worker が制御を行っている間、Service Worker には2つの状態があります。1つ目はメモリ節約のために終了している状態で、2つ目はページ内で起こったネットワークリクエストやメッセージに対して、 fetch イベントもしくは、 message イベントの処理を行っている状態です。

Cacheの設定

Service Worker でのキャッシュには PreCache と RuntimeCache の2種類の方法があります。これらについて説明します。

Pre Cache

PreCache はアプリのアセット(js、css、image等)をキャッシュする際に利用します。こちらはアプリのドメインと同じ場所に配置してあるものが対象です。

Runtime Cache

API のレスポンス、サードパーティ製の JavaScript ライブラリ、 CDN から配信されるアセット等をキャッシュしたい場合は Runtime Cache を利用します。

Workboxとは

Vue CLI でPWAを有効にしたプロジェクトを作成した場合、 Service Worker を自前でゴリゴリ実装しなくても Runtime Cache を利用することができます。これには、 Workbox というライブラリが利用されます。

このライブラリは、 Google が 提供するライブラリで、アセットのキャッシュや PWA の全ての機能を簡単に使えるようになります。

ただし、実際には Workbox を直接利用するのではなく、 vue.config.js に設定を書くことで Runtime Cache の挙動をカスタマイズしていきます。 PWA の設定についてはこちらをご覧ください。

Pre Cacheの設定

Vue CLI でプロジェクトを作成した場合、 PreCache については特に設定しなくても自動でキャッシュされます。

Runtime Cacheの設定

Runtime Cache の設定は、 vue.config.js に書いていきます。まず、サンプルを記載します。

上記のサンプルは、APIのレスポンスをキャッシュする想定です。個別のパラメーターについて見ていきます。

urlPattern
urlPattern はキャッシュ対象の URL を正規表現で書きます。この際、後述する handler も合わせて書く必要があります。

handler
handler には以下のいずれかを選んで書きます。

  • staleWhileRevalidate
  • cacheFirst
  • cacheOnly
  • networkFirst
  • networkOnly

staleWhileRevalidate はキャッシュとネットワークの両方に要求が行き、ネットワークのレスポンスでキャッシュが上書きされる設定です。

cacheFirst は一度キャッシュされると更新されなくなる設定で、長期間変化しないデータに向いた設定です。デフォルトではスターテスコード200と不透明な応答(CROSをサポートしないクロスオリジンサーバーからの応答)をキャッシュします。

caches.match() を直接呼び出すより cacheOnly を利用する利点は、キャッシュ設定を使用し、RequestWrapper で定義されたプラグインをトリガーできる点です。

デフォルトの networkFirst では、ステータスコード200と不透明な応答(CROSをサポートしないクロスオリジンサーバーからの応答)をキャッシュします。

fetch() を直接呼び出すよりnetworkOnly を使用する利点は、RequestWrapper で定義されたプラグインをトリガーする点です。

A2HS

ここでは、 PWA の代表的な機能の1つである、 A2HS(Add To Home Screen)について説明します。

A2HSとは

ご存じの方も多いと思いますので簡単に説明すると、Webページをアプリのようにインストールし、ホーム画面に追加する機能です。

OS やブラウザによって使える機能がかなり変わってくるので、 Android の Chrome を前提に説明します。

A2HS を導入するには Web App Manifest を作成し、 Service Worker が登録されている必要があります。

Vue CLI で PWA を導入した場合は、以下のように vue.config.js に設定を書いていきます。

それ以外の場合は、以下のような manifest.json を作成します。

ちなみに、 yarn run build でビルドした際に出力される manifest.json は以下のとおりです。

A2HS を有効にしていて、ブラウザが A2HS に対応している場合、画面に以下のようなバナーが表示されます(AndroidのChromeで見た場合)。

add 2 home screen banner

Web App Manifest

manifest.json で設定できる項目は多岐にわたりますが、ここではよく使われるであろう項目に絞って説明します。その他の項目についてはこちらをご覧ください。

background_color

スタイルシートが読み込まれる前にマニフェストが有効になった場合、ブラウザが簡易的に描画する際の背景色として使われます。

description

Webサイトの説明文を記載します。

display

アプリの向きを指定します。有効な値は以下のとおりです。

fullscreen
利用可能な表示エリアがすべて使用され、ユーザーエージェントは表示されません。

standalone
スタンドアローンアプリケーションのようなスタイルになります。このモードでは、ユーザーエージェントはナビゲーションの制御のためのUIを非表示にしますが、ステータスバーなどのUIを表示することはできます。

minimal-ui
standalone に近いUIになりますが、ナビゲーション制御のための最小限のUI要素(ブラウザによってことなります)が表示されます。

browser(デフォルト)
従来のブラウザタブまたは、新しいウィンドウで開きます。

icons

アプリケーションのアイコン画像をサイズごとに設定します。

sizes
画像の幅と高さを区切り文字込で指定。

src
画像ファイルのパス。

type
メディアタイプのヒント。

purpose
画像の目的を定義します。値は、 badge 、 maskable 、 any (デフォルト)のいずれかです。

orientation

ページの向きを定義します。値は以下のとおりです。一般的には portrait がよく使われるのではないでしょうか。

  • any
  • natural
  • landscape
  • landscape-primary
  • landscape-secondary
  • portrait
  • portrait-primary
  • portrait-secondary

related_applications

インストール可能なネイティブアプリケーションを配列で定義します。

platform
アプリケーションのプラットフォーム。

url
アプリケーションのURL。

id
platform 上でアプリケーションを見つけるための固有の ID 。

theme_color

アプリケーションのテーマカラーを定義します。

さいごに

今回は、 Vue.js で PWA を開発する方法を Service Worker と A2HS に注目して紹介しました。この2つは PWA の機能の中でも特にユーザー体験を向上させられると思いますので、一度試してみていただければと思います。

参考

おすすめ書籍

動かして学ぶ!Vue.js開発入門 (NEXT ONE)  Vue.js入門 基礎から実践アプリケーション開発まで  Kotlinイン・アクション  詳解 Swift 第5版

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

JQueryでformにinput要素を足していく

はじめに 最近個人的にディープラーニングの勉強をしているtonnyです。 ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。 今回はその作成の中で、今まであまりやってこ ...

[Rails + Materialize] DateTimePickerがなかったので…

1 はじめに2 前提条件2.1 ビューのイメージ3 モデルにゲッターとセッターを追加4 入力フォームに追加4.1 JSファイルにて使用宣言4.2 HTML4.3 コントローラーのストロングパラメータを ...

Vue.jsでWebアプリケーションを作る〜Vue.jsの基礎〜

1 はじめに1.1 Vue.jsとは1.2 インストール1.3 Vueアプリケーションを作る2 データを表示する2.1 文字列を表示する2.2 HTMLで表示する3 属性を指定する3.1 インラインス ...

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

Vue.js入門その5〜マークダウンのリアルタイムプレビューをつくる〜

1 はじめに1.1 環境構築2 marked.jsの設定2.1 CDNのロード2.2 動作確認3 マークダウンを変換して表示3.1 雛形の作成3.1.1 HTML3.1.2 JS3.2 HTMLに変換 ...

フォロー

follow us in feedly

blog-page_side_responsive

2020年2月
 1
2345678
9101112131415
16171819202122
23242526272829

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。