「PWA Beginners 勉強会 #3」に参加してきました

勉強会メモ

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

  • ShoheiKoyama

PWAの特徴

  • 審査通す必要ない！

実際に作る時に考えないといけない視点

  • ユーザにどうやってPWA化してもらうか(->ホーム画面に追加してもらうかということ?)
    • ホーム画面への追加の手順を載せる
      • イケてない
    • 何も言わななくてもいいものなら追加してもらえるんじゃないか？
  • ホーム画面に追加した後のアップデートどうするか
  • Web -> PWAとNative -> PWA
    • WebとNativeでUXが違う
  • 結局何を目的にするか、普遍的な価値は何か
    • Nativeでいいんじゃね？とか普通のWebページでいいんじゃねってなってしまわないように

PWAを簡単に使える方法！！

  • daisu_yamazaki
  • ジーズアカデミー主席講師

PWA

  • WebAppManifest
  • ServiceWorker

PWA化

  • 最初っからPWA化することを意識しないと苦労する
    • 既存サイトでも簡単にPWA化できますってよくきくけどそんなことない？？

WebAppManifest

  • ChromeのDevツール->Applicationで内容確認できる
    • ここに出てこなかったらちゃんと読み込めてないということ

ServiceWorker

  • ServiceWorkerはブラウザとは別のメモリで動く
  • キャッシュするファイルは読み込み失敗するとそこで落ちる
    • 絶対キャッシュしたいものとおちるかもしれないものを分けておくといいかもしれない
  • https://github.com/craigbuckler/pwa-retrofit

HNPWAの紹介

HNPWA

  • https://hnpwa.com/
  • HackerNewsリーダーをPWAで作ったもの
  • Reactとかいろんな実装がある
  • TodoMVCの後継者

HNPWAの仕様

  • リーダーとして使い物になるように条件がある
    • 各ページにURLがふられてるとか
    • lighthouseで一定以上のスコア出すとか
    • AppShellを使うこと
    • レスポンシブであること
  • オプション条件
    • オフライン
    • SSR

注意事項

  • FWの性能比較に使ってはいけない
  • 仕様がルーズ
  • サーバは実装者自前
  • 自分の使ってるFWでどうPWAを作れるかの参考にすると良い

ServiceWorker on Rails

  • ykyk1218

ServiceWorker + Rails

Webpackとrails

  • rails5からJSはWebpackで管理するようになった

DOM操作とServiceworker

  • postMessageでServiceworkerにメッセージを送れる

PWAで嫁に怒られなくなった話

ゴミの種類を教えるアプリ

  • firebase
    • lambdaでもよかったけどhttpフックできなかった
  • vue
  • cron.org
  • ServiceWorkerからLocalStorageを参照できない
    • indexedDB使った