VagrantでWebプッシュをやってみた話

先日リリースしたSeekUpsというWebアプリですが、Webプッシュというのを実装しています。Webプッシュって何?って方もいるかもしれないので説明しておくと、スマホアプリのプッシュ通知ってありますよね?ぴこんって出てくるやつ。あれのWebブラウザ版です。こっちはPCでもスマホでも受け取ることができます。
詳しい説明は省くので、もっと知りたいという方はググってみてください。
ちなみにSeekUpsのWebプッシュはこんなやつ。


こういうのがPCにぴょこんって出てきて、クリックやタップをするとSeekUpsに繋がる、って感じです。
なんで実装したかというと、単純にやってみたかったというのが半分と、できるだけ継続してSeekUpsに遊びに来て頂きたいというのがあったからです。

で、このWebプッシュですが、localhostかhttpsじゃないと動きません
なので、最初Webプッシュの勉強は使ってないサーバーに、適当に取ったドメインを使ってhttps化して実験してたんですが、普段開発環境に使ってるVagrantで動かせないかなと思って調べてみました。

そういえば、周りがDockerDocker言ってDocker当たり前だよね的な雰囲気も感じますが、Vagrantで動かした話なんかして需要あるんだろうか。そもそもVagrantも最新バージョンじゃないな。そろそろDockerに移行した方が良いのか…?

閑話休題。
Vagrantの入門系記事を探したり、ドットインストールを見たりするとVagrantfileをいじって192.168.33.xxとかでアクセスしたりしてますよね。で、今までずっとそうしてきたんですがこれだとlocalhostでもhttpsでもない。ので、Webプッシュのテストができませんでした。
仕方ないのでオレオレ証明書とか作ったりもしてみたんですが、今度はWebプッシュのために必要なServiceWorkerというのが、
DOMException: Failed to register a ServiceWorker: An SSL certificate error occurred when fetching the script.
とかいうエラーを吐いて動いてくれません。
なので正直諦めかけてたんですが、ふとVagrantfileを見てたら気になる記述が。
  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from a port on the host machine. In the example below,
  # accessing "localhost:8080" will access port 80 on the guest machine.
  # config.vm.network "forwarded_port", guest: 80, host: 8080
ポートフォワーディングとな!?
と思って、上の最後の行のコメントを生成行化して、vagrant reload。
で、http://localhost:8080でアクセス。
無事localhostでアクセスできて、Webプッシュのテストができました。

Dockerでも同じようなことができる気がするのでDocker派の人は各自調べてみてください。