Anwendung Cache oder Service-Mitarbeiter - welche in 2016/Q2 zu verwenden?

Question

Schnelle Frage zur Diskussion wirklich, wie ich von verschiedenen Leuten haben wollte.

Ich bin dabei, eine Webseiten-App zu entwickeln, die offline verfügbar sein muss.

Nun, um dies zu tun, wie ich es verstehe, würden Sie gehen entweder mit der Anwendung Caching-Funktion oder mithilfe von Service-Mitarbeitern.

Allerdings ist hier das Rätsel, das ich habe. Wenn die Anwendung Cache Erforschung, the MDN clearly states:

Deprecated:
Diese Funktion wurde von den Web-Standards entfernt. Obwohl einige Browser es immer noch unterstützen, wird es gerade gelöscht. Verwenden Sie es nicht in alten oder neuen Projekten. Seiten oder Web-Apps, die es verwenden, können jederzeit unterbrochen werden.

Danach schlägt ein anderes Dialogfeld vor, stattdessen Service-Mitarbeiter zu verwenden.

The Service Workers page geht dann zu sagen, wie Service Worker eine experimentelle Technologie sind, und es ist am besten, die Kompatibilitätstabelle zu konsultieren.

Die Kompatibilitätstabelle besagt, dass Safari und Internet Explorer Service Worker nicht unterstützen. Weitere Beratung this site und vorausgesetzt, es ist korrekt, heißt es, dass die Arbeit von Microsoft begonnen hat, Service-Mitarbeiter zu integrieren, jedoch für Safari sind sie "in Erwägung" mit "Kurze positive Signale in Fünf-Jahres-Plan."

Jetzt ist dies ein Anliegen für das aktuelle Projekt, da es unbedingt Safari-kompatibel sein muss, aber ich möchte auch nicht, dass es in anderen Browsern bricht.

Was wären Ihre Empfehlungen? Einfach mit dem älteren Application Caching gehen und in naher Zukunft updaten? Bestimmen Sie den Browser des Benutzers und handeln Sie entsprechend? Oder gibt es einen anderen Weg, den ich vermisse?

Answer 1

Sie haben Recht, appcache is becoming unsupported.

Und es gibt andere Möglichkeiten, die Daten speichern und/oder Vermögen innerhalb IDB wie:

• Offline Web Applications with CouchDB, PouchDB and Emeber CLI
• Ember-Pouch
• Offline apps using Ionic Framework, PouchDB and AngularJS

Ausprobieren "offline pouchdb ember" oder "googeln offline pouchdb angular "Für mehr Beispiele.

Die einzigen Mechanismen zur Gewährleistung der Offline-Verfügbarkeit sind derzeit Service Worker und Appcache. Zeitraum.

Alle diese Techniken beruhen darauf, dass Ihre Website eine Einzelseitenanwendung ist und der Einstiegspunkt erreichbar ist. Wenn Sie also Appcache- oder Service-Mitarbeiter nicht verwenden, um sicherzustellen, dass der Einstiegspunkt immer erreichbar ist, müssen Sie auf den HTTP-Cache zurückgreifen und beim Bereitstellen Ihrer Assets cache-related headers richtig einstellen. Wie auch immer, HTTP-Cache kann jederzeit von der UA geräumt werden.

diese Entscheidung mit Blick auf, wenn ist es zwingend notwendig für die Anwendung offline laufen und in Safari, ist die einzige Option AppCache (AFAIK gibt es keine Nachrichten über AppCache von Safari zu entfernen) zu verwenden.

Um das Risiko zu verringern, können Sie eine der vorherigen Techniken kombinieren (jene, die Assets auf IndexedDB speichern), zusätzlich zu Appcache, sodass nur der Einstiegspunkt für das SPA zwischengespeichert wird. Wenn appcache nicht mehr unterstützt wird und es keine Service-Mitarbeiter-Alternative gibt, können Sie zur Cache-Header-Alternative wechseln.

Wie auch immer, Sie können Feature-Erkennung (if ('serviceWorker' in navigator) { ... }) verwenden, um zu sehen, ob Service-Mitarbeiter zur Verfügung stehen und verwenden Sie sie, falls dies der Fall ist. Es gibt ein Polyfill für Appcache auf der Grundlage von Service-Mitarbeitern mit der Bezeichnung JakeCache (nicht getestet) und others are to come.

Answer 2

Sie können Service Worker und AppCache in derselben Webanwendung verwenden. In einem solchen Fall werden Browser, die Service-Mitarbeiter nicht unterstützen, AppCache verwenden, und diejenigen, die dies tun, ignorieren den AppCache und lassen den Service-Worker übernehmen.

Quellen: https://www.w3.org/TR/service-workers/#activation-algorithm, https://crbug.com/410665

Answer 3

Es auf jeden Fall die Möglichkeit, beide gleichzeitig zu verwenden. Wenn Sie in den nächsten Jahren eine browserübergreifende Anwendung bereitstellen möchten, habe ich den Eindruck, dass Sie weiterhin AppCache verwenden müssen, da iOS in den nächsten fünf Jahren nur daran denkt, Service-Mitarbeiter zu implementieren.

Hier einige JavaScript, das wir, ob verwenden, um zu ermitteln, einen oder die andere und beide

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"); 

} 

Der Code beschrieben zu initialisieren AppCache hilft Auffrischen der neuen Seiten, wenn die AppCache Dateiänderungen zu initialisieren. Ich packte es aus verschiedenen Quellen, aber alle kommen aus dem mächtigen Präsentation, die Patrick Kettner während des PWA Dev Summit 2016 geliefert: (https://www.youtube.com/watch?v=IgckqIjvR9U&t=1005s)

Last-appcache.html enthält nichts anderes als

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

Es gibt natürlich mehrere Möglichkeiten, die SW bietet, um eine schickere App zu liefern, aber mit AppCache und IDB können Sie tatsächlich so ziemlich jede Geschäftslogik machen, die Sie wollen, einschließlich der Offline-Fähigkeiten.

Beachten Sie, dass Sie die AppCache-Funktion in Chrome nicht testen können, da sie deaktiviert wurde, aber Sie können Firefox immer noch erzwingen (ich habe mit 50.1.0 getestet). Sie können Safari immer aber :)

Answer 4

Laut Mozilla HTML5 Dienstleister Doc verwenden:

Hinweis: Eine große Sache über Service-Mitarbeiter ist, dass, wenn Sie Funktion Erkennung verwenden wie wir haben oben gezeigt , Browser, die Service nicht unterstützen Arbeiter können einfach Ihre App online in der normalen erwarteten Art und Weise verwenden. Wenn Sie AppCache und SW auf einer Seite verwenden, verwenden Browser, die keine SW12 unterstützen, aber AppCache unterstützen, Browser, die beide unterstützen, ignorieren den AppCache und lassen SW übernehmen.

-Code "oben":

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