Chrome 73 で Desktop PWA Support & mdbuf アップデート

developers.google.com

Signed HTTP Exchange もですが、個人的に待望だった Desktop PWA が正式リリース。 PWAアプリをウェブアプリのように振る舞わせることができます。

例えば mdbuf を開いて、「mdbuf をインストール」を選択すると…

https://i.gyazo.com/5f64a2c6f9d74b9c2851b4c96baa2a92.png

モーダルが出て

https://i.gyazo.com/e054fe8300c1d3fad1f37fc22f908bec.png

Win/Mac のアプリのように立ち上がります

https://i.gyazo.com/9f617215f1969f750482fd2009e4d3b8.png

mdbuf について

https://mdbuf.netlify.com

サンプルで紹介しましたが、これは僕が作ってる markdown のプレビューツール です。

amachang さんや結城浩先生へのインタビュー、その他このブログの記事、各種書籍への原稿も全部これで書いています。

mdbuf v1.0.0: 最高の Mardkown Preview を目指して - mizchi's blog

この時点からさらに自分で使い込みながら機能を足したので、Desktop PWA ついでに紹介。

アウトライン機能

ヘッダの位置にジャンプします。

prettier の整形

Cmd+S (Ctrl+S)で prettier で markdown を整形します。

バックグラウンドのコンパイル

WebWorker でコンパイルしているので、入力中のラグ(layout junk) が非常に発生しづらいです。普通に実装する markdown コンパイルはCPUを専有しがちなので、効果が大きいです。

編集中の領域に自動フォーカス

編集に対応するプレビュー側をハイライトします。

保存機能(IndexedDB)

保存します。

textarea => monaco editor => codemirror の切り替え

monaco エディタを使えば編集側でコードハイライトできます。