diff --git a/app/controllers/offline_controller.rb b/app/controllers/offline_controller.rb new file mode 100644 index 00000000000..fb315862ba8 --- /dev/null +++ b/app/controllers/offline_controller.rb @@ -0,0 +1,8 @@ +class OfflineController < ApplicationController + layout false + skip_before_filter :preload_json, :check_xhr, :redirect_to_login_if_required + + def index + render :offline, content_type: 'text/html' + end +end diff --git a/app/views/offline/offline.html.erb b/app/views/offline/offline.html.erb new file mode 100644 index 00000000000..8e3115986a8 --- /dev/null +++ b/app/views/offline/offline.html.erb @@ -0,0 +1,17 @@ + + + + + + <%= SiteSetting.title %> + + +
+

<%= t 'offline.title' %>

+

+ <%= t 'offline.offline_page_message' %> +

+
+ + + diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml index 21fe80e59dc..2ee6ce1c635 100644 --- a/config/locales/server.en.yml +++ b/config/locales/server.en.yml @@ -2828,6 +2828,10 @@ en: search_title: "Search this site" search_google: "Google" + offline: + title: "Cannot load app" + offline_page_message: "It looks like you are offline! Please check your network connection and try again." + login_required: welcome_message: | ## [Welcome to %{title}](#welcome) diff --git a/config/routes.rb b/config/routes.rb index b3df2161ea5..bb001d109ed 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -692,6 +692,7 @@ Discourse::Application.routes.draw do get "favicon/proxied" => "static#favicon", format: false get "robots.txt" => "robots_txt#index" + get "offline.html" => "offline#index" get "manifest.json" => "metadata#manifest", as: :manifest get "opensearch" => "metadata#opensearch", format: :xml diff --git a/public/service-worker.js b/public/service-worker.js index 3c6fecee607..50d94544592 100644 --- a/public/service-worker.js +++ b/public/service-worker.js @@ -1,4 +1,90 @@ /* - This service worker doesn't actually do anything! - I'm here just to support Google Chrome App Banner on Android + I'm here to support Google Chrome App Banner on Android */ + +'use strict'; + +// Incrementing CACHE_VERSION will kick off the install event and force previously cached +// resources to be cached again. +const CACHE_VERSION = 1; +let CURRENT_CACHES = { + offline: 'offline-v' + CACHE_VERSION +}; +const OFFLINE_URL = 'offline.html'; + +function createCacheBustedRequest(url) { + let request = new Request(url, {cache: 'reload'}); + // See https://fetch.spec.whatwg.org/#concept-request-mode + // This is not yet supported in Chrome as of M48, so we need to explicitly check to see + // if the cache: 'reload' option had any effect. + if ('cache' in request) { + return request; + } + + // If {cache: 'reload'} didn't have any effect, append a cache-busting URL parameter instead. + let bustedUrl = new URL(url, self.location.href); + bustedUrl.search += (bustedUrl.search ? '&' : '') + 'cachebust=' + Date.now(); + return new Request(bustedUrl); +} + +self.addEventListener('install', event => { + event.waitUntil( + // 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. + fetch(createCacheBustedRequest(OFFLINE_URL)).then(function(response) { + return caches.open(CURRENT_CACHES.offline).then(function(cache) { + return cache.put(OFFLINE_URL, response); + }); + }) + ); +}); + +self.addEventListener('activate', event => { + // 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 + // there are multiple versioned caches. + let expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) { + return CURRENT_CACHES[key]; + }); + + event.waitUntil( + caches.keys().then(cacheNames => { + return Promise.all( + cacheNames.map(cacheName => { + if (expectedCacheNames.indexOf(cacheName) === -1) { + // If this cache name isn't present in the array of "expected" cache names, + // then delete it. + return caches.delete(cacheName); + } + }) + ); + }) + ); +}); + +self.addEventListener('fetch', event => { + // We only want to call event.respondWith() if this is a navigation request + // for an HTML page. + // request.mode of 'navigate' is unfortunately not supported in Chrome + // versions older than 49, so we need to include a less precise fallback, + // which checks for a GET request with an Accept: text/html header. + if (event.request.mode === 'navigate' || + (event.request.method === 'GET' && + event.request.headers.get('accept').includes('text/html'))) { + event.respondWith( + fetch(event.request).catch(error => { + // The catch is only triggered if fetch() throws an exception, which will most likely + // happen due to the server being unreachable. + // If fetch() returns a valid HTTP response with an response code in the 4xx or 5xx + // range, the catch() will NOT be called. If you need custom handling for 4xx or 5xx + // errors, see https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker/fallback-response + return caches.match(OFFLINE_URL); + }) + ); + } + + // If our if() condition is false, then this fetch handler won't intercept the request. + // 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 + // handled by the browser as if there were no service worker involvement. +});