読者です 読者をやめる 読者になる 読者になる

カメ飼ってる新米エンジニアの覚書き

とにかくカメがかわいい

Nuxt(Vue)でservice workersを動かしたい

VueでちゃんとSSRしようと思ってNuxtに手を出すついでにPWAもやってみたいと思って、欲張ってやってみました。

すんごいハマったけど、なんとか

f:id:pocchi13:20170508232547p:plain

までできたのでそこまでの方法を残しておく。 (まだservice-worker.jsのエラーいっぱい出てるしこの方法でいいのかわかんないけど動いたのでとりあえず)

static/service-worker.jsを作成

とりあえずstatic/service-worker.jsを作成しておく。

github.com

とかほんとは使えるといいみたいだけど、ひとまずサンプルをコピペして作成。

サンプルコピペ元とか参考とか引用とか

www.webprofessional.jp

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にするとブラウザのみで動かせるって書いてありました。

プラグイン - Nuxt.js

ここまでやったら一番初めの画像まで動きます。
残りはまた後日。


mountedとかクライアントサイドのみで動作するものならstore/index.jsへの記述でいけるのかも・・

ja.nuxtjs.org