HTMLサイトをPWA対応して、アプリのように使えるようにする方法【初心者向け】

2025-04-15

Webサイトをアプリのように使う時代がやってきた

「自分のWebサイトをスマホにアプリみたいに追加したい」「オフラインでも動くようにしたい」そんな願いを叶えてくれるのが、今注目の技術 PWA（Progressive Web App） です。特別なアプリ開発の知識がなくても、HTMLで作ったサイトに少しコードを加えるだけで、 iOS・Android両対応の“インストール可能なアプリ”に変身します。

PWAとは？今どきのスマホアプリの新しいカタチ

PWAは「Progressive Web App」の略で、ブラウザで動くWebサイトをスマホアプリのように扱える技術です。ユーザーはサイトをホーム画面に追加でき、オフラインでもある程度利用できるなど、多くのメリットがあります。 GoogleやMicrosoft、Appleも推奨しており、UXの改善やリピート率の向上が期待できます。

HTMLサイトをPWA対応させる基本ステップ

以下の3ステップであなたのHTMLサイトをアプリ化できます：

manifest.json を作成してWebアプリの情報を定義する
Service Worker を導入してオフライン対応させる
HTTPS環境で公開する

1. manifest.json を用意する

Webアプリの基本情報（名前、アイコン、開始URLなど）を定義するのが manifest.json です。これをプロジェクトのルートに設置し、HTMLにリンクします。

{
    "name": "My Web App",
    "short_name": "WebApp",
    "start_url": "/",
    "display": "standalone",
    "theme_color": "#317EFB",
    "background_color": "#ffffff",
    "icons": [
        {
        "src": "/icons/icon-192.png",
        "sizes": "192x192",
        "type": "image/png"
        },
        {
        "src": "/icons/icon-512.png",
        "sizes": "512x512",
        "type": "image/png"
        }
    ]
    }

HTMLの <head> 内に以下を追加：

<link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#317EFB">

2. Service Worker を設置してキャッシュ対応

PWAの中核となるのが service-worker.js です。サイトのキャッシュ管理をして、ネットがない環境でもページを開けるようにします。

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('my-cache-v1').then(cache => {
        return cache.addAll([
            '/',
            '/index.html',
            '/style.css',
            '/images/logo.png'
        ]);
        })
    );
    });

    self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => response || fetch(event.request))
    );
    });

これをHTMLの最下部で登録します：

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js');
    }

3. HTTPSで公開する（PWAの必須条件）

PWAを有効にするには、セキュリティのため HTTPS での公開が必要です。 http:// のままではService Workerもmanifestも動きません。 Netlify、Vercel、Firebase Hostingなどの無料HTTPS対応サービスを使えば、すぐに公開可能です。

iOSとAndroid両対応のポイント

AndroidではPWAに対応したブラウザ（例：Chrome）が「インストール」ボタンを自動表示します。一方iOSではSafariで「ホーム画面に追加」する必要があります。以下のような設定を入れておけば、iOSでも問題なくPWAが動作します：

<link rel="apple-touch-icon"> でアイコンを設定
display: standalone を manifest に記述
<meta name="theme-color"> を入れる

まとめ：HTMLサイトを手軽にアプリ化するベストな方法

今やWebサイトもアプリのような体験を求められる時代。PWA対応をすることで、 HTMLで作ったサイトもアプリ化し、ユーザーの利便性を大きく向上させられます。インストール不要、軽量、更新も楽とメリットだらけ。これを機に、あなたのWebサイトにもPWAを取り入れてみてはいかがでしょうか？

.htaccessは階層で引き継がれる？Apacheの挙動を徹底解説

MBTI診断

SEO対策に必須！検索上位を狙うsitemap.xmlの完全ガイド

Google Search Consoleの「代替ページ（適切なcanonicalタグあり）」とは？原因と解決法を徹底解説！