Progressive web apps are a hybrid of a website and an app that you might use on a tablet or mobile. Making one has a lot in common with creating a website, but with a few key extra files and concepts involved. It need not take a week of trial and error or trawling through a tutorial to get one up and running.
This post will show you how to make one in an hour that you can then host, use online as a website, and use offline and as a mobile app.
To give an example of what you could create, here is an example of one I made earlier based on Google’s codelab on web apps. It generates a QR code from the text you enter.
Responsive — Fits any form factor: desktop, mobile, tablet, or whatever is next.
Connectivity independent — Enhanced with service workers to work offline or on low-quality networks.
Installable — Allows users to add apps they find most useful to their home screen without the hassle of an app store.
Linkable — Easily share the application via URL, does not require complex installation.
To get started, clone this template repo (or just copy the bits you need). This includes the website project structure with everything you need to make an app.
├── 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
The main files to edit are:
Once you’ve made your app:
If you are using the Chrome browser on a Mac, bring up the Dev Tools window:
The Console tab
will show you the logs from the app. On the Application tab,
you can see the data stored locally.
Storage → Local Storage
shows you the message stored by the app.Cache → Cache Storage → template-pwa
displays the files you have set to cache and retrieve from within service-worker.jsIf you encounter problems, it’s often worth switching the service worker off and on again, then clearing the cache and reloading the app.
index.html
within the public folderNow try it out!
You should be able to visit the hosted app in your browser, and add it to your home screen on your mobile!
Recommended Courses:
iOS11 & Swift 4 Bootcamp - Build Amazing iPhone Apps
☞ http://bit.ly/2q9jUMP
iOS 11 / Swift 4 - Programming 101
☞ http://vrl.to/HyhnheWoM
iOS 11 & Swift 4: From Beginner to Paid Professional™
☞ http://bit.ly/2HdK9sZ
Practical iOS 11: What’s New in iOS 11, Swift 4 and Xcode 9
☞ http://bit.ly/2H2er44
iOS 11 & Swift 4: From Beginner to Paid Professional™
☞ http://vrl.to/rJtT_1Wjz
☞ Javascript Project Tutorial: Budget App
☞ Web Development Tutorial - JavaScript, HTML, CSS
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch
☞ Learn JavaScript - Become a Zero to Hero
☞ JavaScript Tutorial | Learn JavaScript Apps Like An Expert