Sometimes called PWAs, progressive web applications deliver a native application experience online. They have many contributing factors, the most notable of which is the ability for the application to function when offline, as well as online. To do this, service workers are utilized.
Allowing your web app to work offline will mean you can provide functionality such as push notifications. These rich experiences will also be available to the web-based application through devices such as the service worker. This script will work in the background of a browser, regardless of whether the user is on the right page or not, and permit these same notifications or even background synchronization.
PWAs offer the reach of the web but are fast and reliable, similar to desktop applications. They can also feel engaging, like mobile apps, and can offer the same immersive experience. This demonstrates a new level of quality for applications. They can also play a part in cross-platform compatibility.
Responsive design was the web's first push in this direction, but the push to make the internet more universal has led us to PWA. To leverage your application's potential, you should use a progressive approach. For more information, see this Google resource on the subject: https://developers.google.com/web/progressive-web-apps/.
When using Webpack, the service workers need to be registered so that you can start integrating desktop functionality into your web-based PWA. PWAs are not designed to be installed locally by the user; they work natively through web browsers.
Service workers can be registered by adding the following to your code – in this example, this is an index.js file:
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-
worker.js').then(registration => {
console.log('SW registered: ', registration);
}).catch(registrationError => {
console.log('SW registration failed: ', registrationError);
});
});
}With this complete, run npm build – you should see the following output in the command-line window:
SW registered
Now, the application can be served with npm start in the command-line interface.
A PWA should have a manifest, a service worker, and possibly a workbox to wrap and protect the service worker. For more information on the manifest, see Chapter 3, Using Configurations and Options. Workbox is a plugin that can be installed in the command line using the following command:
npm install workbox-webpack-plugin --save-dev
An example configuration of the Workbox plugin can be seen here in a hypothetical webpack.config.js file:
const WorkboxPlugin = require('workbox-webpack-plugin');
new WorkboxPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true,
}),
The options inside the { braces will encourage the service workers to get to that point quickly and will not allow them to strangle previous service workers.
As your project becomes more complicated, you may consider using related task runners. Let's take a look at this in more detail.