Cache aplikacji lub pracownicy usług - do wykorzystania w 2016/Q2?

Question

Szybkie pytanie do dyskusji naprawdę, ponieważ chciałem mieć wkład od różnych ludzi.

Jestem w trakcie opracowywania aplikacji strony internetowej, która musi być dostępna w trybie offline.

Teraz, aby to zrobić, jak rozumiem, można użyć funkcji buforowania aplikacji lub pracowników usług.

Jednak tutaj jest zagadka, którą mam. Podczas badania pamięci podręcznej aplikacji, the MDN clearly states:

nieaktualne:
Funkcja ta została usunięta z standardami internetowymi. Chociaż niektóre przeglądarki nadal mogą go obsługiwać, jest ono w trakcie upuszczania. Nie używaj go w starych lub nowych projektach. Strony lub aplikacje internetowe, które go używają, mogą się zepsuć w dowolnym momencie.

Po czym inne okno dialogowe sugeruje użycie pracowników serwisu.

The Service Workers page następnie podaje, w jaki sposób pracownicy usługowi są eksperymentalną technologią i najlepiej jest zapoznać się z tabelą zgodności.

Tabela zgodności mówi, że Safari i Internet Explorer nie obsługują pracowników serwisowych. Dalsze konsultacje this site i zakładając, że jest dokładny, stwierdza, że ​​prace rozpoczęły się od Microsoftu w celu integracji pracowników serwisu, jednak w przypadku Safari są one "brane pod uwagę" z "Krótkimi pozytywnymi sygnałami w pięcioletnim planie".

Jest to problem związany z obecnym projektem, ponieważ jest on niezbędny do zapewnienia zgodności z Safari, jednak nie chcę, aby działał w innych przeglądarkach.

Jakie byłyby Twoje rekomendacje? Po prostu idź ze starszym buforowaniem aplikacji i zaktualizuj w najbliższej przyszłości? Określić przeglądarkę użytkowników i postępować właściwie? Czy jest inny sposób, którego mi brakuje?

Answer 1

Masz rację, appcache is becoming unsupported.

A są jeszcze inne opcje, które przechowują dane i/lub aktywów wewnątrz IDB takie jak:

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

Przymierz googlowania "offline pouchdb ember" lub "offline pouchdb angular "więcej przykładów.

Jedynymi mechanizmami zapewniającymi teraz dostępność w trybie offline są pracownicy serwisowi i appcache. Kropka.

Wszystkie te techniki polegają na tym, że witryna jest aplikacją pojedynczej strony i punktem wejścia, który można uzyskać. Jeśli więc nie korzystasz z appcache lub pracowników serwisowych, aby upewnić się, że punkt wejścia jest zawsze osiągalny, musisz odwołać się do pamięci podręcznej http i poprawnie ustawić cache-related headers podczas udostępniania zasobów. W każdym razie pamięć podręczna http może zostać eksmitowana w dowolnym momencie przez UA.

Wobec tej decyzji, jeśli to jest obowiązkowe dla aplikacji w trybie offline i Safari, jedyną opcją jest użycie pamięć podręczną aplikacji (nie AFAIK, istnieją informacje na temat usuwania pamięć podręczną aplikacji z Safari).

Aby zmniejszyć ryzyko, które można wybrać łącząc jedną z poprzednich technik (przechowujących zasoby na IndexedDB) oprócz appcache, więc jedyną rzeczą, którą przechowujesz, jest punkt wejścia do SPA. Jeśli appcache staje się nieobsługiwany i nie ma alternatywy dla pracownika serwisu, można przełączyć się na opcję nagłówków pamięci podręcznej.

W każdym razie można skorzystać z funkcji wykrywania obiektów (if ('serviceWorker' in navigator) { ... }), aby sprawdzić, czy pracownicy usługowi są dostępni i użyć go na wypadek, gdyby był. Istnieje polyfill dla appcache na podstawie pracowników serwisowych o nazwie JakeCache (nie testowane) i others are to come.

Answer 2

Można wybrać korzystanie z Service Workers i AppCache w tej samej aplikacji internetowej. W takim przypadku przeglądarki, które nie obsługują pracowników serwisowych, będą korzystać z AppCache, a te, które robią, zignorują AppCache i przekażą go pracownikowi serwisu.

Źródła: https://www.w3.org/TR/service-workers/#activation-algorithm, https://crbug.com/410665

Answer 3

nie jest z pewnością możliwość wykorzystania zarówno w tym samym czasie. Jeśli chcesz wdrożyć aplikację w różnych przeglądarkach w ciągu najbliższych kilku lat, mam wrażenie, że musisz nadal korzystać z AppCache, ponieważ iOS tylko "myśli o" wdrażaniu Service Workers w ciągu najbliższych 5 lat.

Oto niektóre JavaScript, który używamy, aby wykryć, czy użyć jednego lub drugiego i zainicjować zarówno

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

} 

Kod opisaną zainicjować pamięć podręczną aplikacji pomaga odświeżanie nowych stron kiedy zmiany plików pamięć podręczną aplikacji. Złapałam go z kilku źródeł, ale wszystkie pochodzą z potężnej prezentacji, że Patrick Kettner dostarczanego podczas PWA Dev Summit 2016: (https://www.youtube.com/watch?v=IgckqIjvR9U&t=1005s)

obciążenia appcache.html zawiera nic poza

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

Istnieją Oczywiście wiele możliwości, które SW zapewnia, aby dostarczyć bardziej zaawansowaną aplikację, ale dzięki AppCache i IDB możesz rzeczywiście zrobić dowolną logikę biznesową, jaką chcesz, łącznie z możliwościami offline.

Pamiętaj, że nie będzie można przetestować funkcji AppCache w Chrome, ponieważ zostały one wyłączone, ale nadal możesz wymusić działanie przeglądarki Firefox (testowałem w wersji 50.1.0). Zawsze można użyć Safari chociaż :)

Answer 4

Według Mozilli HTML5 Pracowników Służb Doc:

Uwaga: Jedną wielką rzeczą jest to, że pracownicy serwisu, jeśli użyć funkcji wykrywanie jakbyśmy pokazano powyżej przeglądarki, które nie obsługują serwisów, mogą korzystać z aplikacji online w normalny sposób. Ponadto, jeśli używasz AppCache i SW na stronie, przeglądarki, które nie obsługują SW, ale obsługują AppCache, będą z tego korzystać, a przeglądarki, które obsługują , zignorują AppCache i przekażą SW.

Code "powyżej":

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