はじめに 本記事では、Vite + React なアプリでプッシュ通知できるようにします。なお、プッシュ通知部分は OneSignal （Free プランであれば、クレジットカードの登録不要）を使用しています。 完成イメージ 最終的には下記のようにプッシュ通知を送れるようになります。ロック画面に表示されているプッシュ通知からアプリを開いています。 検証した環境 iOS 17.0.3 Vite 4.4.11 React 18.2.0 vite-plugin-pwa 0.16.5 前提 OneSignal を使ってプッシュ通知を組み込むためにサイトの URL が必要になります。 本記事では、ホスティング環境の構築部分は省略しているので、お好みの環境にデプロイしてください。（Vercel などにデプロイするのが楽だと思います） OneSignal のセットアップ 冒頭にも書きましたが、プッシュ通

はじめに 先日、Bun 1.0 がリリースされました🎉 これまで Bun の動向を追えていなかったのですが、ドキュメントを眺めていたところ、Bun + Vite でビルドする方法が記載されていたので試してみました。 また、Yarn + Vite で作成したプロジェクトとの比較もします。

はじめに 先日、Playwright v1.31.0 がリリースされました🎉 追加された新機能の中で特に気になったのは toBeInViewport アサーションです。これを使うことで指定した要素がビューポート内に含まれているかを検証できるようになります。便利そうだなと思いつつ、具体的なユースケースが思いつかなかったので関連する PR などを眺めていたところ、下記の Issue のコメントに様々なユースケースが列挙されていました。 中でも「ページ内リンクを押した時に正しくスクロールされていることを検証」はテストしたいケースがありそう！となったので、本記事では toBeInViewport アサーションを使ってページ内リンクを押した時に正しくスクロールされていることを検証するテストコード を追加してみます。 サンプルアプリを作りテストできる状態にする もし、手元で確認するより先に toBe

はじめに CloudFront + S3 でホスティングしている Web ページで、S3にデプロイした時に CloudFront のキャッシュが効いて変更が反映されない事象がありました。CloudFront のキャッシュは画面上からでも削除できますが、毎回手動で対応する方法だと削除するのを忘れそうな気がするので、デプロイのフローの中でキャッシュの削除までできるようにします。 修正前の GitHub Actions のワークフロー やっていることはかなりシンプルで、ビルドとS3へのデプロイをしているだけです。 name: Deploy on: push env: AWS_ROLE_ARN: arn:aws:iam::${{secrets.AWS_ACCOUNT_ID}}:role/XXX permissions: id-token: write contents: read jobs: bu