ウェブアプリを設計し、コードと Service Worker を記述し、最後に ウェブアプリ マニフェスト: 'インストール'ユーザーのデバイス上に存在するたとえば、スマートフォンのランチャーやアプリ切り替えツールに使用する高解像度のアイコンや、ユーザーのホーム画面から開いたときにウェブアプリをどのように起動するかなどです。
多くのブラウザはウェブアプリ マニフェストを尊重しますが、指定したすべての値を読み込んだり、尊重したりするブラウザは限られます。PWACompat を入力します。これは、ウェブアプリ マニフェストを受け取り、さまざまなサイズのアイコン、ファビコン、起動モード、色などに関連する meta タグまたは link タグを自動的に挿入するライブラリです。
つまり、標準タグや非標準のタグ（
<link rel="icon" ... /> や <meta name="orientation" ... /> など）をページに追加します。iOS のホーム画面では
PWACompat は、スプラッシュ画面を動的に作成するため、
画面サイズごとに 1 つずつ作成します
PWACompat の使用
PWACompat を使用するには、ウェブアプリにリンクする必要があります すべてのページでマニフェストを使用する:
<link rel="manifest" href="manifest.webmanifest" />
次に、このスクリプトを include するか、非同期読み込みのバンドルに追加します。
<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>
PWACompat は、モバイル デバイスかデスクトップかにかかわらず、マニフェスト ファイルを取得し、ユーザーのブラウザに必要な処理を行います。
検索インデックス登録のために、高品質のショートカット アイコンを 1 つ以上追加することをおすすめします。
<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />
詳細については、ベスト プラクティスをご覧ください。
<script type="module">
// detect iOS Safari
if (('standalone' in navigator) && (!navigator.standalone)) {
import('https://unpkg.com/pwacompat');
}
</script>
詳細
サポートされているブラウザで、PWACompat は実際に何を行いますか？PWACompat はウェブアプリ マニフェストを読み込み、次のことを行います。
- マニフェスト内のすべてのアイコン（ファビコン、古いブラウザなど）にメタアイコンタグを作成する
- さまざまなブラウザ（iOS、WebKit / Chromium フォークなど）のフォールバック メタタグを作成し、ウェブアプリを開く方法を記述します。
- マニフェストに基づいてテーマの色を設定します。
Safari の場合、PWACompat は次のことも行います。
apple-mobile-web-app-capable（ブラウザの Chrome なしで開く）の設定 表示モードstandalone、fullscreen、またはminimal-uiapple-touch-iconイメージを作成し、マニフェストの背景を透明なアイコンに追加します。 指定しない場合、iOS では透明度が黒としてレンダリングされます- Chromium ベースのブラウザ用に生成されたスプラッシュ画像に近い、動的なスプラッシュ画像を作成します。
ブラウザに関するサポートやサポートにご協力いただける場合は、 PWACompat は GitHub にあります。
試してみる
PWACompat は、Airhorner、v8.dev、 Emojityper。お客様のサイトヘッダーの HTML は単純で、 マニフェストを修正し、PWACompat が残りを処理できるようにします。
📢🤣🎉