Template Progressive Web App
A template you can use to quickly build a progressive web app that works online, offline, in a browser and as a mobile app.
Read my tutorial on Medium - How you can make a progressive web app in an hour – freeCodeCamp
Create your app
Clone this repo (or just copy the bits you need). The main files to edit are:
- public/index.html The main page for your app
- public/style/style.css) Add your own styling to this file
- images/icons Create square icons of the number of pixels for each size and save them here
- public/service-worker.js Update this with the list of files you want to cache locally
Using the app
index.htmlwithin the public folder
- Install a service worker for your browser, if you haven't already (eg Web Server for Chrome)
- Browsers may also ask if you want to include the app on your homescreen
├── README.md ├── firebase.json └── public ├── fonts │ └── roboto │ └── ... ├── images │ └── icons │ └── ... ├── index.html ├── manifest.json ├── scripts │ ├── app.js │ ├── jquery-3.3.1.js │ └── materialize.js ├── service-worker.js └── styles ├── materialize.css └── style.css
- JQuery A library for supporting quick and easy javascipt in your website
- For styling, this has materialize.js and css from materializecss.com. Remove or replace it if you prefer something different.
- public/service-worker.js Currently this will cache the app's files for quick local access. Read more about Service Workers here.
- public/manifest.json A JSON file specifies how your app appears to the user in the areas that they would expect to see apps (for example the mobile home screen), direct what the user can launch and more importantly how they can launch it. Read more about this here.
- Sign up to firebase
- Download and install the firebase CLI tools
- Within your project folder:
Here is an example I have made, hosted on firebase: