坂本酒店のチラシの裏

坂本酒店のチラシの裏

【備忘録】PWA Beginners 勉強会 #3

開催概要


†名称・日時・会場
  • 名 称:PWA Beginners 勉強会 #3
  • 日 時:2018/04/16(Mon) 19:30 - 21:00
  • 会 場:G's ACADEMY TOKYO
  • Tags :#pwabg
†要旨
  1. 巷で流行のPWAに関する勉強会。まだ勉強会は少ない。
  2. 導入例は非常に充実して来ている。開発障壁は高くない。サービス導入障壁は未だ高いが・・・
  3. 気軽に作れる

概略


PWA Beginners 勉強会とは 最近何かと話題のPWA(Progressive Web Apps)についてキャッチアップしたいけれど、どこから調べればいいかわからない、実際に採用した人の話を聞きたい、ちょっと調べたことを発表して共有したい、という人のための初心者向け勉強会です。

第1回 http://tomoko-tsubasa.hateblo.jp/entry/pwa-for-beginners-1-report
第2回 http://tomoko-tsubasa.hateblo.jp/entry/pwa-for-beginners-2-report
今回はLTを3枠一般募集します٩( 'ω' )و

5分〜10分くらいで、こういうところにつまづいた、とかこれについてちょっと調べてみたとか、実戦的な内容も含めて募集しております!気軽にお申し込みください〜

タイムテーブル 時間 内容 発表者
19:00-19:30 受付
19:30-19:40 挨拶 tomoko_hirata
19:40-19:55 LT1: 「WebでアプリなPWA、実際に本気でプロダクトを作ってみて見つけた悩み処」 ShoheiKoyama
19:55-20:10 LT2: 「プログラミング愛してま〜す!『PWAを簡単に使える方法!!』」 daisu_yamazaki
20:10-20:20 LT3: 「HNPWAの紹介」 tipo159さん
20:20-20:30 LT4: 「ServiceWorker on Rails」 ykyk1218さん
20:30-20:40 LT5: 「PWAで嫁に怒られなくなった話」 Morixさん
20:40-21:20 懇親会
21:20-21:30 撤収

メモ


  1. LT1: 「Web? App? PWA?」 ShoheiKoyama
    →実際に作ってみた所感等を発表。PWAをいくつか作ってみた。「Webの体験を劇的に変えるもの」。審査の必要なし。オフライン。バックグラウンド同期。Push通知。全画面表示。幅の広い決済。ができるよ!旅行ガイドアプリ「COMPASS」を作った。PWAとVue.jsとOnsen UIを使用。「ユーザにどうやってPWA化する?」→ HowToを教えるのは障壁高いな。繰り返し使うのが前提となるPWAでは説明は不要?ユーザにとってはどっちでもいい話で、どんなサービスを提供するかって話

  2. LT2: 「プログラミング愛してま〜す!『PWAを簡単に使える方法!!』」 daisu_yamazaki
    →★WebAppManifestとServiceWorkerについて。[Can I use.com]で検索するとAPI叩けるブラウザが分かる。PWA化するつもりでサービスをたちあげると良い。元々のやつをPWA化するのは難しい。Lean Canvasというサービス。デバッグはdev toolのApplicationでやるよ。manifestはrootにおくよ。それを更新するとdev toolにも反映されるよ。descriptionは意味ないけどW3Cでは推奨されてる。スプラッシュ画面に出るのはname。ホーム画面にはshort nameが出る。standaloneは通常のアプリと同じように表示される。Full Screenはフルで表示される。thema-colorがヘッダの色。background-colorはスプラッシュの背景画像の色になるよ。ServiceWorkerは1ファイルでもこけたら落ちる。EssentialとDesirableに分けて、前者だけOKの場合は通すようにする。railsとかでやる場合には必要ないcatchをする懸念ある。sitepoint-editors/pwa-retrofitを見ると良いよ。このサンプルを読むと勉強になるよ。

  3. LT3: 「HNPWAの紹介」 tipo159さん
    →Hacker Newsとはコンピュータやスタートアップの情報をまとめたサイト。HNPWAとはhacker NewsのPWA実装例が掲載されている。各Viewを作成し、ルーティングしてあること。lighthouseのスコアで90/100以上であること。WebPageTestというサイトでの計測が可能。Application shellの使用。レスポンシブであることも必要。オフラインキャッシングやSSRも要件になる。データソースの仕様もある。フレームワークの性能比較には用いないこと。作成パターンやツールに差分もある。あくまでも実装例の参考として使用するのが良い。

  4. LT4: 「ServiceWorker on Rails」 ykyk1218さん
    →swをRailsで。サーバ側の観点。serviceworker-railsを導入。swはスコープの問題があって、sw以下のところにしかアクセスできない。scopeを指定するけど上のは指定できない。ルーティングをよしなにやってくれる。serviceworker-allowedを付与するとスコープ広げられる。webpackerが・・・swでのDOMの連携はどうやるの?メッセージを送ればできるよ

  5. LT5: 「PWAで嫁に怒られなくなった話」 Morixさん
    →★Discordでの勉強会もやってるよ。ゴミ出し通知くんを作成。Vue.jsとpwをやっている。cron-job.orgとかいうのでcronできるよ。firebase hostingはhttpフックできる。swとフロントでデータを共有したい場合はIndexDBを使わないといけない。

参考文献


以上