職場にあったら便利だなと思い開発を始めた看護師向けの計算ツールアプリ。
今回はオフラインでも動作するPWA対応 を実装しました。
🚀 PWAとは？
PWA（Progressive Web App）は、
Webアプリをスマホにインストールできる技術。
✅ ホーム画面に追加
✅ オフライン動作
✅ ネイティブアプリのような体験
⚙️ 導入手順
npm install next-pwa
next.config.ts
import withPWA from "next-pwa";
import type { NextConfig } from "next";
const nextConfig: NextConfig = {};
export default withPWA({
dest: "public",
register: true,
skipWaiting: true,
})(nextConfig);
- dest: "public" → Service Worker 出力先
- register・skipWaiting → 自動更新を有効化
manifest.json
{
"name": "看護師向け計算ツール",
"short_name": "NurseCalc",
"start_url": "/",
"display": "standalone",
"theme_color": "#f87171"
}
→ スマホのホームに追加できるようになります。
layout.tsx
<head>
<link rel="manifest" href="/manifest.json" />
<link rel="icon" href="/icons/icon-192.png" />
<meta name="theme-color" content="#f87171" />
</head>
🩹 アイコン
- 192×192：manifest用
- 512×512：PWAインストール用
- 背景透過・角丸正方形で統一
🧠 トラブル対応
| エラー | 対策 |
|---|---|
| GenerateSW plugin configuration: 'pwa' property is not expected | 設定のpwa:を削除 |
| minimatch の型エラー | npm i -D @types/minimatch |
| next-pwa に型宣言がない | declare module "next-pwa";を追加 |
💡 学び
- PWA化は「manifest・config・icon」の3ステップでOK
- 通信が不安定な環境ではPWAが圧倒的に有効
📘 詳しい導入背景・設計の考え方はZennで公開中👇
👉 🩺 看護師が医療現場で使う計算ツールの開発に挑戦してみた#４（Zenn）