How to build a PWA from scratch?
Want to build your first app or save time? Keep reading!
Posted by Maria Last update April 15, 2021
Subscribe Omertex in TelegramSubscribe
PWAs gain their popularity during the last years, so a lot of users try to find the easiest and effective method of creating this type of apps.
So if you are a newbie in PWA development, the easiest way is to start with Your First Progressive Web App Google’s guide.
But if that is not your first PWA, and if you are searching for some tools that can help you and save a lot of time, this article is for you!
Well, let’s start with frameworks!
Step 1: Use React (a framework from Facebook)👨💻
There are some kinds of React, but in Omertex we use ReactJs cause: 1) we can trust its creators and millions of people around the world, who use this kind and create their apps without any circumstances;
2) we can easily convert PWAs in native apps or desktop apps, using ReactNative.
Each component, the user interface is created of, can be displayed both on the app or browser (using ReactNative or Node.js, respectively).
Step 2: Use Polymer templates from Google📃
Polymer Project was created to make “the web better”. According to high modern standards, libraries and tools, they make it possible to save your time, during PWA creation. Google’s open-source project often is updated to synchronize new apps and existing ones.
What concerns apps’ design, Polymer template automatically uses Google’s Material Design.
Step 3: Create dependency graphs using Webpack 👀
Polymer is a great start. The further process and code are up to your skills, or skills of your team.
Thanks to Webpack, the creation of dependency graphs became much easier. You don’t need to link to all the JS files at the bottom of an HTML page; the number of calls to the server decreasing and the speed of your final product increasing.
Step 4: Manage Model-View-ViewModel(MVVM) bindings between HTML and JSd HTML with Knockout🙌
If you are a newbie in PWA development, it will be easier for you to work with it due to a package of attributes, that you would have to write Knockout is easy enough for a novice developer to learn quickly. And it comes with many attributes that would otherwise need to be written in competing frameworks.
Step 5: Use AMP from Google to compress Images / JS🌆
AMP (Accelerated mobile pages) is an open-source HTML framework. It allows you to load web pages quickly in circumstances of low network speed.
Moreover, Google supports AMP Cache Lastly, Google supports AMP Cache for AMP items that can be used for free. In addition, Google raises AMP-based sites in search results.
Step 6: Test code with Lighthouse from Google⌨
The last part but a significant one is testing of your app.
In this way, Google’s Lighthouse is an open-source, automated tool for improving the performance and quality of your web apps. You can install it as a Chrome plugin (moreover, you can find a guide there).
After Lighthouse is installed, you can get the report, which contains a lot of details.
It should give you information about:
- Page speed (ideally high speed)
- The site is a progressive application.
- Full security of the network connection
- Possibility to download an app
- The user-installed app will update automatically
- The same design for all devices
- Mobile-friendly design
Each of these points give you additional information about specific technologies you can add or change to improve your PWA performance.
👉To know more about PWA and it’s advantages over another kinds of apps and other secrets, read our next article: PWA vs SPA👈.
So, it’s just a part of the tools, you can use to create and improve your PWA. Thanks to the popularity of progressive web applications, every month there appear more and more new tools and updates for the existing ones. You can experiment, and create an app you want! But if you have some questions, or you are a developer, who is searching for a team, contact us!