PWA

反応器を使ったプロジェクトでは、モバイル機器も気軽にアクセスできるようにPWAを使用しました.

PWA

PWAはProgressive Webアプリケーションの略であり,Webアプリケーションとネイティブアプリケーションの利点を統合しているといえる.また、オフライン状態で動作、インストール、容易な同期、プッシュ通知などの機能を実現することもできます.

LightHouse

いきなりライトハウス?ライトハウスから書くには理由がありますまず知っておきましょう
LightHouseは、Webアプリケーションの品質を向上させるオープンソース自動化ツールで、確認するURLを指定してページをテストし、レポートを生成します.[クロム]で、[開発者ツール]に入り、[LightHouse]タブをクリックします.

この画面でGenerate Reportをクリックするだけでいいです.

では、このような画面を見ることができます.ここでは、最上部の右側にProgressionWebアプリケーションが表示され、アプリケーションのダウンロードが提供されているかどうかを知ることができます.
(本人はLightHouseについての理解が少し遅れているので、PWAを使うために設置するのはちょっと大変…PWAを使う時だけでなく、Webアプリケーションの品質を知る指標としてもよく使うので、事前に知っておいた方が良いでしょう.)

PWA + React

まず、PWAを使用するために必要なファイルがいくつかあります.

index.html(応答項目の共通フォルダに既に存在する)

manifest.json

service-worker.js

manifest.json

アプリケーション情報を含むJSONファイル.ファイル名のほとんどはこのように使用されます.

{
    "name": "TeamLog",
    "short_name": "TeamLog",
    "start_url": "public/index.html",
    "display": "standalone",
    "icons": [
      {
        "src": "/icons/apple-touch-icon-57x57.png",
        "sizes": "57x57",
        "type": "image/png"
      },
      {
        "src": "/icons/apple-touch-icon-60x60.png",
        "sizes": "60x60",
        "type": "image/png"
      },
      {
        "src": "/icons/apple-touch-icon-72x72.png",
        "sizes": "72x72",
        "type": "image/png"
      },
      {
        "src": "/icons/apple-touch-icon-76x76.png",
        "sizes": "76x76",
        "type": "image/png"
      },
      {
        "src": "/icons/apple-touch-icon-114x114.png",
        "sizes": "114x114",
        "type": "image/png"
      },
      {
        "src": "/icons/apple-touch-icon-120x120.png",
        "sizes": "120x120",
        "type": "image/png"
      },
  
      {
        "src": "/icons/apple-touch-icon-144x144.png",
        "sizes": "144x144",
        "type": "image/png"
      },
      {
        "src": "/icons/apple-touch-icon-152x152.png",
        "sizes": "152x152",
        "type": "image/png"
      },
      {
        "src": "/icons/favicon-196x196.png",
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "/icons/mstile-310x310.png",
        "sizes": "310x310",
        "type": "image/png"
      },
      {
        "src": "/icons/favicon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ],
    "prefer_related_applications": true,
    "theme_color": "#543971",
    "background_color": "#FFFFFF"
  }
  

short_name
:アイコン名

name
:Webアプリケーション名

icons
:アイコンで使用する画像

start_url
:Webアプリケーションの実行時に起動するURLアドレス

display
:表示スタイル
browser-通常のブラウザと同じ
独立:トップレベルのステータスバー以外の全画面表示
全画面:ステータスバー以外の全画面
minimul-ui:

は、フルスクリーン状態での後退とリフレッシュを提供します.

prefer_related_applications
:Webアプリケーションとネイティブアプリケーションの優先度を決定します(falseがdefaultでtrueに変更された場合は、ユーザーエージェントがアプリケーションをインストールすることを推奨します).

theme_color
:上部ツールバーの色

background_color
:フラッシュメモリ画面(アプリケーション起動時に表示されるウェルカム画面)背景色

ここで私は1篇の文章(https://web.dev/installable-manifest/?utm_source=lighthouse&utm_medium=devtools)を見て、濃い色のフォントで使う要素は必ずファイルの中に含まなければならないと言って、実際に本人も最初はprefer related applicationsを無視すれば、アプリケーションとして使用できないと言っていました.
参考までに、

LightHouseに表示されている場合は、モバイルデバイスにインストールできます.

これにより、インストール不可の状態が表示されます.理由を押すと理由がわかるので、公式ファイルとGoogleリンクで状況に応じて解決すればいいです.
manifest.jsonを作成して完了したら

<link rel="manifest" href="manifest.json" crossorigin="use-credentials">

このコードをインデックスします.htmlのタイトル部分に置けばいいです.

service-worker.js

次はサービスワークjsというファイルが必要です.その前に、Service Workerとは何かを理解しておきましょう.
Service Workerは、Webブラウザがバックグラウンドで実行するスクリプトで、Webページには関係ありません.Webサービス、ブラウザ、ネットワーク間でプロキシサーバとして機能し、オフラインでサービスを使用できます.
httpをローカルで使用しても構いませんが、サーバに配備する場合は、サービスWorkerを使用するにはhttpを使用する必要があります!!
まず、Service Workerを使用するコードを作成する必要があります.

  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js').then((reg) => console.log('Service worker registered.', reg));
    }
  </script>

このコードをインデックスします.htmlに追加するにはservice-workerです.これはjs内のサービスキットを実行することを意味します.service-worker.jsはindexです.htmlと同じ位置にあるはずです.
今はサービスワークですjsファイルを作成します.

const CACHE_NAME = 'cache-v2';

const FILES_TO_CACHE = [
  'offline.html',
];

self.addEventListener('install', (evt) => {
    evt.waitUntil(
        caches.open(CACHE_NAME).then((cache) => {
            console.log('install');
            return cache.addAll(FILES_TO_CACHE);
        }),
    );
});

self.addEventListener('activate', (evt) => {
    evt.waitUntil(
        caches.keys().then((keyList) => {
            return Promise.all(keyList.map((key) => {
                if (key !== CACHE_NAME) {
                    console.log('Removing old cache', key);
                    return caches.delete(key);
                }
            }));
        }),
    );
});

self.addEventListener('fetch', (evt) => {
    if (evt.request.mode !== 'navigate') {
        return;
    }
    evt.respondWith(
        fetch(evt.request)
        .catch(() => {
            return caches.open(CACHE_NAME)
            .then((cache) => {
                return cache.match('offline.html');
            });
        }),
    );
});

コード全体を以下に示します.メインコードを見てみましょう.

install

self.addEventListener('install', (evt) => {
    evt.waitUntil(
        caches.open(CACHE_NAME).then((cache) => {
            console.log('install');
            return cache.addAll(FILES_TO_CACHE);
        }),
    );
});

キャッシュを初期化してオフラインファイルを追加できます.本人は上端にFILES TO CACHEという変数配列を設けた.
waitUntil-ServiceWorkerは、waitUntilのコードが実行されるまでインストールされません.
Caches-指定されたサービスWorkerの範囲内で、データを格納する特殊なオブジェクトに使用できます.

activate

self.addEventListener('activate', (evt) => {
    evt.waitUntil(
        caches.keys().then((keyList) => {
            return Promise.all(keyList.map((key) => {
                if (key !== CACHE_NAME) {
                    console.log('Removing old cache', key);
                    return caches.delete(key);
                }
            }));
        }),
    );
});

不要になったファイルを削除し、アプリケーションの終了後に整理するために使用します.これは、最上位レベルでバージョン名を変更したときに実行されるコードです.

fetch

    if (evt.request.mode !== 'navigate') {
        return;
    }
    evt.respondWith(
        fetch(evt.request)
        .catch(() => {
            return caches.open(CACHE_NAME)
            .then((cache) => {
                return cache.match('offline.html');
            });
        }),
    );
});

ネットワークから物を受信した場合、インターネットに接続できなければ、キャッシュに格納されている物を取り出す役割を果たすことができる.上のコードはインターネットに接続されていないときにオフラインになります.htmlの内容を表示するという意味です.

アプリをダウンロードする

IOSではmanifestです.jsはサポートされていないため、モバイルアプリケーションをダウンロードできません.つまり、アプリはAndroidからしかダウンロードできません.
上のコードを書き終えてLightHouseを見ると、こうなります.

PWA Optimizedがベスト条件?PWAが備えるべき最適な状態は?程度と考える.上でInstallableをアクティブにすればいいです.本書にもありますが、モバイルアプリケーションにダウンロードできるかどうかを確認するには、以下のコードを書くことができます.
(モバイル画面でボタンをクリックしたときにダウンロードするために、応答関数コンポーネントを含むjsファイルにこのコードを書き込みます.)

let deferredInstallPrompt = null;

window.addEventListener('beforeinstallprompt', (e) => {
  deferredInstallPrompt = e;
  console.log("'beforeinstallprompt' event was fired.");
});

function userClickedAddToHome() {
  deferredInstallPrompt.prompt();

  deferredInstallPrompt.userChoice.then((choiceResult) => {
    if (choiceResult.outcome === 'accepted') {
      // 유저가 홈 스크린에 어플리케이션 추가에 동의
    } else {
      // 유저가 홈 스크린에 어플리케이션 추가를 거부
    }
    deferredInstallPrompt = null;
  });
}

beforeinstallpromptというイベントが発生し、ブラウザドメインにすべてのインストール条件を満たすことを通知します.ボタンを押すと、ユーザーClickedAddToHome関数が実行されると、ブラウザがアプリケーションをダウンロードするかどうかを尋ね、それを受け入れると、アプリケーションがハングアップします.上記の設定が無効な場合、このイベントは発生しません.
とにかく本人はmanifestjsとservice-workerjsはindexです.beforeInstallPromptイベントリスナーはhtmlと同じ位置にあり、関数コンポーネントが含まれています.jsファイルに書きます.
しばらくの間、大まかな概念を振り返り、設置時に遭遇した困難や考慮すべき事項をまとめました.個人的にはここで得た情報が一番多いと思います.
https://chaewonkong.github.io/posts/pwa.html
https://www.youtube.com/watch?v=NMdnzvPsGu8