Vue.js + PWAはどの程度アプリに近いUXに出来るのか

WEBアプリだけど、UXをネイティブアプリに近づけることが出来るPWAを試してみる。

ぼくはネイティブアプリより、RailsのWEBアプリ開発の方が得意だし、世の中的にもWEBアプリの技術でネイティブ的なUXが実現出来るのは熱い。どの程度のものか確かめてみる。

vue-cliでPWAのテンプレを生成する
PWAで動いているかどうか確認する
PWAの機能を検証
ホーム画面に追加
まとめ

vue-cliでPWAのテンプレを生成する

vue-cliを使えば余計なことは考えず一発でPWAの構成を生成してくれる。

参考

$ vue --version
3.0.1

生成する。テストは今回はスコープ外なので生成しない。

$ vue init pwa pwa-sample

? Project name pwa-sample
? Project short name: fewer than 12 characters to not be truncated on homescreens (default
: same as name)
? Project description A Vue.js project
? Author a.harada <harapanman@example.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "pwa-sample".

   To get started:

     cd pwa-sample
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

まずはローカルで動かしてみる。どうやら今回はyarn serveではなく、yarn devで起動するようだ。フロントエンドを含むと起動の仕方がバラバラでめんどいですな。

$ yarn install
$ yarn dev

普通に開けた。

display

PWAで動いているかどうか確認する

どういう仕組みかわからんがChrome拡張でservice-workerが動いていることを確認出来るらしい。

Web Server for Chrome - Chrome ウェブストア

setting

動いている、らしい。

service-worker-local

PWAの機能を検証

PWAはネイティブアプリに近いUXにするために、スタンドアロンモードという、ブラウザのURL部分を非表示にした形で表示するのが定石のようだ。

manifest.jsonで指定するのと、Safariの場合は、metaタグの設定が必要になる。

manifest.json

{
  "name": "pwa-sample",
  "short_name": "pwa-sample",
  "icons": [
    {
      "src": "/static/img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

index.html

<meta name="apple-mobile-web-app-capable" content="yes">

ここまで出来たら前回の記事の通りにfirebaseでホスティングする。

iPhoneのサファリで開いてみたが、普通にURL部分が表示されとるやないか。。

safari1

が、手動でホーム画面に追加して、ホーム画面から起動したら表示されなくなった。

うーん。なるほど。。ホーム画面に配置されるまではあくまでもWEBぽいUXで我慢しろということなのだろうか。ちょっとお粗末な制約だなこりゃ。

safari2

apple-mobile-web-app-capableについてはあんまり動作が安定していないという情報を多々見かける。

ホーム画面に追加

PWAのメリットその2は、WEBで起動した際に、ホーム画面に追加するかをユーザーにアナウンスすることが出来る。

はずが、出ない。。

PWAで「ホーム画面に追加」が表示されない時に確認する事 - 文系プログラマによるTIPSブログ

5分間あけて2回目の訪問時に「ホーム画面に追加」が表示される仕様らしく、開発者の方ではいじることが出来ない。

思想的には、ユーザーが有益と判断したから二度訪問したという裏付けを元に、ホーム画面に追加するアナウンスをするべきという考え方らしい。

個人的には、UXが良かったから2度3度使いたくなるもんなんじゃないの？と思うので、こちらもお粗末な制約に感じるなあ。むしろ開くより前にホーム画面に追加したいくらいだよ。

で、5分あけて開いてみたけどでなーい＼(^o^)／くっそ！

これ絶対ハマるやつやん。

まとめ

PWA方向性は非常に良いと思うのだけど、ちょっと期待した程にはUXを改善しないなあと感じた。あくまでもWEBアプリとしての動線を一度経由しなければならないので、ネイティブっぽい使い勝手を求めるユーザーにとってはまだまだ離脱ポイントになり得る。

現時点ではあくまでもWEBアプリをモバイルで使う際の使い勝手を最適化したっていうくらいだな。離脱を軽減出来る効果はある程度あると思うが、さらなる進化を期待しておく。

次はオフラインでもコンテンツ表示出来るのを確認したかったが時間の関係上ここまでにするです。

もふもふ技術部

IT技術系mofmofメディア

Vue.js + PWAはどの程度アプリに近いUXに出来るのか

vue-cliでPWAのテンプレを生成する

PWAで動いているかどうか確認する

PWAの機能を検証

ホーム画面に追加

まとめ