Building a Fast Progressive Web Application (PWA) With Jamstack

Going with Jamstack PWA can help even more in terms of better performance with low costs of build and great scalability.

Ever since mobile and tablet internet usage exceeded desktop back in November 2016 mobile users have been in the focus of many businesses. With internet trends shifting to more app usage, businesses needed a way to bring that app-like user experience that sparks engagement to their websites as well.

The solution came with Progressive Web Apps. PWA approach changes how users interact with the website and with the brand for that matter, over mobile devices.

What are Progressive Web Apps?

Simply put PWAs are somewhere in between a website and an app. Instead of pushing users to download your app, PWAs allow you to bring that app-like experience to the website through the user's web browser.

Join Bejamas newsletter

Sign up for the newsletter today and receive valuable, in-depth Jamstack & PWA tips, tricks, and case studies.

Submit

Why should websites use PWAs?

From a technical point with PWA being based on HTML downloaded from a typical WWW server, there is no hustle of adjusting it to a different phone and/or OS version.

Obviously, PWAs provide a mobile-app experience, which means you can play with users' engagement much more by giving them more functionality. Load instantly and respond quickly to user interactions.

Not only that! You can also browse the content even when you are offline.

With PWA’s you are able to push notifications which can greatly increase the engagement of your audience.

Because it caches data, everything is incredibly fast. No worries about users leaving when waiting for content to load since there is no time to load.

Finally, thanks to all of the advantages mentioned above PWSs are reported to improve conversions by increasing potential reach with low acquisition costs.

Challenges of PWAs

Up until recently, cross-browser support was a problem. Today, progressive web apps are fully supported by Chrome and Opera. Firefox supports nearly all of PWA features. And Apple has finally started with limited support since Safari 11.1 for iOS. While this is a move in the right direction, there is still a lot of work to be done.

Other challenges? Well, cross-application Login support is still a problem in some cases. The appearance of a central download store for PWAs (like iTunes store or Google Play) could help trustworthiness a lot.

Jamstack PWA

Before we delve into the subject a bit more keep in mind this post isn’t a case study - just a quick walkthrough of our thoughts from the experience of building PWA with the Jamstack approach.

What we built (general needs/requirements/purpose of the app)

While the app that we were building had to have standard features like blog and lists of products, the main focus was to build a community around its specific topic. We wanted to allow users to interact with every aspect of the websites (and with each other), via articles comments, product reviews, and an advanced Q&A section (which is closer to a forum than a standard FAQ page).

So, the main functionalities of the app are the blog, list of products, and community panel. Blog, packed with tons of articles, had all the standard features and functionalities combined with the comments system. For products, except informational aspects, we wanted to give users the ability to leave reviews. Community panel is a place where user can start threads, asks questions, get information about everything they want.

Why is Jamstack here?

Building an app in a “traditional” way meant we would need to develop a separate app for Android and iOS, care about servers for our API, databases, hosting, etc. We opted out for Jamstack here because quite simply it allowed us to:

• integrate 3rd party services, and create our own in the cloud easily
• keep content as much as possible in the headless CMS so we can potentially use it from multiple endpoints
• use JavaScript on the front-end and back-end.

On top of these three, we were able to minimize hosting costs by using Netlify. Yep, we got our app hosted like any other static site saving operational costs for our client. Cool, don’t you think?!

What frameworks and services did we use and why?

Thanks to the modern tools we used we were able to get the best performance, low costs of build, and great scalability. For blazing-fast websites, blogs, and product lists we used Next.js as a static site generator and Contentful as a headless CMS.

As for user handling and the rest? Lucky for us, the modern web has a great solution - serverless. Yay, build a web app without worrying about servers!

Next.js

We’ve decided to use Next.js to build our app. Next.js is a framework for server-rendered React applications with many great out-of-the-box solutions. You don’t have to think about configuration, webpack, routing even code-splitting. It also offers export to static pages so we can deploy our app statically on hosting and deployment services like Netlify.

Contentful

For managing static content, articles, and products, we used Contentful. It’s battle-tested headless CMS, highly configurable, and easy to use by developers and editors. With combination Next.js + Contentful we were able to create an amazing static website experience. Next.js app is exported to static files and during the build time, it fetches all entries from Contentful and exports our pages filled with content. Thanks to it we managed to reduce sending requests to a minimum and increased overall app performance.

AWS

Like I said before, our app needed to be an app… not just a blog. We needed to give it life, and we did it with serverless. We decided to go with AWS. It offers everything that we needed.

What to store users' images? Use Amazon Simple Storage Service, Amazon S3. Add users to your app? No problem, select Cognito. Need a database - here it is DynamoDB. Ah, you want to use GraphQL to reach your data - use AppSync. Finally, we need to perform some advanced operations on the server-side - feel free to use Lambda. See? With AWS you can use what is needed, and pay for what’s used.

Netlify

Netlify offers hosting and serverless backend services for static websites. It backs most of our projects and it’s great that we were able to use it for our PWA as well. Continuous integration and continuous deployment services, free SSL, automatic branch deploy - those and many more features make Netlify our #1 hosting and deployment option.

Algolia

The last 3rd party service we added to our app was Algolia. Adding search ability to our app was immensely important as it gives our users the ability to quickly find the content of their interest. We managed to connect Contentful and DynamoDB with Algolia using one serverless function so every new entry (like an article, product, question, etc.) is indexed and immediately available for the users.

Tricky parts

Comments

Like with any ambitious project there were obstacles that required serious coding. First of all, our app wasn't planned to be a simple blog in which we rely on content from our headless CMS, passed on build time via API. We wanted to include user-generated content as well in our static pages. Why? By giving them an option to participate we are influencing the engagement of the users. This, in turn, helps with the overall app performance and it improves SEO as unique users' content is indexed by the search engines.

On the users' side, we wanted to deliver the content to them in an instant with everything already included on the page they receive. This meant no loading indicators for comments, reviews, or other data stored in the database. A seamless page load.

Ok, so how did we manage to make a static app with dynamic content? First of all, our app doesn’t rebuild after every new comment or review. This was not acceptable because that way new comments would not appear instantly but only after the rebuild. To overcome this we made our app both static and dynamic.

On build time all available user-generated content is included in a static page. But when the user opens a page, the app is checking if it has all of the available comments for this page. If not it updates comments with the new ones. It is a simple but powerful approach. Comments added before the page build are statically added to the pages, but those added after the build are fetched when rendering the page on the client side.

Next.js configuration

We wanted to have all of the Contentful content on build time, to have no need to fetch data from CMS on the client-side so that switching between pages is ‘blazing fast’. By default fetching data from CMS in getInitialProps inside the next pages causes fetching content from CMS when a user opens a page. We managed to show content without reaching Contentful by downloading all CF data on build time, storing it in JSON files, and then populating the page with data from local files. All this made pages incredibly faster.

Thanks to Next.js code-splitting and thoughtful code writing, generated .js files contain only the content user sees on the current page. Another performance boost is by loading a needed part of the app.

Benefits of Jamstack build PWA

Considering all the benefits we came across, the hype around PWAs seems well deserved. Whatmore going full Jamstack in this project gave us all the benefits Jamstack has to offer as well:

• Great performance - since most of the content is static, exploring/browsing the app is incredibly fast.
• Low costs - hosting the app on Netlify cut the costs significantly. By using the manly “as-a-services” option the client pays only for what is used.
• Scalability - it’s another benefit we got. Depending on engagement and reach (traffic) we can scale quickly.

Progressive web apps might not be mainstream ... yet. They aim to amplify user experience and engagement on the web and with all of the benefits mentioned above, there is certainly potential for most businesses.

Need a fast PWA for your business? We can help with that.

BOOK A MEETING today and learn more about what we can do for you and your business.