web-dev-qa-db-ja.com

アプリケーションキャッシュまたはサービスワーカー-2016 / Q2で使用するもの

いろいろな人から意見をもらいたかったので、ディスカッションのための簡単な質問です。

私はオフラインで利用可能でなければならないウェブページアプリを開発中です。

これを行うには、私が理解しているように、アプリケーションキャッシング機能を使用するか、Service Workerを使用します。

しかし、ここに私が抱えている難問があります。アプリケーションキャッシュを調査するとき、 MDNは明確に述べています ：

非推奨：
この機能はWeb標準から削除されました。一部のブラウザではまだサポートされている可能性がありますが、削除される予定です。古いプロジェクトや新しいプロジェクトでは使用しないでください。それを使用するページまたはWebアプリはいつでも壊れる可能性があります。

その後、別のダイアログボックスが代わりにService Workerの使用を提案します。

Service Workersページ 次に、Service Workersが実験的なテクノロジーである方法を説明します。互換性の表を参照することをお勧めします。

互換性テーブルによると、SafariとInternet ExplorerはService Workersをサポートしていません。さらなるコンサルティング このサイト そしてそれが正確であると仮定して、サービスワーカーを統合するための作業がMicrosoftによって開始されたと述べていますが、Safariの場合は「検討中」であり、「5か年計画の前向きな兆候は短い」と述べています。

これは、safariとの互換性を保つことが不可欠であるため、現在のプロジェクトではこれが懸念事項ですが、他のブラウザーでも問題が発生しないようにする必要があります。

あなたのおすすめは何ですか？古いアプリケーションキャッシングを使用して、近い将来に更新しますか？ユーザーのブラウザを決定し、適切に行動しますか？または、私が見逃している別の方法はありますか？

htmloffline-cachingservice-workerofflineappsapplication-cache
26
Ben Davison

間違いなく両方を同時に使用するオプションがあります。 iOSは今後5年間でService Workerの実装を「検討」しているだけなので、今後数年でクロスブラウザーアプリケーションをデプロイしたい場合、私の印象はAppCacheを使い続ける必要があるということです。

以下は、どちらか一方を使用するかどうかを検出し、両方を初期化するために使用しているJavaScriptの一部です

if ( 'serviceWorker' in navigator && b ) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
showMsg('ServiceWorker registration successful with scope: ', registration.scope);
if ( registration.installing ) {
  showMsg( 'Service worker installing' );
} else if ( registration.waiting ) {
  showMsg( 'Service worker installed' );
} else if ( registration.active ) {
  showMsg( 'Service worker active' );
}
  }).catch(function(err) {
    // registration failed :(
    showMsg('ServiceWorker registration failed: ', err);
  });

// Listen for claiming our ServiceWorker
navigator.serviceWorker.addEventListener('controllerchange', 
function(event) {
      // Listen for changes in the state of our ServiceWorker
      navigator.serviceWorker.controller.addEventListener('statechange', function() {
        // If the ServiceWorker becomes "activated", let the user know they can go offline!
        if (this.state === 'activated') {
        // This example is refreshing the app directly, but you can inform the user with a fancy modal window or similar
            window.location.reload( true );
        }
      });
    });

// Browsers not using Service Workers
    } else  if ('applicationCache' in window) {
      var iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.src = 'load-appcache.html'
      document.body.appendChild(iframe);
      showMsg("Iframe loaded for AppCache management");

    } else {
      showMsg("no service worker - no appCache");

 }

AppCacheを初期化するために記述されたコードは、appcacheファイルが変更されたときに新しいページを更新するのに役立ちます。私はいくつかのソースからそれを入手しましたが、すべてはPWA Dev Summit 2016中にパトリックケトナーが提供した強力なプレゼンテーションから来ています：（ https://www.youtube.com/watch?v=IgckqIjvR9U&t=1005s ）

load-appcache.htmlには何も含まれていません

<!DOCTYPE html>
<html manifest="offline.appcache">
    <head>
        <title>loding appCache</title>
   </head>
   <body></body>
</html>

もちろん、SWがより洗練されたアプリを提供するために提供する複数の可能性がありますが、AppCacheとIDBを使用すると、オフライン機能を含め、ほぼすべてのビジネスロジックを実行できます。

Chromeを使用してAppCache機能を無効にしたため、テストできなくなりますが、Firefoxを強制できます（私は50.1.0でテストしました。）いつでもSafariを使用できますが、 :)

10
Miguel Guardo

同じWebアプリでService WorkersとAppCacheを使用することを選択できます。このような場合、サービスワーカーをサポートしていないブラウザはAppCacheを使用し、サポートしないブラウザはAppCacheを無視してサービスワーカーに引き継がれます。

出典： https://www.w3.org/TR/service-workers/#activation-algorithm 、 https://crbug.com/410665

10
Daniel Herr

そうです、 appcacheはサポートされなくなりました 。

また、IDB内にデータやアセットを保存する他のオプションがあります。

その他の例については、「 offline pouchdb ember 」または「 offline pouchdb angular 」をググリングしてみてください。

現在オフラインでの可用性を確保するための唯一のメカニズムは、サービスワーカーとappcacheです。限目。

これらの手法はすべて、サイトが単一ページのアプリケーションであり、到達可能なエントリポイントに依存しています。したがって、appcacheまたはservice workerを使用せずにエントリポイントが常に到達可能であることを確認する場合は、httpキャッシュにフォールバックして、アセットを提供するときに キャッシュ関連ヘッダー を適切に設定する必要があります。とにかく、httpキャッシュはUAによっていつでも追い出される可能性があります。

この決定に直面し、アプリケーションがオフラインで実行することが必須であり、Safariである場合、唯一のオプションはappcacheを使用することです（AFAIK、ニュースはありません） Safariからのappcacheの削除について）。

リスクを軽減するために、appcacheに加えて前の手法（IndexedDBにアセットを保存する手法）のいずれかを組み合わせて、キャッシュするのはSPAのエントリポイントだけにすることを選択できます。 appcacheがサポートされなくなり、Service Workerの代替がない場合は、キャッシュヘッダーの代替に切り替えることができます。

とにかく、機能検出（if ('serviceWorker' in navigator) { ... }）を使用して、Service Workerが使用可能かどうかを確認し、使用可能であればそれを使用できます。 JakeCache （テストされていません）と呼ばれるService Workerに基づくappcacheのポリフィルがあり、 その他は来ます 。

9
Salva

MozillaのHTML5 Service Workers Docによると：

注：Service Workerの優れた点の1つは、上記で示したような機能検出を使用する場合、Service Workerをサポートしていないブラウザーは、通常予想される方法でオンラインでアプリを使用します。さらに、ページでAppCacheとSWを使用する場合、SWをサポートしないがAppCacheをサポートするブラウザーはそれを使用し、両方をサポートするブラウザーはAppCacheを無視してSWに引き継がせます。

「上」のコード：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw-test/sw.js', {scope: '/sw-test/'})
  .then(function(reg) {
    // registration worked
    console.log('Registration succeeded. Scope is ' + reg.scope);
  }).catch(function(error) {
    // registration failed
    console.log('Registration failed with ' + error);
  });
}

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

2
Jersh