FEATURE: special offline support restricted to Android only

The special offline page with fetch interception in service worker
is only strongly required on Android ad a pre-req for PWAs

This is now strongly restricted only to Android while iOS PWA support
gets better

Long term if we build offline support we can unlock it more globally
This commit is contained in:
Sam
2018-10-29 16:29:19 +11:00
parent 5c86e2d749
commit f8305f53c7

View File

@ -1,16 +1,24 @@
'use strict'; 'use strict';
// Incrementing CACHE_VERSION will kick off the install event and force previously cached
// resources to be cached again.
const CACHE_VERSION = 1;
const CURRENT_CACHES = { // Special offline and fetch interception is restricted to Android only
// we have had a large amount of pain supporting this on Firefox / Safari
// it is only strongly required on Android, when PWA gets better on iOS
// we can unlock it there as well, for Desktop we can consider unlocking it
// if we start supporting offline browsing for laptops
if (/(android)/i.test(navigator.userAgent)) {
// Incrementing CACHE_VERSION will kick off the install event and force previously cached
// resources to be cached again.
const CACHE_VERSION = 1;
const CURRENT_CACHES = {
offline: 'offline-v' + CACHE_VERSION offline: 'offline-v' + CACHE_VERSION
}; };
const OFFLINE_URL = 'offline.html'; const OFFLINE_URL = 'offline.html';
function createCacheBustedRequest(url) { const createCacheBustedRequest = function(url) {
var headers = new Headers({ var headers = new Headers({
'Discourse-Track-View': '0' 'Discourse-Track-View': '0'
}); });
@ -27,9 +35,9 @@ function createCacheBustedRequest(url) {
var bustedUrl = new URL(url, self.location.href); var bustedUrl = new URL(url, self.location.href);
bustedUrl.search += (bustedUrl.search ? '&' : '') + 'cachebust=' + Date.now(); bustedUrl.search += (bustedUrl.search ? '&' : '') + 'cachebust=' + Date.now();
return new Request(bustedUrl, {headers: headers}); return new Request(bustedUrl, {headers: headers});
} }
self.addEventListener('install', function(event) { self.addEventListener('install', function(event) {
event.waitUntil( event.waitUntil(
// We can't use cache.add() here, since we want OFFLINE_URL to be the cache key, but // We can't use cache.add() here, since we want OFFLINE_URL to be the cache key, but
// the actual URL we end up requesting might include a cache-busting parameter. // the actual URL we end up requesting might include a cache-busting parameter.
@ -41,9 +49,9 @@ self.addEventListener('install', function(event) {
self.skipWaiting(); self.skipWaiting();
}) })
); );
}); });
self.addEventListener('activate', function(event) { self.addEventListener('activate', function(event) {
// Delete all caches that aren't named in CURRENT_CACHES. // Delete all caches that aren't named in CURRENT_CACHES.
// While there is only one cache in this example, the same logic will handle the case where // While there is only one cache in this example, the same logic will handle the case where
// there are multiple versioned caches. // there are multiple versioned caches.
@ -66,9 +74,9 @@ self.addEventListener('activate', function(event) {
self.clients.claim() self.clients.claim()
}) })
); );
}); });
self.addEventListener('fetch', function(event) { self.addEventListener('fetch', function(event) {
// Bypass service workers if this is a url with a token param // Bypass service workers if this is a url with a token param
if(/\?.*token/i.test(event.request.url)) { if(/\?.*token/i.test(event.request.url)) {
return; return;
@ -101,8 +109,9 @@ self.addEventListener('fetch', function(event) {
// If there are any other fetch handlers registered, they will get a chance to call // If there are any other fetch handlers registered, they will get a chance to call
// event.respondWith(). If no fetch handlers call event.respondWith(), the request will be // event.respondWith(). If no fetch handlers call event.respondWith(), the request will be
// handled by the browser as if there were no service worker involvement. // handled by the browser as if there were no service worker involvement.
}); });
}
const idleThresholdTime = 1000 * 10; // 10 seconds const idleThresholdTime = 1000 * 10; // 10 seconds
var lastAction = -1; var lastAction = -1;