ページがオフラインのときのような特定のイベントで特定のWebページを作成するには？

モバイル上のhttps://www.flipkart.com/のオフラインバージョンは、プログレッシブWebアプリケーションを使用し、ユーザーがオフラインのときにコンテンツをグレーアウトします。ページがオフラインのときのような特定のイベントで特定のWebページを作成するには？

、ここでオンラインバージョンは、彼らがそれをどのように行うのです

を高齢化せずにいるのですか？

出典

2017-05-12 Eminem347

あなたがグレー/グレー色でオーバーレイを作成することができますし、それぞれのページのアイテムの色も調整されます（JavaScriptの活性化とCSSを持つすべての） – mnemosdev

@mnemosdevもいいですか？ – Eminem347

はい、z-インデックスのcssプロパティを持つ色のレイヤーを前面に配置すると、指定した色で色付けされますが、メニューは表示されません。https://codepen.io/mnemosdev/full/bWvygd/ – mnemosdev

他にも述べたように、HTML全体の上にposition: fixedを使用して配置されたオーバーレイを使用できます。しかし、これはユーザーがオーバーレイの下の要素をクリックすることを許さないので、あなたが何をしているかによって異なります。フリップカートの場合

、彼らは<html>タグに以下のCSSを適用します。

filter: grayscale(1);

彼らはまた、その色を変更するためのボタンなどの個々の要素にインラインスタイルを適用します。この方法では、サイトをナビゲートすることができます。これは、オフライン機能を許可すると便利です。

最後に、JavaScriptなどでイベントリスナーを追加して、ユーザーがオンラインやオフラインになったときなどに処理する必要があります。

window.addEventListener('online', function(e) { 
    // add your logic to update the UI when online 
    console.log("You are online"); 
    document.body.style.filter = 'grayscale(0)'; 
}, false); 

window.addEventListener('offline', function(e) { 
    // add your logic to update the UI when offline 
    console.log("You are offline"); 
    document.body.style.filter = 'grayscale(1)'; 
}, false);

出典

2017-05-13 08:46:35

オンライン/オフラインイベントは、ネットワーク接続がない場合にのみトリガするため、これらのすべてのLie-Fiシナリオを捕らえることはできません。それらのために、ネットワークにヒットしたフェッチ・イベント・ロジックにいくつかの「派手な」ロジックを追加したいと思うでしょう。 promise changeにcatchハンドラを追加し、クライアントにpostMessageを追加します。クラスやインラインスタイルを追加してUIをグレースケールで表示できます。 –

ページがオフラインのときのような特定のイベントで特定のWebページを作成するには？

答えて

関連する問題