がみぶろ

#がみぶろ

@jumpei_ikegami

『PWA Beginners 勉強会 #3』の5つのLTでPWA入門

PWAに興味津々なので、『PWA Beginners 勉強会 #3』というイベントに参加しました！

PWAについての勉強会は少ない印象なので、そういった意味では貴重かなと思いました！

https://pwa-for-beginners.connpass.com/event/83181/

当日の様子は以下からご確認ください！

twitter.com

LT1: 「WebでアプリなPWA、実際に本気でプロダクトを作ってみて見つけた悩み処」 ShoheiKoyama

使用技術

WebのUX？AppのUX？

  • ユーザーにどうやってPWA化してもらうか？
    • How toを載せてしまう？
      • PWA的な説明をいきなりするのは辛い！
    • 説明しなくてもいい？
  • PWA化したあと、どうやってアップデートを促す？
    • キャッシュの更新
  • パターン
    • NativeApp -> PWA
    • Web -> PWA
    • いきなりPWA
    • NativeApp+Web -> +PWA

ユーザーに何を届けたいか？

  • 普遍的な価値はなにか？
  • ユーザーは、AppでもWebでも本質的にはどっちでもいい
    • 結局は、どんな価値が得られるか、どんな体験ができるか
    • Apple v.s. Googleの戦いでもある？

LT2: 「プログラミング愛してま〜す！『PWAを簡単に使える方法！！』」 daisu_yamazaki

自己紹介

  • "遅咲きエンジニア 山崎"

今日話すこと

  • WebAppManifest
  • ServiceWorker

動作環境チェック！

  • Can I Useで"Service Workers"を検索！

"Lean Canvas."

Chrome開発者ツールでPWAをデバッグする

  • Applicationタブ
    • Manifest
    • Sercice Worker
    • Clerar storage

WebAppManifest

  • HTML側でmanifestファイルを読み込む
<link rel="manifest" href="/manifest.json">
  • できること
    • アイコン表示
    • 制御起動(OFFLINE)
    • 「ホーム画面に追加」
  • よくあるトラブル
    • Applicationタブにmanifest.jsonが表示されない！
      • 読み込みエラー？
    • AddToHomescreenが出ない！
      • start_urlが設定されていない？
  • その他のプロパティ
    • display
      • standalone
        • ステータスバーは表示
      • fullscreen
        • バーを全て消す
    • orientation
      • 縦か横か
    • theme_color
      • スプラッシュ画面の背景

serviceWorker

  • serviceWorkerを登録
window.addEventListener('load', function() {
  if('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
  }
});
  • workerScriptとして別世界で実行される
    • DOM操作はできない
  • sw.jsの内容
    • キャッシュしたいファイルの指定
      • 絶対にキャッシュしたいものと、できればしたいものを、分けるといいかも
    • キャッシュを使用する場合とそうじゃない場合の処理
      • fetchイベントにハンドラを登録する
  • sw.jsの内容は、Google.comも他のサイトもほとんど変わらない
  • 以下のリポジトリが、サンプルとしておすすめ

github.com

LT3: 「HNPWAの紹介」 tipo159さん

アジェンダ

  • HNPWAとは？
  • HNPWAの仕様
  • ネットワーク設定
  • 注意事項

HNPWAとは？

  • PWAで作ったHacker Newsリーダーの実装例を集積するサイト

hnpwa.com

  • todoMVCの精神的な後継者

HNPWAの仕様

  • 主な仕様
    • 各ビューを実装
    • 各ビューは、シェア用のルーティングを使用している
    • ページあたり30アイテム
    • LighthouseでPWAスコアが90/100
    • API

注意事項

  • フレームワークの性能比較には使えない
    • 仕様が緩い
    • サーバー性能に依存する
    • 実装時期が異なる

LT4: 「ServiceWorker on Rails」 ykyk1218さん

話すこと

自己紹介

  • basic社でferretを運営
  • PWAを実践に投入していくフェーズ

SW用のJSファイルをどこに置くか？

  • assets/javascriptに置きたい
  • service-worker-railsを使うと、パスを変換してくれる

(ここでChromeがフリーズしたので記録が途絶えている...すいません...)

  • 以下のサイトに実際にSWを登録してみた

This is Template

LT5: 「PWAで嫁に怒られなくなった話」 Morixさん

自己紹介

  • morix1500
  • インフラ勉強会
    • オンライン勉強会
    • Discord上で実施
    • 毎日開催

アジェンダ

  • PWAを使ってサービス作ってみた
  • PWA

ゴミ出し通知くん

  • 各曜日のゴミを選択すると、一覧が観れる
  • 毎朝7時に出すゴミを教えてくれる
    • ゴミ出しを忘れて怒られていた

技術

  • Vue.js
  • SW
    • オフライン対応
    • Push通知
  • Firebase CloudFunction
    • HTTPフックができるのが便利
    • cron-job.orgでFunctionを実行
  • Firebase Hosting
  • Firebase RealtimeDB

知見

感想

  • ネイティブアプリみたいなUIになって感動
  • 爆速になるのでストレスレス