0

ブラウザがサービスワーカーをサポートしていない場合、キャッシュマニフェストを使用するようブラウザに指示するにはどうすればよいですか?ブラウザがサービスワーカーをサポートしていない場合、キャッシュマニフェストを使用するようブラウザに指示するにはどうすればよいですか?

オフラインで実行する必要があるAngular 4アプリがあります。サービスワーカーはその仕事をすばらしく行いますが、実行する必要のあるブラウザであるSafariではサポートされていません。サービス労働者はキャッシュマニフェストファイルを使用するには、ブラウザのために、ブラウザでサポートされていない場合は、ブラウザがオフラインになったら

私はキャッシュマニフェストファイルを生成する必要が

現在のコード(typescriptです):

if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('../../service-worker.js').then(function(registration) { 
    //TODO: Implement Logging 
    }).catch(function(err) { 
    //TODO: Implement Logging 
    }); 
} else { 
    //Not currently supported on Internet explorer, Safari, IE Mobile and Safari Mobile. Use old Application Caching instead. 
    console.log("Not Supported"); 
    //Use cache manifest 
} 

答えて

1

elseステートメントに、マニフェストファイルのすべての必須プロパティを持つ要素<link>を作成するだけですか?私はあなたが<head>

const linkMeta = document.createElement('link'); 
linkMeta.setAttribute('rel', 'manifest'); 
linkMeta.setAttribute('href', '/manifest.webmanifes'); 

でスクリプトの一部を入れて、appCacheマニフェストは、iOS版でサポートされて<head>

+0

これをタイスクリプトで行うことはできますか? –

+0

もちろん... TSファイルでは、バニラJSを書くことができます。なぜなら、JSのフレームワークを使っていますか? – DrNio

+0

私はこのような意味を持っていますhttps://developer.mozilla.org/en-US/docs/Web/API/Document/createElement – DrNio

0

にそれを追加する必要がありますね。これは過去10年間にサイトをオフラインで動作させる方法です。 ページがappCacheマニフェストおよびサービスワーカーを参照する場合、サービスワーカーをサポートするブラウザはappCacheを無視します。

また、WebマニフェストとappCacheマニフェストを混同していると思います。彼らは2つの異なるものです。 appCacheは、ファイルをオフラインでキャッシュする方法を管理します。 Webマニフェストファイルはブラウザにメタデータを提供し、一度それがホーンスクリーンに追加されるとあなたのサイトをブランド化しレンダリングする方法を知っています。

私はおよそ2010年以来appCacheとのlocalStorage /のIndexedDBを使用してiOSのライバルネイティブアプリがあなたは絶対にそれを行うことができ、モバイル/オフラインの最初のWebアプリケーションを構築してきた:)

これは私が与えたプレゼンテーションですFWIW数年前のベロシティhttps://youtu.be/GKxkzu0pHUcそれはあなたを助けるかもしれません。

関連する問題