Over the past couple weeks I have had the privilege of deep delving into Progressive Web Apps. In case PWA is new to you, I will give you a quick rundown.
PWA is a relatively new format for building websites that can be installed on mobile devices or even desktops as applications. You’re website still functions as a website, but gives users the option to install it run it like a normal app instead of in a browser. If I don’t say so myself, “It’s really cool”.
Here are just a few of my favorite features:
- You can build in offline caching which will allow your site to be accessed even when the user is offline.
- Your site gets to load in a cool app interface instead of a vanilla browser.
- The app matches whatever styles you provide to give your users a full immersion experience.
- There is support for push notifications.
The magic behind most of these features is a little thing called a “service-worker”. A service working is a JavaScript file which gets installed automatically into your viewers browsers and runs it’s own process. This process gets access to things like caching and notifications, all on it’s own thread.
The second part is called a “manifest”. This is a JSON file which lets the app know what to call itself, what icons to use, what colors to use, etc. A meta tag in the HTML content of the site lets the browser know where to find this manifest.
Put it all together, and you get a website that may be installed as an app! In fact the site you are viewing right now has this capability. If you browser supports it, you have probably already seen an “Add To Home” bar on the bottom which lets you install this site.
While working on my implementation, I was able to find some great tools out there, but nothing that covered all bases. In my normal fashion, I forked some code, and published a couple open source libraries for working with PWA.