Recipes for Web Developers: Your First PWA With the Service Worker Cookbook
PWA, progressive web apps, can only become the standard over the native mobile apps if they have a wide array of supporters. Every web app can be a progressive web app.
Mobile Web Usage is Growing Constantly. (Photo: Stocksnap)[/caption]
Essentially, PWA are websites. It's your choice if you turn your ordinary website into a progressive one, as a PWA is nothing more than an enhanced version of existing websites that work on mobile. Enhanced means that it has features and abilities that were previously only known from the area of native development. This new generation of web apps can provide a lot of the functions of today's mobile apps, making the latter redundant in many ways.
Apart from the fact that a PWA makes the web a bit more open and free, a web app has its very own advantages. A web app can be found via the Google search and can be accessed and used directly. It is not required to localize and install it from one of the app stores. Web apps don't need to go through the app store process for every update and undergo an extensive update installation.
PWA unite the advantages of native apps regarding the interface usage, the local data storage, the optional display notifications, the uncomplicated and fast availability of web-based offers, and their immediate up-to-dateness that does not require any update processes.
The word "progressive" in the name means that, at the core, the app first shows a mobile view of a URL, and then reacts to the abilities of the user device and browser. This makes sure that a progressive web app works on all devices and browsers, only to different extents, progressively adjusting to the given environment.
Service Workers Cookbook: Landing Page (Screenshot: Noupe)[/caption]
As Service Workers don't have a UI, it makes sense to set up a collection of scripts that cover the different basic functionalities. These recipes can be found in Mozilla's Service Worker Cookbook, for instance, which has amassed a significant repertoire of standard features.
This mainly includes features that every PWA needs to have, like data caching, or fallback technologies for missing online connections. All of the cookbook's recipes are usable out of the box and are documented thoroughly. The demos are designed in a way that the Firefox developer tools also hand out some useful information if you use them simultaneously.
If you want to look deeper into the basics first, I recommend the small overview of learning resources called Awesome Service Workers
Featured image by engin_akyurt on Pixabay
What's a Progressive Web App?
Progressive web apps are web offers that can be used on mobile devices, where they adjust to the abilities of the device and browser that they're being used on. The more powerful the device and the browser, the more performant the app. For their creation, open web standards are being used exclusively. Progressive web apps are not able to access all device functions yet, making them unfit for some application cases. [caption id="attachment_103664" align="aligncenter" width="1024"] Mobile Web Usage is Growing Constantly. (Photo: Stocksnap)[/caption]
Essentially, PWA are websites. It's your choice if you turn your ordinary website into a progressive one, as a PWA is nothing more than an enhanced version of existing websites that work on mobile. Enhanced means that it has features and abilities that were previously only known from the area of native development. This new generation of web apps can provide a lot of the functions of today's mobile apps, making the latter redundant in many ways.
Apart from the fact that a PWA makes the web a bit more open and free, a web app has its very own advantages. A web app can be found via the Google search and can be accessed and used directly. It is not required to localize and install it from one of the app stores. Web apps don't need to go through the app store process for every update and undergo an extensive update installation.
PWA unite the advantages of native apps regarding the interface usage, the local data storage, the optional display notifications, the uncomplicated and fast availability of web-based offers, and their immediate up-to-dateness that does not require any update processes.
The word "progressive" in the name means that, at the core, the app first shows a mobile view of a URL, and then reacts to the abilities of the user device and browser. This makes sure that a progressive web app works on all devices and browsers, only to different extents, progressively adjusting to the given environment.
Service Worker to the Rescue
The heart of each PWA is the so-called Service Worker that enables the advanced functionalities. A Service Worker is - briefly said - a JavaScript that can work in the background of a web application. This even works when the website is not open in the user's browser. [caption id="attachment_103662" align="aligncenter" width="1024"] Service Workers Cookbook: Landing Page (Screenshot: Noupe)[/caption]
As Service Workers don't have a UI, it makes sense to set up a collection of scripts that cover the different basic functionalities. These recipes can be found in Mozilla's Service Worker Cookbook, for instance, which has amassed a significant repertoire of standard features.
This mainly includes features that every PWA needs to have, like data caching, or fallback technologies for missing online connections. All of the cookbook's recipes are usable out of the box and are documented thoroughly. The demos are designed in a way that the Firefox developer tools also hand out some useful information if you use them simultaneously.
If you want to look deeper into the basics first, I recommend the small overview of learning resources called Awesome Service Workers
Featured image by engin_akyurt on Pixabay