詳しい説明は省くので、もっと知りたいという方はググってみてください。
ちなみに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派の人は各自調べてみてください。