「Web Working Group 「PWAに備える３ヶ月」 vol.2」に参加してきました

• 2018/4/23
• https://japan-android-group.connpass.com/event/85039/

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アクセス系とか
• 入れ子のPromiseの型の扱い
  • asDynamic

ツールを利用した対応と企業サイドの懸念点

• 大賀匠竜 様
• 株式会社ドーモ
• https://drive.google.com/file/d/1eSRWJpDwyNCfQrXxAQsoYrotUs48NsH3/view

Mobify

• PCサイトをモバイル向けにするツール

課題

• モバイルからのコンバージョン率
• 顧客ロイヤルティ
• サービス力で差をつける

事例

• LANCOME
  • リッチなコンテンツ
  • ページ増加
  • スピード課題
• アプリは?
  • 毎日使うようなものでもない
  • PWAで
• 恩恵
  • アプリライク
  • プッシュ通知
    • 買い物かごに入れたまま落ちた人に通知
• AMP + PWA
  • 入り口はAMP
  • そのあとはreact

導入企業の声

• ネイティブライクに
  • アプリと全く同じになると勘違い
  • 見た目がwebと同じじゃんとなる
• ios対応していないことはネガティブ要因
  • iosプッシュ通知使えないし・・
• 新規事業と相性良い
• ホームアイコンのみでも

メリット

• ネイティブアプリより工数少ない
  • SSRタイプの画面ベースのページをSPAへ

お手軽PWA開発環境と近い将来の課題

• 柴田文彦 様
• https://drive.google.com/file/d/1C0m0pXnAWLMpn6zt3lhYc4OZ_ybGLQWo/view

お手軽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/
• プラットフォーム固有のフレームワークへのアクセスは？
• 各種デバイスでのテストは？

一般的な課題

• マルウェア対策
• サニティチェック
• メモリ/ストレージ使用量の把握/警告
• ユニバーサル性/レスポンシブ性

フリートーク

• iosだとスタンドアロンだと戻るがない
• UI周り大変なんじゃないか
• モバイルのスタンドアロンの場合と普通のWebアプリとして使う場合両方対応しないと
• デザイナーが知ってないとはまりそう