Progressive Web AppsとService workersについて良記事があったのでこちらの知識も踏まえざっくり分かりやすくして説明します。
1. モバイルアプリ開発の選択肢色々
| 名前 | 説明 |
|---|---|
| ★Progressive Web App | デバイスがサポートする機能をベースとしたHTMLベースのアプリケーション。 オフライン利用可能/Push通知可能/ローカルキャッシュ機能/フルスクリーン表示/セキュア/高速な読み込み |
| Native App | Android/IOSをそれぞれのSDKで完全に別のプラットフォームとして作成する必要がある。 |
| Hybrid Apps |
・Phonegap(HTML5 => Native) ・Xamarin(C#=>Native) └IOS/Androidとプロジェクトが別になるのでメリットをあまり感じない ・ReactNative(JavascriptES5,6 => Native) └コードは完全に共通化されるがIOS/Androidで共通出ない機能については利用できないか書き分けが必要 |
| ▲Web View App | Webサイトと同等のアプリケーション Nativeアプリ中のWebViewを実装して作成する事がある WebViewの中身だけHTMLベースのウェブサイト └アプリとサイトの両方必要な場合に開発コスト減 └ただしNativeの機能がほぼ扱えない |
Progressive Web App はWeb View Appの高機能な代替案になっていく事と思われます。
2. Progressive Web Appsの主な機能
Progressive Web Appsとはアプリ開発の選択肢の中の一つです。
Service workersというプログラミング可能なwebページとnetwork間のproxyで下記の様な機能を実装しています。
Service workersは現在Chrome上に実装されていて、IOS 11.3,macOS 10.13.4にも実装予定なので、今後Android,IOSの両方で利用していく事ができます。
とても魅力的な点は2点
- オフラインで使える
- プッシュ通知を受け取れる
それではこれらが技術的にどうやって実装されているのか確認しましょう。
ServiceWorkerとはメインスレッドとは別で動いているJavascriptファイルベースのワーカープロセスです。
別スレッドなのでDOMアクセスはできませんがLocalStorageAPI,XHRAPIはChannel Messaging APIを経由してメインスレッドへメッセージを返します。
Service WorkersはWeb APIのPromises,Fetch API,Cache APIを(*HTTPSしか使えないので注意)利用します。
今まで、制御できなかったキャッシュ部分が制御できるようになり、画像やCSSなどのアセットプリローディング、キャッシュクリアができ、なおかつオフラインで利用できます。サーバーサイドの更新リクエストをオフライン時にキューイングしてオンライン時にまとめて実行するなどする事が可能です。
3. PUSHのサンプルを試してみる
3.1 Developperコンソール
1.Firebase Developer Consoleでプロジェクトを作成
2.Settings (左隅のあたり)にいき, 'Cloud Messaging Tab'をクリック
$ git clone https://github.com/GoogleChrome/samples.git chrome
$ cd chrome/push-messaging-and-notifications
# 3.「config.sample.js」を「config.js」という名前でコピー
$ cp config.sample.js config.js
# 4.「manifest.sample.json」を「manifest.json」という名前でコピー
$ cp manifest.sample.json manifest.json
# 5.「config.js」の中の<Your Cloud Messaging API Key ...> を新規にFirebase上に作成したAPI keyに書き換える
$ vi config.js
# 6.「manifest.json」の中の<Your Cloud Sender ID ...> Firebaseコンソール上のsender IDに書き換える
$ vi manifest.json
3.2 サーバーインストール
$ vi package.json
{
"name": "simple-serviceworker-tutorial",
"private": true,
"scripts": {
"start": "http-server -c-1"
},
"devDependencies": {
"http-server": "0.8.5"
}
}
$ npm install --save
$ npm start
$ open http://localhost:8080/
3.3 PUSH配信
- 画面上の「Enable Push Messages」をクリック
- ChromeのデバックツールよりPUSHメッセージを送信する
PUSHボタンをクリックすると
無事にメッセージが届く事が確認できました。