Above & Beyond

日々のアウトプット記録

PWA Night vol.2 ~PWAのミライや活用方法をみんなで考えよう~

03/30(水) は「PWA Night vol.2 ~PWAのミライや活用方法をみんなで考えよう~」に参加してきました。

pwanight.connpass.com

f:id:kabukawa:20190317143732p:plain

会場は TAM COWORKING TOKYO さん。

f:id:kabukawa:20190321233629j:plain

前回も感じましたが、もくもくしたり何かの作業がしやすそうなスペースです。 道路側がガラス張りなので外から見ても「なにかやっているな」というのが見えるので注目度は結構高いかもしれません。


目次


PWA Night について

前回の参加報告を書いていますのでそちらを参照してください。

kabukawa.hatenablog.jp


タイムスケジュール

時間 内容
19:00 開場
19:20 挨拶&PWA Nightについて
19:30 自己紹介(全員)
19:40 PWA to APK 〜ネイティブアプリとの融合(仮) by 進藤龍之介さん
20:00 日経電子版とPWAのこれから(仮) by 日本経済新聞 宮本さん
20:20 休憩
20:25 Googleトレンドから振り返るPWA by PWA Beginners tomoko さん
20:45 LT-1: IndexedDBのラッパー「localforage」を使ってみる by 長内さん@シックスアパート
20:50 LT-2:PWAロゴの誕生ストーリー by 安成優華さん@TAM
20:55 LT-3:(絶賛募集中)
21:05 懇親会
21:55 片付け
22:00 終了

内容

当日のTweetは纏められています。素早い!

togetter.com


PWA to APK 〜ネイティブアプリとの融合

進藤龍之介さん

www.slideshare.net

1/31に公開された以下のエントリにかかれている内容を噛み砕いてわかり易く解説していただきました。

medium.com

資料がとてもわかり易く書かれているので見ていただければと思いますが、今北産業で書くと

  • TWAをChromeが実装したのでPWAをアプリとして Google Play Storeから配信できるようになった
  • PWAの手軽さをそのままという訳にはいかない。制限事項や考慮点は有る。
  • まだ出たばかりの機能なので十分なドキュメントなども整備されていないし、ツール周りもこれから

という感じでしょうか。 実際にPWAをTWAにして動かすデモも見せていただき、なかなか面白い事になってきたなと感じました。

尚、セッションではあまり触れられていませんでしたが、元文書を読んでみた感じでは以下の部分が個人的には興味深かったです。


Playストアの承認要件

  • 信頼済みWebアクティビティに使用するURLは、次の要件を満たしている必要がある
    • PWA基準に合格
    • Lighthouseでテスト済み
    • 現在のGoogle Playストアのすべてのルール。

開発オプション

  • 以下のいずれかでTWAアプリを開発することができる      * Chromeチームが提供する高レベルのJavaサポートライブラリを使用する      *信頼できるWebアクティビティを手動で使用する。

制限事項

  • サブフォルダー内のPWA
  • 社内アプリはありません
  • ファーストロード体験
  • ネイティブコードを呼び出す
  • Playストアでの収益化
  • デバッグ
  • その他のエンジン
  • その他のプラットフォーム
  • WebAPKと競合している
  • 信頼できるWebアクティビティを検出する(* UPDATE 2/7)

参考情報

developers.google.com

developers.google.com

pwa2apk.com


日経電子版とPWAのこれから

日本経済新聞 宮本さん

speakerdeck.com

日経電子版の PWA 版についての内容。ブログエントリで書かれている仕組みについて解説をしていただきました。

hack.nikkei.com

尚、今年の6月くらいにリニューアルが予定されているとのことで、現在改善に向けた作業中らしいです。 こちらも資料に分かりやすく書かれているので参照していただきたいのですが、資料内のリンクがクリックできないので、それだけいくつか貼っておきます。

日経電子版

r.nikkei.com

Nikkei achieves a new level of quality and performance with their multi-page PWA

developers.google.com

2018.ar.al

web.dev

github.com

github.com

github.com

developers.google.com

medium.com


技術的な話は、今年のデブサミで宮本さんが登壇された時の資料があるので、そちらも貼っておきます。

speakerdeck.com


Googleトレンドから振り返るPWA

PWA Beginners tomoko さん

[資料が公開されたら追記します]

Googleトレンドでここ2年位のPWAの動きを振り返るという内容。

f:id:kabukawa:20190322012851p:plain

2017/9~2017末 - くるぞ...! -

2018/2~2018夏 - 期待が高まる -

  • iOS 11.3/Safari 11.1でServiceWorkerをサポート
  • Chrome OS 67でデスクトップPWA対応(一部)
  • Microsoft StoreにPWAアプリが掲載されるように

2019/2~ - 再注目のきざし -

自分がPWAがどんなものかを知ったのは 2018年4月にGoogleが開催した AMP Roadshow Tokyo の時からなので、ちょうど注目が高まったタイミングだったという偶然。

www.ampproject.org

この時に、コードラボ(Googleの提供するハンズオン)でPWAアプリを作るというのをやったのを思い出しました。 ぐぐったら出てきましたね。これです。

codelabs.developers.google.com

あれから約一年、自分の中では色々なことがありましたが、ここで基本的な仕組み等を知ったからこそ勉強会にも参加しているわけで、色々なものが繋がっているんだなと実感しました。去年の年末あたりはあまり新しい情報がなかったのでトレンドとしては静かだったのですが、TWAでまた注目を集めるようになっていますし、そのタイミングでこの勉強会が立ち上がっているのも面白いなと思いました。

PWA for Begginersというコミュニティは、お話を聞くまで知らなかったので、こちらにも注目をしていきたいと思います。(メンバーになりました)

pwa-for-beginners.connpass.com


LT-1: IndexedDBのラッパー「localforage」を使ってみる

長内さん@シックスアパート

speakerdeck.com


github.com

developers.google.com


LT-2:PWAロゴの誕生ストーリー

安成優華さん@TAM

[資料が公開されたら追記します]

PWA nightのログがどういう流れでどうやって誕生したのか。そしてそこに込められた意味とは、という内容。

ロゴに込められた意味。

f:id:kabukawa:20190322015120j:plain

名前を募集しているとのこと。


LT-3:家庭で使えるPWA

知念さん@TAM

speakerdeck.com

コスパを計算するアプリをPWAで作ったという内容。

xxグラムでoo円とyyグラムで**円だったら、どちらの商品が得か?という計算をするアプリ。 実装はJavascriptで行われているシンプルなもの。早速インストールしました。

chi-memo-app.firebaseapp.com


懇親会

今回は朝から別の勉強会に参加(つまりダブルヘッダー)していて疲れたのと、翌日のことを考えて早めに帰りたかったので懇親会には参加せずに帰りました。 とはいえ、ピザの匂いに負けそうになったのは内緒。。。(笑)


まとめ

今回はPWAに関するホットな話題であるTWAについてのお話を聞くことができ、とても勉強になりました。 また、日経電子版のPWA版の裏側の話についても興味深かったです。日経電子版は元々CDN(Fastly)側による高速化という観点で追ってきていたので、PWA版というのはノーマークでだったのですが、話を聞いていて知らない話が多かったので聞けてよかったです。 PWAのトレンドも、そういう視点で見てみると面白いなぁという事がわかって新鮮でした。 LTも良かったです。

今回も参加できてよかったです。色々勉強になりました。ありがとうございました!