Nuxt(Vue)でservice workersを動かしたい
VueでちゃんとSSRしようと思ってNuxtに手を出すついでにPWAもやってみたいと思って、欲張ってやってみました。
すんごいハマったけど、なんとか
までできたのでそこまでの方法を残しておく。 (まだservice-worker.jsのエラーいっぱい出てるしこの方法でいいのかわかんないけど動いたのでとりあえず)
static/service-worker.jsを作成
とりあえずstatic/
にservice-worker.js
を作成しておく。
とかほんとは使えるといいみたいだけど、ひとまずサンプルをコピペして作成。
サンプルコピペ元とか参考とか引用とか
plugins/registerSW.jsを適当に作成
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') }
static以下にservice-worker.jsを置いておけば、'/service-worker.js'でアクセスできます。
nuxt.config.js の plugins キーにファイルを記述
plugins: [ { src: '~plugins/registerSW.js', ssl: false } ]
sslをfalseにするとブラウザのみで動かせるって書いてありました。
ここまでやったら一番初めの画像まで動きます。
残りはまた後日。
mounted
とかクライアントサイドのみで動作するものならstore/index.js
への記述でいけるのかも・・