github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-22 11:23:25 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add offline route and service worker to fix Android app install banner (#5217)

Browse Source 
* set up static offline.html route and service worker for Android Web App Banner

* add viewport meta tag to offline view for android app banner

* add i18n support for offline.html pages, cleanup

* fix html syntax, add page title, remove license for service-worker.js
This commit is contained in:
Penar Musaraj 2017-10-30 19:46:48 -04:00 committed by Sam
parent d955af5960
commit bd1616d3d9
5 changed files with 118 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/controllers/offline_controller.rb Normal file
View File

@ -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

17
app/views/offline/offline.html.erb Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<%= SiteSetting.default_locale %>" xml:lang="<%= SiteSetting.default_locale %>">
<head>
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<title><%= SiteSetting.title %></title>
</head>
<body>
<div style="padding:100px 40px; text-align:center; font-family: Helvetica, Arial, sans-serif;">
<h1 style="font-size: 36px; color: #333;"><%= t 'offline.title' %></h1>
<p style="margin: 40px; font-size: 18px; color: #555;">
<%= t 'offline.offline_page_message' %>
</p>
</div>
</body>
</html>

4
config/locales/server.en.yml
View File

@ -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)

1
config/routes.rb
View File

@ -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

90
public/service-worker.js
View File

@ -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.
});