PWAでサイトをアプリ化する

WEBサイトをアプリ化

作成日:2022-04-01, 更新日:2023-09-26

基本

  • PWA(Progressive web apps / プログレッシブウェブアプリ)
  • httpsが必須

目的

  • ストアとかで配布したいわけじゃない
  • スマホアプリを作りたいわけじゃない
  • それっぽいものが出来ればOK

流れ

サイトをアプリ化するPWAとは?作り方と動作イメージを併せて紹介」より

  1. マニフェストファイル、アイコン画像を作成
  2. ServiceWorkerの作成
  3. マニフェストファイル、ServiceWorkerの読込み
  4. 確認

マニフェストファイル、アイコン画像を作成

マニフェストファイル

  • 「display」は「standalone」にしておけば良さげ
    「アプリの表示方法」で「fullscreen (全画面)」「standalone」「minimal-ui」「browser (ブラウザー) 」のいずれかを設定
  • 「theme_color」はウィンドウの色っぽい
  • 「icons」はファイルの置き場所をroot直下にしないなら変更したほうが良さげ・・・ドコで使われるのかが分からないので何とも言えず
  • 「start_url」はアプリ起動時に開く最初のページ
  • 「scope」は・・・分からん

ServiceWorkerの作成

▼「sw.js」。これだけで良いっぽい

self.addEventListener('fetch', function(e) {
})

→fetchイベントの登録が必要っぽい。
※ファイル名は何でも良さげ。「service-worker.js」とかでもOK

マニフェストファイル、ServiceWorkerの読込み

▼HTMLファイルのheadの中に記載

<link rel="manifest" href="manifest.webmanifest" />
<link rel="apple-touch-icon" sizes="180x180" href="icon-192x192.png">
<script>
    window.addEventListener('load', function () {
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register("/sw.js")
                .then(function (registration) {
                    console.log("serviceWorker registed.");
                }).catch(function (error) {
                    console.warn("serviceWorker error.", error);
                });
        }
    });
</script>

「manifest.webmanifest」「icon-192x192.png」「sw.js」のPATHはroot直下じゃないなら変更必要

確認

developerツールなどを開いて「タグ: Application」を開く
→「Application: Manifest」「Application: Service Wokers」を確認
※インストールが出来れば問題なし。出来ないときに確認でOKっぽい

インストールすると通常のアプリのようにインストールされる
→アンインストールも通常のアプリと同じようにする

エラー

▼こんな感じで・・・動かないコトがある

No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.

私の場合は「jsファイル(私の場合だと「sw.js」)をroot直下に置く」で解決
・・・静的サイトだと任意のPATHで動いて、動的サイトだとroot直下じゃないといけない・・・ってコト? よく分からん。

メモ

「アプリ化」ってのは「スマホアプリ」と思ってたら、スマホだけじゃなくて、Windowsにもインストールできるアプリってコトらしい。

参考サイト

PWA をインストール可能にするには
サイトをアプリ化するPWAとは?作り方と動作イメージを併せて紹介