• Live version
• Concept
• Installation
• Usage
• Features
• External Data Source
• Packages and Tooling
• Functionalities
• Optimizing
• Critical Render Path
• License
• Extra

This is the repository for frontend-applications CMD 2020/2021. Live version: https://owstats-pwa.herokuapp.com

The idea of this website is that you can search for your account, and see some basic statistics from your Overwatch account. You can find your personal information like level, games won etc. And you can find some statistics about your heroes you played last season of competitive. Disclaimer: You have to play Overwatch to see your stats.

Clone the repository:
https://github.com/HappyPantss/progressive-web-apps-2021.git

Install NPM:
npm install

Visit the local website in your browser with:
Start the server and go to https://127.0.0.1:5500

Start the local server on port 3000:
npm run start

Use npm run dev if you're changing the code, so you only have to refresh the page to see the changes.

Visit the local website in your browser with:
https://localhost:3000/

You can see all your heroes you played this season. If you click on a specific hero, you can see the detail statistics.

The API I use is from Ovrstat. The overstat API is an unofficial Overwatch Stats API written in Go. Accesing its main API endpoint is extremely simple.

https://ovrstat.com/stats/{platform}/{username} // For example: /pc/Sergini-21678

Response: https://ovrstat.com/stats/pc/Sergini-21678

• ejs: EJS is a simple templating language that lets you generate HTML markup with plain JavaScript.
• express: Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
• gulp: Gulp is a task runner built on Node.js and npm, used for automation of time-consuming and repetitive tasks involved in web development like minification, concatenation, cache busting, unit testing, linting, optimization, etc.
• gulp-autoprefixer: Autoprefixer is plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.
• gulp-clean-css: Clean-css is a fast and efficient CSS optimizer for Node.js platform and any modern browser.
• gulp-concat: Concat will link all your files together.
• node-fetch: A light-weight module that brings Fetch API to Node.js.

When visiting the site, you will be redirected to /overview, this is the homepage. When choosing a hero for checking there details, you go to /heroes/:name. You can change the name of the hero to go to their detail page.

The Service Worker saves the files you need for the specific page that you're on in the cache. Not only the .js and .css files are saved, but also the routes. This wil make sure the files will be available when offline. The files are saved in the cache when you're online, and are being served when offline. When a page isn't found, you're going to a offline page.

One of the things I've done to optimise my site, is minifying my CSS. To make this work, I used the npm package Gulp. To see the results of implementing this, see Tests.

A big issue, is that I have alot of images. For reasons of ease, I used links for the images. And I thought this would help for optimising reasons. But I wanted to compress the images for beter performance. So I downloaded all images, and set them in my project.

One big fix would be compressing my images. Some of them were already not that big, but it always helps to compress them. So I compressed all of my images with the tool tinypng. Compressing with tinypng makes sure the size of the images drops, but the quality stays.

The time your spending waiting until you see all the elements for the first time.

The time your spending waiting until you see all the elements after the first time.

How quickly a page can load and render all of its visual elements to the screen.

Time to interactive is the amount of time it takes for the page to become fully interactive.

Time To First Byte is the amount of time spent waiting for the initial response. The time you have to wait for the response going from the client to the server, and back.

This project is released under the under terms of the MIT License.

Oussama Fahchouch - ofahchouch-gh
Robin Frugte - RobinFrugte97
Stan Bankras - StanBankras