This project was submitted as coursework for the Udacity MWS Nanodegree. Students were provided with the initial restaurant reviews website, which can be found upstream of this repository. The initial website did not have a responsive design or standard accessibility features, and in fact did not even function well on a desktop display. The task of students was to fix these problems, and moreover to convert the static site into a progressive web app (PWA) by implementing offline first functionality.
In completing this project I implemented the following design and accessibility features:
- a mobile first redesign with major layout breakpoints targeting phones, tablets and larger devices,
- appropriate tab and focus control to support keyboard and screen reader users,
- appropriate ARIA labels and semantic page to support screen reader use.
To convert the static website to a progressive website I performed the following general steps:
- created site icons in various resolutions,
- created a web app manifest to enable mobile browsers to identify the site as a PWA,
- cached the HTML skeleton, CSS, JS, icons and other resources offline using a service worker and the Cache API,
I also ensured that the database based functionality worked offline first:
- cached JSON responses from the database server using IndexedDB,
- responded to database queries using the local cache first to ensure fast responses with no connection or a poor connection
- queried the remote server in the background to replace stale data as soon as possible,
- allowed the user to mark favorites and submit, edit and delete reviews offline,
- synced user favorites and reviews with the server as soon as possible,
- notified the user with an appropriate (ARIA-friendly) banner when working in offline mode.
yarn install
yarn start
It is also necessary to start the database server. If yarn
is unavailable, npm may be used instead
npm install
npm start
Dependencies are stored in package.json and can be installed with
yarn
yarn install
The site build process is automated with gulp and runs automatically
as a postinstall task after installation. To build manually run
gulp build
After building, the site can be served from public/ using an appropriate
webserver. A simple Express static webserver is provided for
convenience. To serve the site on http://localhost:3000 run
yarn start
or
node server.js
If in production mode (i.e. NODE_ENV=production), then CSS and JS will be
minified. Otherwise, they will remain in cleartext and the development server
will be started automatically when the build is complete.
- The map is provided using leafletjs with Mapbox.
- IndexedDB is used via the promise based interface IndexedDB Promised.
- SVG icons (modified for fill and color) from the Feather icon set (MIT license).
- The app icon and placeholder image use the Poiret One font (Open Font License).
