そもそもウェブサイトが表示されているということは、ほとんどの状態でオンラインであると信じたいところですが、ElectronでJavaScriptを使った時など、JavaScriptからネットワークの状態を確認したいときがあります。そんなときは、 Navigator.onLine を使…

いちかばちか、onDoubleClickでコールバックを設定してみたら動きました。 びっくりして、筆を取っています。よくみたら、 ドキュメント にも記載がありましたが、全然知りませんでした。ja.legacy.reactjs.org ソースコード（抜粋） <div onDoubleClick={ () => console.log('DoubleCl</div>…

前回は、Navigator.setAppBadgeを使ってアイコンにバッジをつけました 。blog.kimizuka.org今回はトークンをデータベースに登録して、サーバからプッシュ通知を送信してみます。 Safariでプッシュ通知を受け取る条件 ❶ httpsでWebサイトをつくる ❷ ❶のウェブ…

かつて、Safariでアクセスした際と、PWAとしてホーム画面に追加した後に開いた際でページの見た目を変更するウェブサイトをつくったことがあるのですが、今回はそれをNext.jsに移植してみようと思います。youtu.begithub.com DEMO web-app-store-kit.vercel.…

developer.mozilla.orgOSのダークモードですが、メディアクエリで簡単に判定できます。 @media (prefers-color-scheme: dark) { /* ダークモードのスタイルを書く */ } DEMO 最近つくっている、PWAをホーム画面に登録することを促すポップアップです。 ライ…

かつて、Next.js 12でミドルウェアを使ったBasic認証の設定方法を 記事 にまとめましたが、Next.js 13になって、ミドルウェアの設定方法に微妙な変更があったため調査しました。blog.kimizuka.orgnextjs.org 変更点 middleware.tsの位置変更 前回の方法 をそ…