There are so many ways to approach tech projects, from iPhone apps, and online portals, to SaaS platforms and eCommerce websites. Which approach should you choose, and how do you pick the perfect platform or combination of technologies to build your product or solution? And, is Progressive Web App Development (PWA) right for you?
And more importantly, is the Progressive Web App approach right for you?
By looking at your options in detail and understanding more about the platforms you can use to get online, you can decide what works for you, your business, and your users. Each has its benefits, but also trade-offs.
We have put together this detailed guide to one of the most popular ways of launching your app project to help you decide, with a focus on how to create a Progressive Web Application (PWA for short). Learn more about this reliable web app approach, how it could benefit your brand, and how you can build your own.
In this article:
- What is a Progressive Web Application?
- Server Structure of a Progressive Web Application
- PWA Benefits
- PWA Disadvantages
- PWA v.s. React Native (Features and Trade-Offs)
- Benefits of a React Native App
- Progressive Web App Capabilities (What can a PWA do)
- Back End Code Technologies (The Options and Considerations)
- How to Create a Progressive Web Application (7 Steps)
- Start Building Your Progressive Web Application
What is a Progressive Web Application?
From YouTube and Google Docs to Twitter and The Washington Post, it seems that every well-known company now has a progressive web application, and every development teams working on this tech stack raves about it.
But, what exactly are they?
The name was coined by Google in 2015 when they designed the first progressive web app to "build better experiences across devices". PWAs are a blend of traditional, browser-based websites and mobile apps. They combine the latest technologies in both fields to create a user-focused, modern solution to online experiences. This app category takes advantage of several clever web-browser techniques, such as Cache developments, which mean that they can continue to function even if you are offline, letting users access what they need wherever they are.
Several basic principles make up the foundations of a Progressive Web App. The first is that they work across devices and many different web browser brands, including Chrome, Safari and Edge. Some browsers may offer more advanced features and be more suited to the PWA, but it will still function on less-evolved browsers too.
With automatic updates running on most browsers, you would think this is becoming less important for apps to work on older versions. However, you would be surprised by how many large or public sector organisations still have a slow update cycle with the web browsers they use. These apps are designed to be responsive across devices sizes and orientations, switching seamlessly from desktop to tablet to mobile, and it will function with the ease of a native app.
Traditional mobile apps require installation from the relevant app stores. You can still choose to deploy your Progressive Web App in this way if you think that is best for you, but you don't have to. Unlike app-store apps, you can install PWA's without using an app store and instead accessed over the web, encrypted using HTTPS to keep the user secure. You can even add a home screen icon to access PWA's installed in this way to make it feel like a more mobile-appy experience. Easy to share, engaging, and with the ability to be indexed by search engines, progressive web apps offer an entirely new way to browse, work, and play.
Client-Server Structure of a Progressive Web Application
Every time you access a progressive web application, you set a range of processes into motion to load the front end interface depending on the server setup, and how the web-app is optimised. One process is Server-side and the other client-side.
Server-side rendering:
The first is server-side rendering (SSR). When you click on a PWA, the server receives a request to find the suitable HTML files and page content and renders it. This request is made for every separate page visited, so it's excellent for quick-page loads but can be a pain when navigating many different pages as the page needs to be refreshed each time.
Client-side rendering
The second option is client-side rendering (CSR), which only sends one request to the server. From this, the entire skeleton of the PWA will be loaded, making for seamless navigation but a longer initial loading time.
You can design PWAs blend both client and server-side rendering techniques in-one. By doing this, the site can be rendered by the server and the contents cached, with new client-side rendering only occurring when needed. The PWA will achieve superfast loading speeds whilst keeping smooth navigation, creating an experience focused on the user. The way server or client-side rendering is optimised may also impact your search engine performance, making it easier for engines to navigate your app content and index it for users to find.
This hybrid method also follows offline-first principles. This method is the idea of caching the website, with no connection needed to render it when the user next loads the page. Google Docs is an excellent example of a PWA that has adopted this technique by enabling users to create and edit documents on the go without internet.
One of the great things about progressive web apps is that your development team can choose which of these techniques to use when building your app, giving you control over whether to allocate your development resource based on your business priorities.
There are tons of various development frameworks available for building your Progressive Web Application in, including ReactJS, Angular, VueJS, Polymer, and PWA Builder. It's no secret that the React Framework is our favourite choice.
At Scorchsoft, we have experience delivering both PWA and Native applications using React and React Native. Both are excellent choices, so we think you must understand the benefits and downsides to pick the right approach for you.
Benefits of building a Progressive Web Application
PWAs are the next generation of web experience, and here are some of the main reasons that businesses Worldwide adopt this approach for their apps:
1. PWA's are great bang-for-buck
PWAs are more cost-effective than the alternative approaches because you can build them once, and then deploy to multiple platforms and app stores. Compare this to launching a native mobile app where you have to re-code functionality again, and you can see why this saves a lot of money in the form of repeated effort.
Bear in mind that these low-costs don't mean that quality is compromised - far from it! It's simply the ease of building that makes PWAs cheaper, not the quality, or the availability of most commonly used features. This said, there is a difference in the "feel" of the user interface between Native apps and Progressive web apps, which we will elaborate on later in this article.
2. PWA's Are Easier to Maintain
If you deploy your app via the web, then it is significantly easier to maintain when deploying via the app store. Once you are ready to release, you can deploy your code, and you're done. By comparison, mobile apps require submission and approval by Google and Apple, which can slow down the process. If your app were unfortunate enough to have your release rejected, it could result in additional unplanned costs to implement their request.
In the long-term, this is going to save you a lot of time if you're planning on updating the PWA yourself, and a lot of money if you'd have to hire someone else.
A PWA is also easier to maintain because it automatically updates for you. Simply re-visit the page, and voila, they have the latest version. With a PWA, post-launch maintenance becomes as easy as opening a browser.
3. Progressive Web Apps Have SEO Advantages
Search engine optimisation (SEO) is the process of pushing your website or web app up search engines ranks – you want to be on page one for your target terms, ideally at or close to the top. Ranking highly in the search results makes it easier for potential customers to find your website.
Like a website, your PWA will appear in search results just as a traditional website would, and you can decide what appears as a web page by customising routes for crawling by search engines. If you pay attention and optimise performance measures such as your loading speed, the security of your site (use HTTPS for bonus points), and the keywords you're using, you can push your PWA higher up the ranks and increase your traffic. Improve your app SEO further and get a few credible sites to back-link to your app.
4.PWAs are Responsive Design (by device, and screen size)
As of January 2021, 55.55% of all internet browsing happened on mobile devices, 41.61% on desktop computers, and 2.84% from tablets. People are browsing from such a wide range of devices now that you can't release your app for a single device type, your audience will be using a broad range of everything! That means that creating responsive cross-device applications is essential.
Progressive web applications work everywhere. Users can switch between the application on various devices without disrupting their user, making it easy for them to access your PWA wherever they are including those devices they have at home or when they're on the go.
PWAs are also adapt to screen size. Rather than manually adjusting your features and design to suit smaller mobile screens or wider desktops, the PWA will adapt intuitively.
5. PWA's Offer an App-Like Experience
The invention of the mobile app revolutionised user-experience with user-focused features and attractive interfaces. The Steve-Jobs effect saw product owners stop thinking of their software as a highly-technical tool for expert users, and positioned the app at a much wider audience. An audience that cares about the look, the feel and the intuitive flow of using the application.
Apps are simple but effective, which is what modern-day users want. Unlike a flat website, Progressive Web Apps give users a more rich experience, delighting users with a broad range of capabilities that are both rich and user friendly. The performance of a website with the look and feel of a mobile app.
They're quick, responsive, and with rich features such as database access that delivers innovative functions.
6. PWA's Can Work Offline
As we discussed earlier, service workers form part of a progressive web application structure, reading and processing its data sent from the Back End Server to the user's web browser. This service worker layer also caches requests, soring a copy locally for access even if the internet goes down. Developers can use Local Storage on your device to store data, such as images or audio, which is downloaded when an internet connection is present and available for access when it isn't.
Offline functionality offers a range of benefits to your business. For example, the Starbucks app This lets users browse their drinks menu and claim reward points without the need for an internet connection, a useful feature when the user's phone signal might be unreliable in some of their café's.
7. Fast Loading Speeds
Caching has a double benefit granting PWAs superior loading speeds to online-only web apps.
Once the service worker or local storage has a copy of the files or data, this app may not need to reload this information again for a long time. The app reduces the number of server calls required by accessing the cache.
8. Push Notifications
Did you know that mobile apps see up to 3 times more retention when they use push notifications?
Push notifications are alerts sent to the user from your application that will pop up on the device they're using, even when the application isn't in use. If you've ever had an alert that someone's like your post or that there's a sale on an app you have, you've received a push notification.
A significant advantage of PWAs is that they enable push notifications across device types. This a huge benefit for marketers, allowing companies to encourage users to keep coming back to your web app and increasing user retention over time.
Though, be warned! Intrusive push notifications do the opposite, annoying users and increasing the likelihood that they uninstall your app. Use them wisely, give users control to change their preferences, and design notifications that enrich the user experience.
9. Bypass the App Stores
Although you have the option to deploy your Progressive Web App via the app stores, you don't have to. There is a range of perks that come with bypassing the app store.
You will lose 20% of users on average from when they make their first contact with an app to the point when they start using it.
The funnel that users follow when installing an app for the first time is full of places to back-out and change their mind, and that is on top of the work involved in getting a potential user to download an app in the first place!
Thankfully with a PWA, you don't have to worry about that. Progressive web applications remove the risk of losing users completely by ditching the app store and exiting the funnel. Instead, the user can go straight to the PWA web address, use it immediately, or "add to home screen" to instantly access their device. It's a much simpler method that results in fewer lost customers.
App store requirements are strict, as we mentioned before it's common for Google and Apple to reject your submission if they don't feel it meets their lengthy guidelines.
Meeting these app store standards can be a time-consuming and costly process, causing lost time in the market, and increased development rework costs.
Strict app store terms have caused a lot of backlash from big businesses over recent years.
Spotify created "Time to Play Fair", a website that's actively protesting against Apple's app store, complaining about the excessive 30% charge for in-app purchase systems, and blocking communication between businesses and their users. Daniel EK, Spotify CEO, highlights how Apple' limit choice and stifle innovation at the user experience's expense.
These stores don't have a good reputation at the moment, and PWAs are an excellent way of avoiding them. Giving you the freedom to do what you want with your application, and avoid hefty fees from stores, choose to build a progressive web application.
10. Security
Security has become a buzzword in technology. Keeping your applications secure is vital to building trust with your users and creating a positive brand image, especially if you're taking payments or storing user data.
A PWA is a safe option when configured to use HTTPS, a technology encrypts your data, ensuring that potential hackers can't intercept information passed between the browser and server. This security is essential in a world where data hacks and breaches are becoming increasingly common.
Disadvantages Progressive Web Apps
Progressive web applications have plenty of benefits, though that doesn't make them ideal for everyone. You need to be aware of their downfalls to know whether this is the best tech approach for you.
1. Lacking a UI Native Experience
As we discussed earlier, the end-user loves the native experience achieved by modern apps. Apps are easy to use, feature-rich, and have features to improve user experience. Unfortunately, some of the native mobile app components that users enjoy aren't available on PWAs. It means that PWAs, though cost-effective, may deliver everything you require to meet your commercial objective.
An example of this is the Facebook mobile app vs the Facebook mobile website. The website doesn't contain any native features and is, therefore, more subtly a less enticing user experience. The components are harder to click on, the loading times are usually longer, and it's generally harder to navigate. Apps built with the likes of React Native that harness the native experience are often bolder and better than their website alternative.
2. Less Access to Mobile-Device SDK Functions (Unable to Access All Device Features)
Developers of mobile apps have access to SDKs (software development kits). SDKs compile various programs and tools such as code samples, documentation, processes, and guides. These make it simpler to create apps for multiple platforms. Say, for example, that you're building an iOS app that shares content directly to Facebook. Rather than creating a brand new piece of code, your developers can use Facebook's SDK for iOS and find the code that will work for your app.
Unfortunately, because PWA frameworks can integrate these SDK features only after native apps have access, fewer SDKs are out there for Progressive Web Applications. This lag means new mobile-app functions may take a month or two before the PWA frameworks catch up. Without SDKs available at point of launch of a new device feature, developers will have to build a PWA without the option into their framework rather than have the chance to see and mimic code that already exists unless they wait for a while for the PWA development resource to catch up. While it's not a deal-breaker, it might be frustrating if you have to wait longer than your competitors before implementing a new mobile operating system capability.
3. High Battery Usage
PWAs are a structurally more complex codebase than Native; they are a higher-level language built on top of a Native codebase. Though this complexity is abstracted and can speed up development time, mobile devices have to put more effort into interpreting that code. This increased interpretation time, coupled with higher use of native libraries, can lead to higher power consumption.
Every PWA is a web app, packaged into a web browser that the user doesn't get to see. For a PWA to run it must always load that underlying web browser with all of its capabilities, even if 90% of the functions provided by this web browser code is not required. This redundancy can increase the install size, memory usage, and contribute to battery drain.
This consumption may not be noticeable on a mains powered device, such as desktop or laptops stat on a desk, but is noticeable for mobile device users. If users spot that your PWA is draining their device's battery, there's a chance they'll stop using it.
4. Misses Out on App Stores
We've discussed the benefits of PWAs side-stepping the app store, but what about the negatives?
PWAs miss out on easy searchability and heightened visibility via these platforms by not being available on app stores. If a user wants to find you via the app store and perform a search, but you aren't listed, they may not try a web search to see if there is a web version available.
Of course, developers and marketers can work around this issue. You can still ensure your audience notices your PWA by using other marketing channels, like SEO. But if a large chunk of your audience browses app stores, you may still be missing out.
Fortunately, this downside is easy to overcome, as it is possible to use tools like Cordova and Phone app to deploy your Progressive Web App to the app stores.
5. Not Compatible With Older Devices
Progressive web applications frameworks are continuously updated to support the latest functions released natively by Mobile Device manufacturers. Each new version drives new functionality; however, this may be at the cost of support for older devices.
With each release, those who maintain these frameworks must decide whether they should allocate extra resources to support an operating system version redundant in six to twelve months. This release cycle usually means that PWA frameworks drop support for older operating systems much sooner than their Native counterparts.
For example, at the time of writing on Apple products, PWAs will only ever work on iOS 11.3 and later.
Fortunately, many people don't use these old devices and browsers anymore. If only 1-2% of your target audience do, is it worth changing your plans to cater to them?
You'll have to weigh up the importance of PWAs and older devices for your business to find out if you should go ahead with this approach or opt for a Native app instead.
6. Longer to Install Mobile Features
Developers often aren't as familiar with installing features on a PWA as they are with mobile apps.
If this is the case, they'll have to learn how to install them before they can. If you're trying to build a PWA quickly, this could slow down the development process and become a limitation.
7. Some App features don't feel right when applied to web apps
Some mobile app features don't integrate naturally into web applications. Users familiar with mobile devices may struggle to use the same features on a PWA. The users might feel uncomfortable with them or stop using them altogether.
An example of this is push-notifications. Users are familiar with the idea of receiving push notifications on their mobiles but not on a web browser, and some users find the concept of browser notifications intrusive and annoying. They may be more likely to decline them.
Another good example is access to your device GPS location services. Sure, if you are using a rich map application then the use-case is clear, and you might be likely to accept, but what about a web app where the need for your GPS access isn't as obvious, such as showing search results ordered by location. A user may decline the request to access their GPS compared with if you made the same request on a mobile app installed via the app store.
PWA v.s. React Native (Features and Trade-Offs)
Fortunately if PWAs you read this list and decide that a building your app as a Progressive Web App isn't for you, there are still plenty of great alternatives out there.
One popular option is React Native, an open-source Facebook-designed framework that lets you develop native apps. React Native and PWAs are often pitted against each other, so let's see how they compare.
Mobile-First
The main difference between React Native and PWAs is their responsiveness.
React Native is the way to go as a mobile-first development tool to target mobile users. If you want an interface that will work across devices, including desktop, then opt for a progressive web app.
Cost-Effective Development
Both PWA's and React Native apps allow you to build once, and deploy to both iOS and Android devices, making them cost-effective options. By comparison, if you wanted to create a Native app and have a web version, and you did not use a cross-device framework like React, then you may have to build the same app three times for each platform!
More builds mean more cost, which might be fine if you are Google or Facebook, but this is rarely an acceptable option if you are launching an app on a budget or have limited resources.
Development Experience
You'll need an experienced developer to create either a PWA or a React Native app. Neither application development approach comes out ahead here; it all depends on your or your development team's knowledge.
Having said that, if you're coding your application yourself and are a beginner, PWAs are the better option. Progressive web applications are much easier to test using a web browser, whereas React Native apps require testing via emulators and real tangible mobile devices. This testing limitation means there is a more significant learning curve to build React Native apps and requires a broader range of tools to get the job done.
Machine Learning
By incorporating machine learning into your PWA, it'll be able to use data to predict future outcomes, trends, or behaviours. You can use machine learning for various purposes, such as preventing fraud during transactions and recommending products to clients based on previous purchases. Machine learning can also automatically convert languages and recognise images
You can build PWAs that harness machine learning on development programmes such as Azure, AWS, and Google Libraries. React Native applications also support machine learning.
User Interface Design
If you need a smooth user interface, React Native may be the better option. Developers can programme React Native app to speak the same language as the tools on iOS and Android. Once you speak the same language, it's easy to harness each operating system's potential. You can create a much snappier performance and a familiar experience for your users.
But, there are downsides. To take full advantage of this, you'll have to code your application in a different language for each operating system - as we mentioned earlier - which takes time and money.
Access to Native Device APIs
PWAs are limited when it comes to APIs (application programming interfaces). Whilst they have access to many features. React Native can hav similar limitations, as it is a Native framework based on Native code. If you need to access essential tools, such as media capture, web share, and audio recording, you'll be okay with a PWA or React Native.
If you need to go deeper into the device with more the latest just-released tools, such as accessing customised hardware in a recent Os release, then a Native app written in the base Native code may be the better option.
Downloading From the App Store
Unlike PWAs, React Native applications have to be uploaded to app stores and installed before users can access them.
With a standard app installation consuming over 100MB these days, the user has to download a lot of data to use your React Native app. This install size can be an issue in parts of the world where there's either expensive or slow bandwidth, especially if that user doesn't intend to use the application frequently.
Developing a PWA in this scenario is a credible alternative, with first-load package sizes able to sit between 1MB to 5MB in size comfortably. Even in areas where bandwidth isn't an issue, you're demanding a lot fro your users by forcing them to install an app.
Like Twitter, many businesses get around this by having two options; an instantly available PWA offering a scaled-down version of their app, and the rich React-Native app available on the app store.
Maintenance and Upgrades
PWAs are incredibly easy to maintain whilst React Native applications take more hard work.
To keep React Native apps running smoothly, the developer must upgrade them regularly as the app stores often mandate certain upgrades. Upgrades take knowledge, time, and money to manage especially as Apple and Google scrutinise each release against their lengthy app store guidelines. A rejected app release could delay your commercial plans by weeks, and introduce unplanned cost.
Once the developer has written the code and it's fully-functional and tested with a PWA, you can go ahead and deploy to a web server that you control. It's instant and there is no approval process.
Social Media Integration
If your business relies heavily on social media, React Native could be a better option. PWA social add-ons often struggle to fetch data and fail, making social media integration difficult.
Have you ever used the share button on a mobile app? Think about your experience with that compared with sharing something on the web. Apps have streamlined this process, providing a standardised interface for sharing where the mobile operating system knows all of the user's compatible apps for sharing. For the web, developers must implement their methods, and there is much less standardisation, which comes at the cost of user experience.
Consumer-Focused or Enterprise Focused?
Apps that target consumers often need to be more visually sleek and appealing.
React Native is the better option here as you can work with the native UI controls and access a wide range of features. Enterprise apps don't need to be as polished and often benefit from offline capabilities, making PWAs ideal.
Benefits of a React Native App
Are you still stuck between which to choose? Here's a run-through of the specific React Native benefits to help.
Because React Native is an open-source framework, it has a large community of developers. These developers are usually willing to offer help and support to others which is invaluable as a beginner. When struggling with development or grappling with code, the chances are there's a developer who's willing to help.
React Native apps offer seamless performance as they work with Android and iOS native components, using a separate thread to UIs and APIs that enhances function. You can also reuse code to speed up development time and create applications across operating systems with ease. It's a cost-effective solution to app development, allows third-party plugins, and is rich in functions.
Whether you choose a PWA or React Native is down to your needs. It may not be a simple decision, but the points listed above should help you. If you have the time and money, the best solution is to build both a PWA and a React Native app. You'll be able to target a wider audience, encourage more web browser to download your application and create seamless flow across devices.
If you'd like to learn more about React Native and whether it's the right option for you, get in touch with Scorchsoft, a let us know about your project.
Progressive Web App Capabilities (What can a PWA do)
There are limitations to what features Progressive Web Applications can take advantage of, but less than people think.
As PWAs advance the number of features they can incorporate is getting increasingly longer. Here's a run-through of some of the things that PWA can do, some of which you may have thought were only available to Native mobile apps.
Media Capture
Media Capture lets your PWA access your camera and microphone, allowing users to scan codes, upload photos, and record audio.
Geo Location
Your users can opt into sharing their location with the Geolocation API. Geolocation is especially useful for apps that will deliver goods or services and improves user experience by bypassing manual address input.
Notifications
Even if your PWA isn't in use, it can display browser notifications when this API is switched on and encourage users to click onto your app.
Contact Picker
If the user allows you to, the contact picker feature lets you access your user's contacts on their device.
Web Share
Encourage sharing with the Web Share API available to PWAs. It lets your users share various content, including URLs, text, and files, making sure your app content is widely shared and improving user experience.
Authentication
Also known as WebAuthn, the Web Authentication API lets your users skip password authentication by opting for an alternative method, such as a fingerprint reader or USB Security Key. WebAuthn is especially beneficial for apps where data security is essential, but you don't want to compromise user experience by demanding a lengthy login process.
File System
File System allows you to access the files on your user's device, such as their image gallery, making it easy for users to upload their files and media.
Vibration
If you want to catch your user's attention, the Vibration API will allow your PWA to vibrate your user's device.
Audio Recording
With audio recording permissions, you can use MediaRecorder to allow users to record audio, and Web Audio API to visualise audio.
Audio
If you have media playing on your PWA, you can let your users control it from their lock screen with the Media Session API. It's a simple way to improve the user experience of your app.
Bluetooth
With the Web Bluetooth API, your PWA can connect to Bluetooth Low Energy (BLE) devices, both writing values to it and reading values from it.
NFC
If you want to read and write NFC tags from your progressive web application, you'll need to add the Web NFC API. If you use contactless payments with your phone or debit card, then you used NFC! Most security keyfobs in offices also use NFC. Maybe there is a creative way that you could use this technology in your next app.
Digital payment
Many PWAs need in-app payments to make sales, and unlike those using the Apple App Store payment system, you won't have to pay an extra charge on your progressive web application. Use the Payment Request API and enable a browser-based payment process. It will accept credit and debit cards, Google Pay, and Apple Pay.
Wake Lock
There are certain times when your application needs to overwrite the device's lock or dimming feature. The Screen Wake Lock API lets you do that, preventing the device from interrupting your PWA.
AR/VR
Keep up with the future of technology augmented reality, which lets users put virtual objects into reality. For example, they can place virtual furniture that you're selling into their home to make sure it'll fit.
Orientation
The orientation feature receives data about the position of your user's device. Your PWA can then adjust its display to suit the device.
Motion
Motion lets you follow changes in position and orientation on your user's device. More recently, developers have implemented it to allow users to view 3D images and enhance AR/VR features.
Multi-Touch
If certain features require more than one finger touch to control, Multi-Touch is essential. It ensures your PWA will register more than one touch on the screen, keeping your features functioning and your experience smooth.
Speech Recognition
Part of the Web Speech API is speech recognition. It allows your PWA to use audio to recognise voice context. One of the prominent examples of speech recognition are the voice assistants on devices, such as Siri and Alexa.
Speech Synthesis
To turn text into speech smoothly, make sure your PWA has speech synthesis installed.
Get Network Info
The Network Information feature links your PWA to data about device connection. If the network quality changes, your PWA will adjust its functionality to suit.
Options for Back End Technology
The back end of your PWA is the brain of the application. It's responsible for how your PWA functions, updates, and changes, feeding it with the data it needs to work. In other words, it's essential.
There are a lot of options when it comes to choosing back end technology. To give you a better idea of which is best for you, here's a run-through of what you should know.
Internal API
Facilitated by a web server, the API of your PWA structure that takes user requests instructs your system on what the user wants to do and takes the response back to the front end application.
Think of it as a waiter, connecting your food order with the kitchen and bringing the food back to you when it's ready. It's the middle-man of every functioning application.
You can choose two main options for how your internal API communicates; JSON or XML (SOAP is an adaptation of XML) being the most popular. Both of these are good options but if you're looking for a quick answer, stick to JSON (JavaScript Object Notation).
XML is the oldest option of the two and only works for structured documents represented as an ordered tree. Whilst you don't need to know what this means, it's important to note that this method is unusual for most programming languages and can make development more complicated. JSON is a more natural fit convenient for developers and works better in most API situations, making it the most popular option today of the two.
Back End Code Technologies (The Options and Considerations)
When building your PWA, you'll need to pick a back-end language of code build with. There are a few different options out there, but we're going to focus on what we consider to be the four most popular languages for PWAs; PHP, NodeJS, Python, and .NET.
NodeJS uses JavaScript to construct enterprise-level PWAs and uses Google Chrome's V8 engine to support it. It delivers a rapid performance and can run across platforms. If you built the front end of your PWA with JavaScript, then also using Node on the back end means your development team can develop the full-app-stack using the one core language, which may reduce your training costs. However, be aware that building scalable NodeJS applications may involve complex coding even for small applications. A level of app structure to handle this may not be needed with other approaches. You have more control, but there is also a more considerable risk that you introduce technical debt if your development team make poor design decisions.
PHP can be used for the rapid development of PWAs and is less complicated than NodeJS as a server-side tool called "Apache" or "NGINX" can do some of the heavy request-handling lifting for you. PHP can run across operating systems and is specialised to develop web apps. If you're on a budget, PHP is a free, open-source platform that also offers affordable web hosting. The codebase is powerful but easy to understand, although it can be sluggish compared to the other languages.
Python is excellent for easy debugging and fast development. It uses interpreted language that goes through code line-by-line, reporting any errors back immediately and stopping further executions until it's fixed. It's one of the easiest coding languages to learn and use, and has a vast library of functions. Bear in mind that the speed of Python depends on its interpreter (e.g. PyPy or CPython).
.NET is a Microsoft platform that focuses on application frameworks and offers reliable performance. It's not as easy to learn as other languages, such as Python and PHP and .NET only works on Microsoft servers which can be restrictive.
At Scorchsoft, we use PHP or NodeJS on the back end, and sometimes we will combine both, playing each technology to its strengths. For example, If Microservices are needed, then NodeJS is the best option, but if a monolithic server environment is the best design decision then we will opt for PHP (Using the Laraval framework)
Back End Database Technologies
You can choose either a MySQL option or a NoSQL alternative for your database. MySQL is one of the most common database options and offers a fully managed service. It provides excellent scalability and can cope with large amounts of relational data, so you should have no issues running your Progressive Web App. You can also add unique requirements to your MySQL database, tailoring it to your needs. Other benefits include:
- A unique storage-engine allows for high performance
- Reliable for 24/7 uptime and
- Ideal for high-traffic websites
- Solid security to protect data and reliable back-up services
- Excellent support and tools to understand application development
- Open-source software with around the clock customer support
- Supports partitioning across several servers
- SQL is Relational
- More heavy lifting is done in SQL, and less in your app logic.
MariaDB is a variant (a fork) of MySQL that we use at Scorchsoft, and, although built from MySQL, the two do have some differences. MariaDB has a lot of public input in terms of upgrades, with the ability to vote for new features available to clients. It also has varying features from MySQL, handles thread pools more effectively, and supports various storage engines. MariaDB also allows for live altering of tables without table-locking, which can save a lot of server admin time if you need to maintain databases with millions of records.
If MySQL and its variants aren't for you, you may prefer NoSQL. One of the most popular is MongoDB, which stores data differently from MySQL. MySQL keeps its data in tables, using SQL (structured query language) to access the database, whilst NoSQL uses JSON-similar documents. With MySQL, each document can have a unique structure and be edited easily without SQL confines. MongoDB provides fast development, brilliant scalability, and is very reliable.
So, which do you pick? Both have their pros and cons, but either will be a reliable option for a database. In general, if you have structured data, opt for MySQL, and unstructured data opt for a NoSQL database, like MongoDB. Mongo is also very popular among NodeJS enthusiasts, though you can still use SQL in your Node applications. You can also use them simultaneously to get the benefits of both, creating the perfect database for your use.
Create Your Ideal Back End
There are so many options for each segment of your back end structure that almost anything is possible. Whatever you need it to do, the right blend of carefully chosen technology will make it happen.
You can even set it up using microservices - a different type of architecture that loosely pairs a range of services you can deploy independently. They're easy to maintain and allow the user's technology stack to be quickly evolved. Netflix is an example of a company who uses microservices. They have over 500 different microservices that let their server handle the billions of daily requests it receives.
Nothing should stop you from creating a back end that works perfectly for your business if you know. If you don't, Scorchsoft can help.
How to Create a Progressive Web Application (7 Steps)
Once you've got to grips with the different options available to you, it's time to start coordinating your project. Many of these steps will need to involve your development team, but we list them here so you can be clear of the stages involved.
Step 1: Outline Your Objectives
Before jumping into your project, it's vital to plan. You must be clear on the direction you're heading, your business objectives, and the outcomes you're hoping to achieve. If you're working with a developer or multiple team members, make sure you keep everyone up to date with your ideas.
Step 2: Scope of Work and Specifications
Once you know your objectives, write up a precise specification that outlines your plan of action. Detail any issues that could crop up and how you'll solve them, and be clear about the quality standards you need to meet. Again, if you're working with a team, then make sure you build this together. To create a fully-functional PWA, every member of your team needs to be clear on the specification.
A "scope of work" plan is also helpful. Your plan should detail the materials you'll need, project activities to complete and a timeline for deliverables. Keep a copy of this close throughout the PWA development to ensure everything runs on schedule.
Step 3: Wireframe Your Concept
A wireframe is a basic outline of how your application is going to look at the front end. It should detail the features and functions you'll have, your PWA elements' size, and where you want them on the screen. It should be basic but give you a clear idea of the structure, like the blueprint of a house without interior design details. A wireframe should clarify your ideas and make them easy to share.
If you're looking for inspiration to build your wireframe, look at Google libraries for ideas on components and screen designs.
Step 4: Create graphic-designed mockups
Wireframes are terrific to identify the structure and user journey, but they are just that, wireframes. Once your specification and wireframes are complete (and signed off), it's time to convert these assets into beautiful graphically designed user interfaces.
These mockups should look and feel like the final product, consider the user experience, and your business's brand.
Step 4: Plan the Database Structure
When creating your database, start by clarifying its function. What will you use it for and what sort of data will it store? These questions will help you with the next step; sorting your tables and individual fields. You need to be clear on the tables in your database, along with the field in each table. You will also need to know how each table will connect and how data is stored.
Finally, make sure that your database conforms to the community guidelines, and you organise your data efficiently. Use an entity-relationship diagram to keep your thoughts clear and create a physical copy of your database structure.
Unless you have the experience, you'll likely need a professional developer to help you create your database. It's very detailed work that's crucial to the success of your PWA.
It's our opinion that, aside from the specification, the initial database structure is the most critical part of your system to design before writing a single line of code. Make a mistake with your database design, and it will haunt you as it's tough to change retrospectively, with adjustments to existing tables and columns likely to result in a significant rework of any preexisting code. Developers should create an "Entity Relationship Diagram" which outlines the tables required, their columns, and the relationships between those columns.
Step 5: Use a Proper Version Control Process When Developing
Version control is essential whilst developing any web application or site. Think of version control tools like a piece of software that saves the files of your site regularly, letting you revert to an earlier version if you need to.
If you're working on your own, this gives you the freedom to play with different designs and structures without commitment. If you're not happy with the changes you've made, you can click back to an earlier version. It also gives development teams the ability to program features independently without getting in each other's way, and collaborate, allowing them to build and test only their change, to merge and test that into the main codebase later. It will let you keep track of the changes other members of your team have made and gives you the power to revert them if you need to. Take a look at Git version control to learn more about the benefits of such tools.
Step 6: Test Each Section
It's a good idea to start with a basic version of your PWA and test it with a select audience. A concept called launching a Minimum Viable Product.
Get feedback from users on your interface, including what they like and what could be improved. You can also try this by going live and monitoring your analytics. Watch how traffic, downloads, or sales fluctuate with the changes you make to get an idea of what's working. This real-time feedback is essential to developing a PWA that fulfils your objectives, so don't skip it!
By developing something smaller sooner, you reduce the risk of rework and make sure that your priorities align with real users' priorities.
Step 7: Maintain a Product Roadmap
A product roadmap is a summary of your PWA direction over time, listing the high-level features and functions you think you'll need, and by what date. You should create one as you develop your progressive web application, detailing the strategy behind it and the work to be done. It's a great way to keep track of your progress and keep driving your project forward. Be sure to share the product roadmap with your team to keep everyone up to date with the development process. Keep your product roadmap active once your PWA us up and running to encourage development and innovation.
Getting a Quote (App Development Quote Guide)
The above seven steps are a relatively brief outline of what you should do to decide what features should go into your Progressive Web App, and how to scope out your project to get a quote.
Though you may still want to know: What it costs to build an app; What impacts on development cost; How to get a quote for your app project; The ongoing costs of building an app; or how to fund your app development project. We cover all these questions in more in our detailed app development quote guide article.
Start Building Your Progressive Web Application With Scorchsoft
Well done in making it to the end of this lengthy article! As you've probably realised, creating a Progressive Web App (or React Native), is no easy task! There are many technical decisions to make when building a PWA that relies on a deep understanding of web development's latest technologies.
Unless you're already familiar with this world of tech, there is a high risk that you may make decisions that hold you back later or introduce costly technical debt. Software needs to be planned and designed correctly, with a capable team.
Scorchsoft is here to help. Trading for over a decade, we're a team of experienced developers with a passion for creating Progressive Web Applications (and React Native apps) that show off your brand. Whatever your ambitions, we can help you achieve them.
If you're ready to get started, get in touch with our team and let's start developing your web application together.
