Practical helper for Progressive Web Apps

Supporting resources for PWA development Practical helper for Progressive Web Apps

For the development of Progressive Web Apps, a few details are necessary. However, the creation of a corresponding offer is easy and comfortable. We have put together some handy resources for you.

To Create PWAs, there are some helpful Tools and resources.
To Create PWAs, there are some helpful Tools and resources.

Progressive Web Apps, in short, PWA, are a handy way of an App without the detour via the App or Play Store. For Web developers this has several advantages: on the one Hand, cumbersome approval processes to be bypassed, on the other hand, the cost and effort in comparison to a Native App massif in the borders.

The beauty of a PWA is, in fact, that it can be retrofitted to any existing Website to the Content without any detours as an App has to offer. With the following Tools and Web resources, the creation of a PWA is facilitated once again.

PWA: Icons and home screen create

With the PWA-Asset-Generator with a few hand all the necessary Asset can be created-Files for a PWA,

With the PWA-Asset-Generator with a few hand all the necessary Asset can be created-Files for a PWA,(Image: Rentrop / onderceylan)

An important Element of any PWA to the App Icon. This should be attractive and unique so that users keep the Web App on your Home Screen, and also like to click on. However, Progressive Web Apps can simply use existing Favicons of a Website.

Since the Icon is displayed on the Smartphone-Homescreen significantly larger, and there are a variety of resolutions for Desktop and mobile systems, should be Icons available in many size versions. Only in this way, the App is also attractive. A practical Tool for this purpose, the PWA Asset Generator.

This Tool are generated on the Basis of a source file the necessary Icon sizes and a Splash Screen for the App directly in the command line. If necessary, it also updates the manifest.json and the Index.html the Web-App. The PWA Asset Generator use, must first be node.js velvet NPM for Windows, MacOS or Linux installed. Then, the Tool with the following command allows you to …

npm install --global pwa-asset-generator

… on the System install.

Manifest.json via a Web Interface to generate…

The Web-Manifest-Generator facilitates the creation of the manifest.json

The Web-Manifest-Generator facilitates the creation of the manifest.json(Image: Rentrop / pwafire)

The PWA version is a mandatory manifest.json is not a rocket science, but requires a bit of Coding. Who has not in the mood, you can access to the Web-Manifest-Generator. Here all the necessary information such as the App Name, the Display type, various Icons, and linked platforms can be specified. The Generator automatically creates the necessary source code for the manifest file. This can, of course, then copied into a Text Editor and, of course, still be adjusted manually.

… or via the command line

The PWA Builder helps to create the necessary files for a PWA,

The PWA Builder helps to create the necessary files for a PWA,(Image: Rentrop / pwabuilder)

Of course, there is also the possibility to generate the necessary files for a PWA directly in the command line. Node.js is already installed, Linux and Mac put the user (or Windows User, use the Windows Subsystem for Linux, which is, quite simply, the pwabuilder CLI on your System:

npm install -g pwabuilder

This helps to generate all for a Progressive Web App files required on a swing – for all platforms. The operation is quite simple: With a simple pwabuilder all the required files will be created, in addition, there is a whole range of practical parameters, such as only the Web-App-Files for a specific Browser-create System or the App directly execute. Unfortunately, the PWA Builder is not quite up to date. Here and there, error messages may require manual Intervention.

PWABuilder.com

The pwabuilder-site, the site can be downloaded, analyzed, and missing elements for the PWA-operation directly.

The pwabuilder-site, the site can be downloaded, analyzed, and missing elements for the PWA-operation directly.(Image: Rentrop / pwabuilder)

Instead of on the command line of the pwabuilder can be used of course on his Website. The advantage of this solution is the graphical user interface, as well as the practical analysis of the existing and missing elements. The operation is very simple: First of all, the Website can be analysed in terms of their existing PWA-fitness. Then the help will be given for the missing elements.

Practically, it is that, for example, the manifest.json directly and downloaded can be customized. Also some of the default-Service-Worker has the Website in the offer. Other missing elements will be referred to in case of doubt, a source in the network in which exactly explains how the Element can be installed. Especially for beginners in the PWA-operating an enormous help.

Webpack

Webpack helps you to create more complex PWA-packages

Webpack helps you to create more complex PWA-packages(Image: Rentrop / Webpack)

To make the delivery of a PWA as efficiently as possible, use Webpack As the JavaScript module-Packer combines the Tool is Java-Script files and dependencies for the use in a web browser, or as a Progressive Web App. Also, front-end elements such as HTML, CSS, or image files can be laced on to a pretty package. A practical example for getting started with Webpack, there are at Github.

Microsoft Visual Studio Code

Visual Studio Code can help in the case of the PWA development,

Visual Studio Code can help in the case of the PWA development,(Image: Rentrop / Microsoft)

Of course, the question as to the appropriate Editor in the development of a Progressive Web App. Microsoft provides the free source code Editor Visual Studio Code for Windows, Mac, and Linux to the forefront. The Editor is recommended by many PWA developers.

VS Code provides a Plugin interface, and thus, a number of practical PWA-Extensions, with a few flicks of your insert. With this, the creation of a PWA necessary Codes is a breeze. In addition to the PWA functionality of Microsoft Visual Studio Code is used, but also simply as a very attractive Editor for any kind of software development.

pwafire.org The Online manual for the PWA development

The Website pwafire to help developers with the PWA-creation,

The Website pwafire to help developers with the PWA-creation,(Image: Rentrop / pwafire.org)

In the Developer area of pwafire.org huge collection of resources for the development of Progressive Web Apps: in addition to basic instructions and Code-Snippets, also a Browser Testing Tool, How-Tos for the development and AIDS in debugging. Conveniently, the site offers an extension for Visual Studio Code, with the help of the PWA makes development much faster.

(ID:47100725)

Ready to see us in action:

More To Explore

IWanta.tech
Logo
Enable registration in settings - general
Have any project in mind?

Contact us:

small_c_popup.png