PWA: manifest.json の名前とアイコンを動的に設定します.クライアント側.ジャバダバドゥ!

これは dev.to サイトでの私の最初の書き込みです.ソースコードはリンクとして含まれています.私は VueJS を使用していますが、vanilla JS も使用できます.

マニフェスト.json

PWA アプリをインストールするには、manifest.json が必要です.通常、すべての項目が定義されている別の manifest.json ファイルへのリンクを含む index.html があります.このファイルは静的です.これを変更する唯一の方法は、ソース コードを編集することです (ユーザーではなく開発者であるため). node.js または同様のサーバー側テクノロジーによって動的に作成されたものではなく、静的ファイルを提供するとします.

今日は、いくつかのマニフェストのアイテムをクライアント側、つまりユーザーとして動的に変更する方法の実用的な例を紹介します.

ノート

私の作品は私の発明ではなく、他の開発者の優れた作品、アイデア、研究に基づいていると言わざるを得ません.
alshakero に特に感謝します.彼の投稿 How to Setup Your Web App Manifest Dynamically Using Javascript は非常に役に立ちました.

考え

ユーザーがいくつかの manifest.json 項目を動的に設定できるようにするために必要な手順は 3 つだけです.

index.html の外にフォームを作成してアイテムを設定します (必須ではありません)

URL から manifest.json 項目をパラメーターとして読み取る (別名 index.html?name=myApp&icon=icon_1)

manifest.json で表されるオブジェクトを変更し、それを index.html ファイルに挿入します

簡単ですね.

ステップ 1: フォーム

テンプレート タグを使用して index.html 内のすべてのコンテンツを含む SPA (シングル ページ アプリケーション) として PWA を記述します.メニューまたは URL によるナビゲーションはルーターによって維持され、既に読み込まれている index.html 内の対応するコンポーネント (テンプレート + データ) を提供します.

このステップ (ユーザー フォームの作成) のために、config.html という名前の別のファイルを作成します.このファイルは別のものであり、PWA アプリにアセットとして含まれません (Service Worker 経由でキャッシュされません).

このページ - config.html - には、フォームと送信ボタンがあります.クリックイベントで、JSコードはユーザーの入力を変数に割り当て、それをパラメーターとしてindex.html urlに追加し、ページをindex.htmlにリダイレクトします

config.js ファイルの重要な部分:

var url = "https://pwa-dynamic-manifest.pablo74.repl.co/index.html?";
var params = "";
var fullUrl = "";

if (this.name){
  params += "name=" + this.name;
};
if (this.short_name){
  params += "&short_name=" + this.short_name;
};
if (this.bgColor){
  params += "&bg=" + this.bgColor;
};
if (this.isActive){
  params += "&icon=" + this.isActive + ".png";
}

fullUrl = url + params;
window.location.replace(fullUrl);

config.html および config.js のソース コードを参照してください.

ステップ 2: URL からパラメーターを読み取る

index.html 内に app.js ファイルへのリンクを追加します.このファイルには、manifest.json データとして事前に入力されたオブジェクトと、パラメーターを読み取ってオブジェクトを変更するためのコードが含まれています.

事前入力されたオブジェクト (暗黙の値):

var manifestJSON = 
{
  "name": "info-()",
  "short_name": "info-()",
  "scope": "https://pwa-dynamic-manifest.pablo74.repl.co/",
  "start_url": "https://pwa-dynamic-manifest.pablo74.repl.co/index.html",
  "display": "standalone",
  "icons": [
    {
      "src": "https://pwa-dynamic-manifest.pablo74.repl.co/img/icon_192_192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "https://pwa-dynamic-manifest.pablo74.repl.co/img/icon_512_512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "background_color": "black",
  "theme_color": "#027be3"
};

scope と start_url プロパティに注意してください.通常は "scope": "/" や "start_url": "/" などを使用しますが、私にはうまくいきません.そのため、完全な URL に変更する必要があります.これは他では見られないトリックです.

ここで、URL からパラメーターを読み取る方法を示します.

var urlParams = new URLSearchParams(window.location.search);
var name = urlParams.get('name');
var short_name = urlParams.get('short_name');
var bg = urlParams.get('bg');
var icon = urlParams.get('icon');

ステップ 3: manifest.json を表すオブジェクトを変更し、それを index.html ファイルに挿入する

manifest.json ファイルの index.html にカスタム要素があります.

<link rel="manifest" id="my-manifest-placeholder">

href 属性がないことがわかるので、このリンクはまだ機能していません.

ステップ 2 の変数を使用して、オブジェクトを変更し、index.html に挿入できます.

if (name){
  manifestJSON.name = name;
};

if (short_name){
  manifestJSON.short_name = short_name;
};

if (bg) {
  manifestJSON.background_color = bg;
};

if (icon){
  manifestJSON.icons[0].src = "https://pwa-dynamic-manifest.pablo74.repl.co/img/" + icon;
}

const stringManifest = JSON.stringify(manifestJSON);
const blob = new Blob([stringManifest], {type: 'application/json'});
const manifestURL = URL.createObjectURL(blob);
document.querySelector('#my-manifest-placeholder').setAttribute('href', manifestURL);

「やめて、アイコンはどこ?」と思うかもしれません.正しい質問です.すべてのアイコンは、アセットとして img フォルダーに既に含まれています.つまり、この方法では、外部ファイルからではなく、一連のアイコンのみからアプリ アイコンを設定します.

それは本当に機能しますか？

はい、2 つの Android デバイス (Android 7 を搭載した携帯電話と Android 10 を搭載したタブレット) でテストしました.名前とアイコンが異なる 3 つのアプリでも、同じコード ベースから同じデバイスにインストールできました.

完全なソース コード

私は他の開発者の作品を使用しているため、すべてのソース コードを公開して公開することは公平です.これは、replit.com (以前の repl.it) で見つけることができます: pwa-dynamic-manifest
アカウントをお持ちの場合は、この repl をフォークして、必要に応じて変更するだけです.

重要な注意点

最初の config.html を使用してフォームをロードします.それ以外の場合 (index.html を直接ロードする)、manifest.json を変更できません (url パラメーターを直接使用しない限り).

改良…？

これは機能的な概念実証です.必要に応じて変更および拡張できます:-)