かざいむ日誌

IT関係で知ったことなどを記事としてあげていきます。内容に不備や質問などあればぜひコメントをよせてください。

PWAの設定をしたときに問題解決したときのメモ

先日、GatsbyJSのプラグインを利用してサイトをPWA化したのだけど、その流れが後から考えるとなかなかイマイチだったのでメモしておく。ちなみにこの作業をする途中で別のトラップを踏んだのでそれも略さず書く。

 

まず、GatsbyJSのGitBook-Starterという、GitbookのスタイルでWebサイトができるものを使っていた。で、そのうち、語学の音声ファイルも入れたいと思い、PWAで全部オフラインでキャッシュ出来たらアプリ要らないなと思った。で、作ってたサイトをPWAにするのはこのStarterの設定をすれば良さそう(PWA=True/Falseという設定項目あり)だったのだが、設定してもうまくいかない。

ブラウザはEdgeを使って開発者ツールを立ち上げたが特にエラーはなさそう。

ふと、気づいたのはサイトがHTTPSになっていないこと。同じ環境で立ち上げた別のサイトはHTTPSになっている。おかしい。そういえば、画像ファイルは外部URLから読んでいてそれがHTTPだった。

これをHTTPSでとるように変更して、Gatsbyのコマンドを動かしたら関連するプラグインをアップデートしてね、と出たのでこれをアップデートしたら、全く動かなくなった。ここから始まる。

で、NPMをYarnに変えてみるとか、Package.jsonを元に戻してみるとか色々とやってみて2,3時間たってもうまくいかず。で、リポジトリからクローンしてローカル作り直してみることに。すると、エラーメッセージが変わった。このエラーメッセージでググったらGitHubにIssueが立ってて同じタイミングで同じエラーになっている人が生まれつつあった。

で、Same Hereと書いて、別作業をしてた。しばらくすると、IssueにコメントがついてGatsbyJSと関連プラグインはこのバージョンの組み合わせにしてとのこと。それにするとあっさりエラーは解消。ただし、PWAはやはりできないまま。

で、元々やろうとしてた画像ファイルのHTTPS化を試した。やはりうまくいかない。しかもPWAだからHTTPSじゃないと確認できないから何度もPushするのだるい、でもうまくいかないというのを何度か繰り返した。で、そもそもPWAがうまくいかない原因を調べる方法ないのかな、と思ってググったところ、PWAの開発のために、localhostであればChromeの開発者ツールで確認できると書いてあった。なんてこった。

そこで、Chromeを立ち上げ、開発者ツールのアプリケーションタブを確認。するとPWA用のアイコンが見れないとのメッセージ。しかも、コンソールにそのメッセージが表示されている。でも、この時、プラグインのデフォルト設定のままで、そのアイコンが表示されるはず、と思ってたのにそもそも読めてなかった。

つまり、クローンしてきたプロジェクトの設定が、足りないところがあった。これを解消するために、アイコンをどう読み込んだらいいか調べたけど、動的に読み込みができない作りになっていた。で、静的ファイルはどうしたらいいのかと思って調べたら、GatsbyJSではstaticフォルダというものを置くのがお作法らしい。これは、スターターの説明ではなく、GatsbyJSのチュートリアルとか見ればもっと早く知れたかも。

 

これらの設定を見直してアイコンを設定しなおしたらPWA化が成功した。

改善点や検討すべき点は以下の通り。

  • 安請け合いはしない
    NPMの依存ライブラリはそれらが参照しているライブラリのバージョンが異なる可能性があるので、あまり知らないときのアップグレードは慎重に。
  • 混ぜるな危険。
    一度に確認するのは一つ。HTTP→HTTPSとバージョンのアップグレードを一緒にしない
  • 正しくフィードバックを得る
    手がかりがないときに自分が参照しているものは正しくフィードバックを返してくれるものか確認する(Edgeではなく、Chromeを使う)
  • 簡単に確認する方法はないか探す
    Chromeの開発者ツールが情報多い
  • そもそもどこに確認すべきかを考える
    スターターの作成者のサイトではなく、大本のGatsbyJSのサイト