以前、本サイトを PWA (Progressive Web Apps) した件で、Lighthouse を使ってスコアをチェックしてみたことがありました。
ちなみに、PWA ってなんだっけ？って人はこちらをチェック！
Lighthouse は PWA 専用のツールではありませんが、PWABuilder という Microsoft 社が公開しているツールがあります。今回は、こちらを試してみたので、どんな感じだったか書きます。
PWABuilder は、オープンソースにて公開されているため、ソースコードを GitHub にて見ることも出来ます。どうやら、Vue.js / Nuxt.js で作られているようでした。
ちなみに、結果は、Service Worker 関連は手を入れていないので得点がカウントされていない点は置いておけば、ほぼクリアな感じです。
対応していないのは、PushManager 関連です。まあ、やっていないので、仕方ないですね。今後の課題です。
PWABuilder のいいところは、PWA で役立ちそうなスニペットも提供しているところです。現在、9つのスニペットが登録されており、今後もっと増えていったらいいなあと思っています。Geolocation や Clipboard といったメジャーな機能に加えて、Microsoft 社製品と連携するタイプのスニペットも登録されており、Microsoft製製品利用者向けの PWA を作る際は必見のサイトとなっています。
- Use Geolocation
- Copy to Clipboard
- Install your PWA
- Create MSFT Graph Authentication
- Create MSFT Graph Contacts API
- Create MSFT Graph Calendar API
- Create MSFT Graph Activity API
- Add Activity to Windows Timeline
- Create Share
「Create MSFT Graph ...」とあるのは、Microsoft Graph に関係したアプリを作りたい場合のスニペットです。Microsoft Graph については、以下のリンクにて学習することができます。大きな会社では、Microsoft 365 を利用しているところも多そうでしょうから、PWA でこれらのデータを操作するアプリとかも面白いかもしれません。
ARTICLES
AUTHOR
原 一浩
カンソクインダストリーズ代表 / グレーティブ合同会社代表
1998年に独立し、同年、ウェブデザイン専門のメールメディア DesignWedgeの発行を開始。Webデザイン業の傍ら、海外のWebデザインに関する情報発信を行う。
雑誌への寄稿多数。主な著書に『はじめてのフロントエンド開発』『プロセスオブウェブデザイン』、『Play framework徹底入門』、『ウェブデザインコーディネートカタログ』など。自社製のWebデザインのクロール＆キャプチャシステムvaqumをベースに、様々なリサーチを行っている。Web 検定プロジェクトメンバー。