Webアプリのようにモバイルアプリを作りたい / Overview of Cordova & PWA

Webアプリのようにモバイルアプリを作りたい 2018.8.20 / @radiocatz Mobile Act OSAKA #6

おしごと現職：株式会社ラクス所属：楽楽精算開発チームリーダー／スクラムマスター About me radiocat Twitter
: @radiocatz Android派／Vim派／野球派／ KIRINビール派 HTC DesireからAndroidユーザー Blog : http://radiocat.hatenablog.com/ Qiita : https://qiita.com/radiocat GitHub : https://github.com/radiocat TVCM放映中！ https://youtu.be/8J-ZTQVKWMw

お知らせ東京で勉強会やります社内でも勉強会をやっています https://news.mynavi.jp/kikaku/20180801-662693/ https://rakus.connpass.com/event/97795/

モバイルアプリ • iOSアプリ • 領収書をカメラで撮影すると OCRで日付や金額を自動入力して登録する • 経費精算に使う https://itunes.apple.com/jp/app/%E6%A5%BD
%E6%A5%BD%E7%B2%BE%E7%AE%97/id 1352852886 https://play.google.com/store/apps/details?id=jp.c o.rakus.sazabi.nativeapp.ic&hl=ja • Androidアプリ • 交通系ICカードの乗車履歴を NFCで読み取る • 交通費精算に使う

サービスをとりまく人々時々使う時々使う日々使う外勤社員営業社員経理社員内勤社員時々使う時々使う
モバイルアプリの利用者

Web機能の一部を切り出してモバイルアプリを作りたい Webエンジニアの悩み

Webエンジニアがモバイルアプリを作りたい大人の事情

Cordova 解決策その1

Apache Cordova https://cordova.apache.org/ • HTML5やJSの技術でモバイルアプリを開発するフレームワーク • ニトビ・ソフトウェア社がPhoneGapとして開発 • その後アドビ社が買収、ソースコードをApacheに寄贈したもの •
マルチプラットフォーム対応（iOS/Android/Windows Phone/Tizenなど）

アーキテクチャ • アプリを起動するとWebViewが立ち上がりWebアプリがロードされる • ネイティブ機能はPlugin経由で呼ばれる https://cordova.apache.org/docs/en/latest/guide/overview/index.html

UIフレームワーク Cordova上でモバイル向けのWebアプリを動かすためのUIフレームワーク • OnsenUI ◦ https://ja.onsen.io/ ◦ 日本製（アシアル社） • Ionic
◦ https://ionicframework.com/

Cordovaでのモバイルアプリ開発良いところ • Webアプリのお作法でUIを作り込める • OnsenUI/Ionicを使えばリッチなUIが容易に実現課題 • プラグインを扱うにはネイティブの知識が必要 •
JSライブラリの更新時にアプリの配信が必要 • Webアプリとのすみ分けが難しい

モバイルアプリが使いたいのではなくモバイルでサービスを使いたいはず

Webアプリの技術で作るではなく Webアプリのように作りたい Webエンジニアの悩み

PWA 解決策その2

Progressive Web Apps(PWA)とは • モバイルのUX向上を目的とした仕組み ◦ インストール不要 ◦ オフラインで動作 ◦
プッシュ通知に対応 ◦ ネイティブアプリのような UI • 主な技術要素 ◦ WebManifest ◦ Service Workers ◦ PushNotification ※技術的にはモバイルに限定したものではない

Google I/O 2016 の公式サイトがPWA化

アプリの構成例 ├── favicon.ico ├── （省略） ├── images ├── index.html ├──
js │ ├── main.js (Service Workerをインストールしているプログラム） │ └── offlinepage.js ├── manifest.json　 (Web App Manifestファイル) ├── offline │ └── index.html └── service-worker.js (Service Workerファイル)

Web App Manifest • アプリの情報を記述 ◦ ホーム画面に追加するアイコンの情報など ◦ マニフェストファイルの仕様 (
https://developer.mozilla.org/ja/docs/Web/Manifest ) • htmlの<head>にリンクを追加する <link rel="manifest" href="/manifest.json">

Service Worker • PWAの動作を担うJS • インストールされてバックグラウンドで動作 ◦ オフライン動作や通知が可能 // enable
service worker if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('/service-worker.js'); // 省略 } ※main.jsでServiceWorkerをインストールする実装例

オフライン動作 1. Service Worker登録後、リソースを要求 2. Service Workerがリクエストを乗っ取る 3.
カスタムしたレスポンスを返す https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers

JSフレームワークでのPWAサポート • React ◦ React PWA：PWA化されたテンプレート ▪ https://www.reactpwa.com/ • Vue
◦ vue-pwa-boilerplate：Google I/O 2017で公開されたPWAのテンプレート ▪ https://github.com/vuejs-templates/pwa ◦ @nuxtjs/pwa：Nuxt.js（Vue.jsのユニバーサルフレームワーク）の PWAモジュール ▪ https://www.npmjs.com/package/@nuxtjs/pwa • Angular ◦ @angular/pwa：Angular 6から追加されたPWAモジュール ▪ https://www.npmjs.com/package/@angular/pwa

Chrome DevTools PWAとしてのデバッグに対応参照:Service Worker のデバッグ | Web | Google
Developers https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/?hl=ja

PWAでモバイル対応良いところ • WebアプリのままでモバイルのUXを向上できる • 各JSフレームワークのサポートも充実課題 • ブラウザからは使えないネイティブの機能がある •
モバイルアプリではない

モバイルアプリをリリースしたい人もいるはず大人の事情

モバイル対応ではなくモバイルアプリを作りたい Webエンジニアの悩み

PWA+Cordova 解決策その3

実現イメージまとめて開発 Cordovaでビルドしてアプリとして配信そのままサーバへデプロイ

Ionic PWA Toolkit https://github.com/ionic-team/ionic-pwa-toolkit • Ionicフレームワークを使ってPWAを作るためのツールキット • まだBetaなので現時点ではIonicでビルドしたモバイルアプリをそのままPWA化できるほどツールとして整備されてない

PWA+Cordovaできるフレームワーク SPA/SSR/PWA対応/マテリアルデザインなどのUIコンポーネントなど全部入り • Framework7 ◦ https://framework7.io/ ◦ Vue.jsとReact.jsに対応 • Nuxt7：Nuxt.js+Framework7
◦ https://github.com/nuxt-community/nuxt7 • Quasar ◦ https://quasar-framework.org/ ◦ Vue.jsに対応

PWA+Cordovaでモバイルアプリ開発良いところ • モダンなWeb技術を最大限活用できる • モバイルアプリでありながらWebのUI/UXを維持可能課題 • やはりネイティブの知識は必要 •
技術トレンドの変化が激しい • サーバ/フロント/ネイティブのすみ分けが難しい

まとめ

Webアプリのようにモバイルアプリを作りたい人の選択肢 • Cordova ◦ モバイルアプリもHTML5/CSS/JSで作りたい人 ◦ WebのUI/UXを活かしつつモバイルアプリをリリースしたい人 ◦ ネイティブアプリの知識がある人 •
PWA ◦ アプリとしてリリースしなくてもいい人 ◦ 一部のネイティブの機能が使えなくてもいい人 • PWA+Cordova ◦ Web技術のトレンドの変化に追従できる JavaScriptカウボーイな人 ◦ Webとモバイルの両方の技術を駆使して自分でなんとかできる人

Thank you

References & Credits • サンプルコードで学ぶPWA - Qiita ◦ https://qiita.com/radiocat/items/034904a094d07c389a4f •
Unsplash ◦ https://unsplash.com/photos/SYTO3xs06fU

Webアプリのようにモバイルアプリを作りたい / Overview of Cordova & PWA

Webアプリのようにモバイルアプリを作りたい / Overview of Cordova & PWA

More Decks by radiocat

Other Decks in Technology

Featured

Transcript