Skip to content

GitLab

Commit 2f0beef8 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Added icons for full PWA support. Fixed handler for service worker cache updates.

parent 6eb4c2f0
Pipeline #5490 passed with stages
in 1 minute and 50 seconds
Expand all Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ 2f0beef8
This diff is collapsed.
public/apple-app-site-association deleted 100644 → 0
View file @ 6eb4c2f0
{
"webcredentials": {
"apps": [
"K5MMVK2UFR.edu.gmu.srct.whatsopen"
]
},
"applinks": {
"apps": [],
"details": [
{
"appID": "K5MMVK2UFR.edu.gmu.srct.whatsopen",
"paths": [
"/",
"/facility/*"
]
}
]
}
}
\ No newline at end of file
public/index.html
View file @ 2f0beef8
......@@ -28,8 +28,17 @@
<meta name="twitter:title" content="What's Open">
<meta name="twitter:description" content="Facility hours for George Mason University">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="What's Open">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" sizes="120x120" href="./assets/icons/whats-open-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="./assets/icons/whats-open-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="./assets/icons/whats-open-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/icons/whats-open-180x180.png">
<link rel="manifest" href="./manifest.json">
<link rel="shortcut icon" href="./favicon.png">
<link rel="shortcut icon" href="./assets/icons/whats-open-512x512.png">
</head>
<body>
......
public/manifest.json
View file @ 2f0beef8
{
"short_name": "What's Open",
"name": "What's Open",
"icons": [
{
"src": "favicon.png",
"sizes": "192x192",
"type": "image/png"
}
],
"related_applications": [
{
"platform": "play",
"id": "srct.whatsopen"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
"short_name": "What's Open",
"name": "What's Open",
"icons": [
{
"src": "assets/icons/whats-open-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/icons/whats-open-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/icons/whats-open-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/icons/whats-open-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/icons/whats-open-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/icons/whats-open-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/icons/whats-open-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/icons/whats-open-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
\ No newline at end of file
src/components/AppBar.tsx
View file @ 2f0beef8
......@@ -13,7 +13,7 @@ export default () => {
className={classNames('app-bar', isSearchExpanded && 'app-bar-search-expanded')}>
<Toolbar className={'app-bar-tool-bar'}>
<div className={'app-bar-logo-name'}>
<img src={'favicon.png'} className={'app-bar-logo'}/>
<img src={'assets/icons/whats-open-512x512.png'} className={'app-bar-logo'}/>
<Typography variant="h6" className={classNames('app-bar-title', 'app-bar-text-color')}>
What's Open
</Typography>
......
src/index.tsx
View file @ 2f0beef8
......@@ -7,16 +7,15 @@ import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import './styles/whatsOpen.scss';
import 'typeface-roboto';
import '../public/manifest.json';
import '../public/favicon.png';
import '../public/apple-app-site-association';
import { generateStore } from './store';
import { themeTypography, themeOverrides } from './theme';
import { isMobile } from 'react-device-detect';
import MobileLayout from './containers/MobileLayout';
import { useMediaQuery } from '@material-ui/core';
import { fetchFacilitiesAction, setFacilitiesAction } from './store/facility/facility.actions';
import { fetchFacilitiesAction, sortAndSetFacilitiesAction } from './store/facility/facility.actions';
import { fetchAlertsAction } from './store/alert/alert.actions';
import { IFacility } from './models/facility.model';
import { Workbox } from 'workbox-window';
if (isMobile) {
require('./styles/whatsOpenMobile.scss');
......@@ -42,19 +41,51 @@ const App = () => {
const store = generateStore();
// Event listener must be before the fetch calls
navigator.serviceWorker.addEventListener('message', async(event: any) => {
if (event.meta === 'workbox-broadcast-update') {
const { cacheName, updatedUrl } = event.data.payload;
/*
Must be before the fetch calls because the event listener
for the workbox-broadcast-update must be registered before
fetching.
*/
if ('serviceWorker' in navigator) {
const wb = new Workbox('/sw.js');
wb.addEventListener('activated', event => {
if (event.isUpdate) {
window.location.reload();
}
});
wb.addEventListener('message', async(event) => {
if (event.data.meta === 'workbox-broadcast-update') {
const { cacheName } = event.data.payload;
const cache = await caches.open(cacheName);
const keys = await cache.keys();
/*
This cache should only ever have one key.
If it does not, reset the cache so it is
correct in the future (might be a versioning
issue).
*/
if (keys.length !== 1) {
for (let i = 0; i < keys.length; i++) {
cache.delete(keys[i]);
}
return;
}
const cache = await caches.open(cacheName);
const resp = await cache.match(updatedUrl);
const resp = await cache.match(keys[0]);
const updatedFacilities: IFacility[] = await resp.json();
const updatedFacilities: IFacility[] = await resp.json();
store.dispatch(setFacilitiesAction(updatedFacilities));
}
});
store.dispatch(sortAndSetFacilitiesAction(updatedFacilities));
}
});
wb.register();
}
// Fetch facilities and alerts before app loads.
store.dispatch(fetchFacilitiesAction());
......@@ -63,11 +94,4 @@ store.dispatch(fetchAlertsAction());
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root'));
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
// This is the path on the server, not path in src.
navigator.serviceWorker.register('/sw.js');
});
}
</Provider>, document.getElementById('root'));
\ No newline at end of file
src/store/facility/facility.action-types.ts
View file @ 2f0beef8
......@@ -3,7 +3,8 @@ import { IFacility } from '../../models/facility.model';
export enum FacilityActionTypes {
FETCH_FACILITIES = 'FETCH_FACILITIES',
SET_FACILITIES = 'SET_FACILITIES'
SET_FACILITIES = 'SET_FACILITIES',
SORT_AND_SET_FACILITIES = 'SORT_AND_SET_FACILITIES'
}
export interface FetchFacilitiesAction extends Action<FacilityActionTypes> {
......@@ -15,6 +16,12 @@ export interface SetFacilitiesAction extends Action<FacilityActionTypes> {
facilities: IFacility[];
}
export interface SortAndSetFacilitiesAction extends Action<FacilityActionTypes> {
type: FacilityActionTypes.SORT_AND_SET_FACILITIES;
facilities: IFacility[];
}
export type FacilityAction =
FetchFacilitiesAction |
SetFacilitiesAction;
\ No newline at end of file
SetFacilitiesAction |
SortAndSetFacilitiesAction;
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment