From 498594c31b2a3af48fe83b3c2f67874d116b6c59 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 31 Oct 2020 13:22:39 +0100 Subject: [PATCH 1/3] Deleted service worker --- src/index.tsx | 2 - src/registerServiceWorker.js | 126 ----------------------------------- 2 files changed, 128 deletions(-) delete mode 100644 src/registerServiceWorker.js diff --git a/src/index.tsx b/src/index.tsx index 836dfa75..505403fb 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,7 +3,6 @@ import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; import { homepage } from '../package.json'; -import registerServiceWorker from './registerServiceWorker'; import container from './container'; import store from './container/store'; import { fixLeafletIcons } from './utils/helpers/leaflet'; @@ -30,4 +29,3 @@ render( , document.getElementById('root'), ); -registerServiceWorker(); diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js deleted file mode 100644 index f12df500..00000000 --- a/src/registerServiceWorker.js +++ /dev/null @@ -1,126 +0,0 @@ -/* eslint-disable @typescript-eslint/promise-function-async, @typescript-eslint/no-misused-promises */ - -// In production, we register a service worker to serve assets from local cache. - -// This lets the app load faster on subsequent visits in production, and gives -// it offline capabilities. However, it also means that developers (and users) -// will only see deployed updates on the "N+1" visit to a page, since previously -// cached resources are updated in the background. - -// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. -// This link also includes instructions on opting out of this behavior. - -/* eslint no-console: "off" */ - -const isLocalhost = Boolean( - window.location.hostname === 'localhost' || - - // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || - - // 127.0.0.1/8 is considered localhost for IPv4. - window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/, - ), -); - -export default function register() { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { - // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL(process.env.PUBLIC_URL, window.location); - - if (publicUrl.origin !== window.location.origin) { - // Our service worker won't work if PUBLIC_URL is on a different origin - // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 - return; - } - - window.addEventListener('load', () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; - - if (isLocalhost) { - // This is running on localhost. Lets check if a service worker still exists or not. - checkValidServiceWorker(swUrl); - - // Add some additional logging to localhost, pointing developers to the - // service worker/PWA documentation. - return navigator.serviceWorker.ready.then(() => { - console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://goo.gl/SC7cgQ', - ); - }); - } - - // Is not local host. Just register service worker - return registerValidSW(swUrl); - }); - } -} - -function registerValidSW(swUrl) { - return navigator.serviceWorker - .register(swUrl) - .then((registration) => { - registration.onupdatefound = () => { - const installingWorker = registration.installing; - - installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { - if (navigator.serviceWorker.controller) { - // At this point, the old content will have been purged and - // the fresh content will have been added to the cache. - // It's the perfect time to display a "New content is - // available; please refresh." message in your web app. - console.log('New content is available; please refresh.'); - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); - } - } - }; - }; - }) - .catch((error) => { - console.error('Error during service worker registration:', error); - }); -} - -function checkValidServiceWorker(swUrl) { - // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl) - .then((response) => { - const NOT_FOUND_STATUS = 404; - - // Ensure service worker exists, and that we really are getting a JS file. - if ( - response.status === NOT_FOUND_STATUS || - response.headers.get('content-type').includes('javascript') - ) { - // No service worker found. Probably a different app. Reload the page. - return navigator.serviceWorker.ready.then((registration) => - registration.unregister().then(() => { - window.location.reload(); - })); - } - - // Service worker found. Proceed as normal. - return registerValidSW(swUrl); - }) - .catch(() => { - console.log( - 'No internet connection found. App is running in offline mode.', - ); - }); -} - -export function unregister() { - if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then((registration) => { - registration.unregister(); - }).catch(() => {}); - } -} From de906bf3709ac4ff54521509e20d8f99c011f0ec Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 31 Oct 2020 13:36:53 +0100 Subject: [PATCH 2/3] Added proper caching rules to nginx config included in docker image --- Dockerfile | 2 +- config/docker/nginx.conf | 17 ++++++++++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/Dockerfile b/Dockerfile index 86a5ebb3..e73f9b1a 100644 --- a/Dockerfile +++ b/Dockerfile @@ -5,7 +5,7 @@ ENV VERSION ${VERSION} RUN cd /shlink-web-client && \ npm install && npm run build -- ${VERSION} --no-dist -FROM nginx:1.17.10-alpine +FROM nginx:1.19.3-alpine LABEL maintainer="Alejandro Celaya " RUN rm -r /usr/share/nginx/html && rm /etc/nginx/conf.d/default.conf COPY config/docker/nginx.conf /etc/nginx/conf.d/default.conf diff --git a/config/docker/nginx.conf b/config/docker/nginx.conf index b401b0ee..1cb4901f 100644 --- a/config/docker/nginx.conf +++ b/config/docker/nginx.conf @@ -4,11 +4,26 @@ server { root /usr/share/nginx/html; index index.html; + # Expire rules for static content + # HTML files should never be cached. There's only one here, which is the entry point (index.html) + location ~* \.(?:manifest|appcache|html?|xml|json)$ { + expires -1; + } + # Images and other binary assets can be saved for a month + location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ { + expires 1M; + add_header Cache-Control "public"; + } + # JS and CSS files can be saved for a year, as they are always hashed. New versions will include a new hash anyway, forcing the download + location ~* \.(?:css|js)$ { + expires 1y; + add_header Cache-Control "public"; + } + # When requesting static paths with extension, try them, and return a 404 if not found location ~* .+\.(css|js|html|png|jpe?g|gif|bmp|ico|json|csv|otf|eot|svg|svgz|ttf|woff|woff2|ijmap|pdf|tif|map) { try_files $uri $uri/ =404; } - # When requesting a path without extension, try it, and return the index if not found # This allows HTML5 history paths to be handled by the client application location / { From 22cca598cacafa44eeed302afa7cf82194d4abee Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 31 Oct 2020 13:38:37 +0100 Subject: [PATCH 3/3] Updated changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cc4bf6de..08dff3f2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,7 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), #### Changed -* *Nothing* +* [#292](https://github.com/shlinkio/shlink-web-client/issues/292) Improved a bit how caching works by removing the service worker and adding proper HTTP caching config on nginx inside docker image. #### Deprecated