PWA Night vol.5 ～PWAのミライや活用方法をみんなで考えよう～に参加しました

概要

PWA Night vol.5に参加したので発表の内容をまとめました。

• compass
  • https://pwanight.connpass.com/event/131521
• togetter
  • https://t.co/ID6uCALfTz
• 配信
  • https://www.youtube.com/watch?v=7hqhteH27h8&feature=youtu.be

WordPressをやめ静的サイトジェネレーターで高速化した話（仮題） by 池田さん@ICS

https://ics.media/entry/190410

サイトの構成

• 記事以外はnuxt.js
• 記事部分だけAMP
• PWA✖A️MP

AMP

• AMPはHTMLのサブセット
• 読み込みを高速化できる
  • GoogleのCDNにキャッシュされる＝AMP Cache
  • 検索エンジンからの遷移が爆速になる
    • ドメイン解決・SSL接続確立された状態になる
  • 検索のトップに出るとプリレンダリングもされる
• 通常のウェブサイトをPWAに対応するのと同じ
  • manifest.json + service worker
  • amp-install-serviceworkerというライブラリを使う
    • service workerはキャッシュにのみ利用している
    • キャッシュはWorkboxを使って実装
• キャッシュ戦略
  • 記事画像
    • キャッシュ優先
  • AMPライブラリ
    • キャッシュ優先（裏側でフェッチ）
  • それ以外（記事HTML）
    • ネットワーク優先

HTMLの変換技術

• マークダウンで管理している記事をnodeをかましてHTMLに変換している
  • node.jsのmarkdown-itモジュールでhtmlタグに変換
  • マークダウンをプレーンなhtmlへ変換
  • マークダウン変換のカスタマイズ
• ampの制約
  • amp-imgタグを利用する必要がある
• 画像の配信の最適化
  • chromeはwebp使用
• サーバ
  • AWS
  • netlify

あのサービスの開発から運用に関して by 小野谷さん@DMM

• (※業務委託なので口外無用とのこと)
• 開発の経緯やwebでネイティブアプリぽいUXにするための工夫が聞けて面白かった

Nuxt.jsのPWAモジュールの話 by 菅家さん@TAM

• 実際にnuxt.jsのPWAモジュールで何をしているのかについての発表

workbox

• sw.jsとworkbox(ライブラリ)を生成する
• 新しいserviceworkerがある場合
• ランタイムキャッシュの設定
• プリキャッシュ
• swインストール時にキャッシュ

• app shellのための静的リソール

  • リビジョンで管理できる

• ランタイムキャッシュフェッチチベントジにキャッシュ

• キャッシュの有効期限や優先順位などのキャッシュ戦略を立てる

• モジュールv3から仕様が変わった

  • バンドルファイルがプリキャッシュに入らなくなった
  • プリキャッシュは自分で設定する
  • 全てのバンドルファイルをプリキャッシュしない意図で変更された
  • むやみにキャッシュサイズが膨らむから
  • 参考
    • https://qiita.com/gyarasu/items/15292db36166c7a7fa23

• manifest

• meta

• icon

  • 地味にめんどくさいこれらを自動でやってくれる
  • 必要であればnuxt.config.jsで上書き可能

• onesignal

  • push通知
  • PWAモジュールのデフォルトではない

• nuxtjs/pwaは簡単すぎてブラックボックスになるがちなのでやっていることを理解してやることでより良いアプリにしていきましょう

Elmが思っていたより良かった話

• スライド
  • https://speakerdeck.com/leafia78/elmgasi-tutayoriliang-katutahua

Elmとは

• 余分な機能を削ぎ落とし、フレームワーク(TEA)を内包した関数型言語

TEAとは

• Elmのフレームワーク
• Reduxの始祖と呼ばれているもの
• Update
  • Cmdを返す
• View
  • ElmはTEAでアプリケーションを構築するための言語
• いいところ
  • 基本的に実行時エラーが出ない
  • 仕様が小さいので学習コストが極めて低い
  • コンパイルが早い
  • エラーメッセージが親切すぎる
  • 型付けに頑張るも頑張らないとかない
• 辛いところ
  • unsafeなものをelmアプリケーションの外側に出すためにボイラープレートが必要
  • 小さいUIパーツに独立した状態を持たせられないので複雑なUIを作ろうとすると辛い
• とにかく堅牢にいきたいときだけelm使っている

Service Worker Life Cycle “Install”

• スライド

  • https://speakerdeck.com/tiwuofficial/service-worker-life-cycle-install-number-pwanight

• install

  • swごとに１度しか呼ばれない
  • 必要なリソースをキャッシュするのに使われる
• activated
  • 一度しか呼ばれない
  • 古いキャッシュを削除するのによく使われる
  • acticated=service workerによる制御開始ではない
  • 初回アクセス時にswの制御が開始されない
  • 2回目のアクセス時にacivatedされたswがあればswによるfetchが行われる
  • client.claim()で1回目でも強制的に捕まえられる

プログラミング歴1年のエンジニアがPWAでweb開発した話

• memeというスニーカーショップのwebアプリ
  • PWAにした理由
    • サイトをブックマークをする人が多かった
    • 記事に対してSEO対策を行うことで記事からの流入も見込める

所感

• 某サービスのPWAで起動がユーザのX分のYもあると知って驚いた
  • 今後もPWAが周知されればもっと増えるはず
• nuxt.js全盛
  • 6つの発表のうち4つがnuxt.jsの話
  • @nuxtjs/pwaが便利すぎる
    • v3から仕様が変わるので注意
• 現状PWA対応はできたからついでにやったというところが多い印象
  • やはりiosがネック
  • ホーム起動対応はコスト低いのでどこもやってる、キャッシュは各々コストかけて頑張ってる