KotlinJSでServiceWorkerを使ってみた
- 足立 晃一 様
- CyberAgent
- sdk/library開発
kotlinJS in ServiceWorker
- 良かった点
- コード再利用できた
- すでにあるkotlinコードを
- コード再利用できた
ServiceWorkerのおさらい
- プロキシ
- 通信検知して書き換え
- ページのJSとは別スレッドで動く
- DOMのレンダリングに影響しない
- ブラウザの任意のタイミングでServiceWorkerは終了する
- 永続化はindexedDBとか
kotlinJS
- kotlinのコードをJSにコンパイル
なぜkotlinJSとServiceWorker
- 状態管理とか発生した時にkotlinいいんじゃないか-
- state machine
- swift,kotlin,tsで書いてたのをServiceWorkerへ移植
大変だったこと
- 意図しないタイミングでリリースされる
- indexedDBの型ファイル自作
使い方
- kotlinからServiceWorker見えるように定義しないといけない
- external
- kotlinからJSの関数を呼ぶ
- DOMアクセス系とか
- kotlinからJSの関数を呼ぶ
- 入れ子のPromiseの型の扱い
- asDynamic
ツールを利用した対応と企業サイドの懸念点
Mobify
- PCサイトをモバイル向けにするツール
課題
- モバイルからのコンバージョン率
- 顧客ロイヤルティ
- サービス力で差をつける
事例
- LANCOME
- リッチなコンテンツ
- ページ増加
- スピード課題
- アプリは?
- 毎日使うようなものでもない
- PWAで
- 恩恵
- アプリライク
- プッシュ通知
- 買い物かごに入れたまま落ちた人に通知
- AMP + PWA
- 入り口はAMP
- そのあとはreact
導入企業の声
- ネイティブライクに
- アプリと全く同じになると勘違い
- 見た目がwebと同じじゃんとなる
- ios対応していないことはネガティブ要因
- iosプッシュ通知使えないし・・
- 新規事業と相性良い
- ホームアイコンのみでも
メリット
お手軽PWA開発環境と近い将来の課題
お手軽PWA開発
- create-react-app
- ionic cli
- start templateが豊富
- とにかく簡単
- PWA Builder
- microsoft製
- 非PWAを読み込んでPWAを出力
- 各種プラットフォーム最適化出力
- microsoft独自のモバイルアプリはもう諦めた?
- https://www.pwabuilder.com/
ユーザから見た不安
- 見つけにくい？
- ストアで探しても見つけることができない
- ググればいいと言うけれど
- そのままではPWAと思わないのでホームに追加しようと思わない
- そもそも知らないし
- iosは自分でホームに追加しないといけない
- インストールしますかとか出してもそういうのはたいてい拒否される
- ネイティブと比べて
- 動作遅い？
- 機能低い？
開発者から見た不安
- 最適な開発環境は？
- UIフレームワークは？
- デバイス固有機能へのアクセスは？
- what web can do today
- https://whatwebcando.today/
- プラットフォーム固有のフレームワークへのアクセスは？
- 各種デバイスでのテストは？
一般的な課題
- マルウェア対策
- サニティチェック
- メモリ/ストレージ使用量の把握/警告
- ユニバーサル性/レスポンシブ性
