DEV Community

loading...
Cover image for PWA in 20 Minutes!

PWA in 20 Minutes!

zimlearn profile image Dr Abstract ・1 min read

Alt Progressive Web Apps PWA

Progressive Web Apps (PWA) are how Web apps can act like Mobile apps. People can save them to their device home screen and launch them from an icon just like a mobile app. They can then open in full screen without the Browser interface. They are also loaded from cache so are fast to load and can run offline. PWAs can access device APIs as well.

Here is a 20 minute video that takes you through the following:

  1. Adding a Manifest
  2. Adding a Service Worker (for caching)
  3. Adding an install message

Here is the PWA mobile page for ZIM on the Canvas including and example ZIP and resource links.

Making a mobile app has never been easier. This replaces 70 steps of work to do something similar in Phone Gap / Phone Gap Build. However a main difference is that the mobile app is not in stores. PWAs can be in stores - see Trusted Web Activities for Android and perhaps this article for Apple - or turn to Capacitor.

An important aspect of PWA that we did not talk about is getting a good LightHouse rating to ensure a good user experience.

Discussion (1)

pic
Editor guide
Collapse
zimlearn profile image
Dr Abstract Author • Edited

We have now created a PWA tool to let you do this in FIVE MINUTES! Woot zimjs.com/zapps.html
Alt Text