スプラトゥーン2のガチマ情報を常に見たかった

7152 ワード
JavaScript webpack PWA Splatoon Push通知 JavaScript テキストリンク

表題を悩んだ結果、PWAでホーム画面にアイコン追加でいっか。

※mithrilを使う必要性がなくなったのでmithrilは別途…

できたもの

https://pwa.manic-design-lab.dev/

やりたかったこと

・push7というASPを利用させていただき、push通知が飛ばせるように
・ホーム画面へ追加
・手動でmanifest.json、service-workerを書かないでwebpackのpluginだけで完結させる

できなかったこと

・キャッシュコントールが雑多で終わった
・ゆえのオフライン時のアップデート挙動の確立
・細かい設計
ガチマ潜りすぎてでき(ry

力添えいただいた

・splatoon2ステージ情報APIを作ってくださっている方

リポジトリはこちら

https://github.com/Gits-migii/pwa_spla

以下ServiceWorker + manifest.json周りの説明

new GenerateSW({
  swDest: 'sw.js',
  clientsClaim: true,
  skipWaiting: true,
  importScripts:['push7-worker.js'],
  runtimeCaching: [{
    urlPattern: '/images/stage/',
    handler: 'NetworkFirst',
    options: {
      networkTimeoutSeconds: 10,
      cacheName: 'my-api-cache',
      expiration: {
        maxEntries: 64,
        maxAgeSeconds: 60,
      },
      backgroundSync: {
        name: 'my-queue-name',
        options: {
          maxRetentionTime: 60 * 60,
        },
      },
      cacheableResponse: {
        statuses: [0, 200],
        headers: {'x-test': 'true'},
      },
      broadcastUpdate: {
        channelName: 'my-update-channel',
      },
      fetchOptions: {
        mode: 'no-cors',
      },
      matchOptions: {
        ignoreSearch: true,
      },
    },
  }, {
    urlPattern:new RegExp('^https://app\.splatoon2\.nintendo\.net/'),
    handler: 'StaleWhileRevalidate',
    options: {
      cacheableResponse: {
        statuses: [0, 200]
      }
    }
  }]
})

ほぼworkbox公式のそのままです。
和訳ほしいので他力本願してるところです。

詰みかけたところ

webpack-dev-serverが参照している仮想HTMLにmanifest.jsonの入れ方がわからなくて詰んだ。
HtmlWebpackPluginのinjectをtrueにして解決

webpack-pwa-manifest

こいつを使って、fingerprintなどで開発時のキャッシュ問題をクリアにしようとしていたところ3つくらい追加でpluginを入れる必要があり、めんどくせえ！！！となってfingerprintsをfalseにしておしまい。
単純にmanifestで必要な部分を列挙しています。

所感

workboxがかんたんに使えるようになったので、だいぶPWA化するのは楽になったのではないでしょうか。
iOS、Android間もpush通知くらいまでは落ちましたし。
アドベントカレンダーというものに初めて参加してみましたが、もっと前から準備するべきでした(戒め)
来年はもっと…やるぞおおおおおおおお

乱文失礼しました。