Build fast Progressive Web Applications (PWA) with Jamstack

By using Jamstack PWA, you can achieve better performance with lower cost and excellent scalability.

 

Since November 2016, when mobile and tablet internet usage surpassed desktop, mobile users have been receiving a lot of attention from companies. As internet trends shift towards app usage, companies have been searching for ways to bring app-like user experiences to their websites and increase engagement.

 

Progressive Web Apps solved this problem. The PWA approach changes how users interact with websites and brands on mobile devices.

1. What is a Progressive Web App?

In simple terms, PWA is something between a website and an app. PWA allows users to have an app-like experience on a website through their web browser, rather than prompting them to download an app.

 

1-1 Why should websites use PWA?

PWA is based on HTML downloaded from a typical WWW server, so there is no need to adjust for different mobile phones or OS versions from a technical standpoint.

 

Of course, PWA provides a mobile app-like experience. In other words, by offering more features, it can increase user engagement. It loads instantly and responds quickly to user actions.

 

Not only that, but you can also view the content offline.

 

With PWA, you can send push notifications and greatly increase viewer engagement.

 

Data is cached, so everything is surprisingly fast. There is no need to worry about users leaving while waiting for content to load, as loading times are quick.

 

According to reports, PWS is said to increase potential reach and improve conversions at a low acquisition cost due to the above-mentioned benefits.

 

1-2 Challenges of PWA

Until recently, cross-browser compatibility was a challenge. Currently, Progressive Web Apps are fully supported on Chrome and Opera. Firefox supports almost all PWA features. And Apple has finally started limited support from Safari 11.1 for iOS. While this is a step in the right direction, there is still much to be done.

 

In addition, there may still be issues with cross-application login support. The emergence of central download stores for PWAs, such as the iTunes Store or Google Play, will greatly contribute to improving reliability.

2. Jamstack PWA

This article is not a case study. We briefly explain our thoughts based on our experience building a PWA with the Jamstack approach.

 

2-1 What We Have Created (General Needs/Requests/Application Purposes)

Our app had to have standard features such as blogs and product listings, but the main purpose was to build a community around a specific topic. We wanted users to be able to interact with every aspect of the website (and with each other) through features such as article comments, product reviews, and an advanced Q&A section (more like a forum than a standard FAQ page).

 

The main features of this app are blog, product list, and community panel. The blog contains a large number of articles and has standard features and a comment system. As for the products, we wanted to allow users to leave reviews, aside from providing information. The community panel is a place where users can start threads, ask questions, and obtain necessary information.

 

2-2 Why Use Jamstack Here?

Previously, when creating an app, it was necessary to develop separate apps for Android and iOS, and also pay attention to servers, databases, and hosting for API.

 

• You can integrate third-party services and easily create your own services on the cloud.
• Retain content in headless CMS as much as possible and make it available from multiple endpoints.
• Uses JavaScript on both the front-end and back-end.

 

In addition to these three, we were able to minimize hosting costs by using Netlify. We hosted the app like any other static site, reducing client operational costs.

 

What kind of framework or service did you use, and why?

Thanks to using the latest tools, we were able to achieve top performance, low-cost construction, and excellent scalability. For speeding up websites, blogs, and product lists, we used Next.js as a static site generator and Contentful as a headless CMS.

 

 

2－3－1 Next.js

We have decided to use Next.js for building our app. Next.js is a framework for server-rendered React applications, with many excellent out-of-the-box solutions. You don't have to worry about configuration, webpack, routing, or even code splitting. Additionally, it is possible to export to static pages, so you can deploy your app statically to hosting and deployment services like Netlify.

 

2－3－2 Contentful

We used Contentful for managing static content, articles, and products. It has a proven track record as a headless CMS, with high flexibility in settings and user-friendly for developers and editors. By combining Next.js and Contentful, we were able to create an amazing experience for static websites. The Next.js app is exported to static files, and during build time, all entries are retrieved from Contentful and exported as pages filled with content. This minimizes server requests and improves overall app performance.

 

2－3－3 AWS

As mentioned earlier, our app required more than just a blog. We needed to give it functionality as an app. To achieve this, we decided to adopt AWS for serverless implementation. As a result, we have everything we need.

 

User images are saved using Amazon Simple Storage Service (Amazon S3). If you want to add users to the app, please select Cognito. A database is required, but we will use DynamoDB here. If you want to access data using GraphQL, please use AppSync. Finally, if you need to perform advanced operations on the server side, feel free to use Lambda.

 

2－3－4 Netlify

Netlify provides hosting and serverless backend services for static websites. It supports most of our projects and it's great that it can also be used for PWAs. With features such as continuous integration and deployment services, free SSL, and automatic branch deployment, Netlify is our number one hosting and deployment option.

 

2－3－5 Algolia

The third-party service we added to the app is Algolia. It was crucial to add a search function to the app so that users can quickly find content they are interested in. We connected Contentful and DynamoDB to Algolia using a single serverless function, which indexes all new entries (articles, products, questions, etc.) and makes them immediately available to users.

 

2-4 Tricky Part Comments

2-4-1 Comments

No matter how ambitious the project is, there were obstacles that required serious coding. Our app was not intended to be a simple blog that delivers headless CMS content via API during construction. We also wanted to incorporate user-generated content into static pages. By providing options, we are affecting user engagement. This improves the overall performance of the app and helps improve SEO by indexing unique user-generated content on search engines.

 

On the user side, we wanted to deliver content instantly with all the received pages included. In other words, there are no load indicators for data stored in the database, such as comments or reviews.

 

Now, how can we create a static app with dynamic content? First, our app does not need to be rebuilt every time a comment or review is added. This means that new comments will not be displayed immediately, but only after the app is rebuilt, which is not acceptable. To solve this problem, we made our app both static and dynamic.

 

During construction, all available user-generated content will be included in the static page. However, when a user opens the page, the app checks if all comments available on that page are present. If not, the comments will be updated to the latest version. This is a simple yet powerful approach. Comments added before page construction will be statically added to the page, while comments added after construction will be retrieved when rendering the page on the client side.

 

2-4-2 Next.js Configuration

In addition, we aimed to make page switching "overwhelmingly fast" without the need for clients to retrieve data from the CMS. By default, data is retrieved from the CMS in the getInitialProps of the next page, causing the user to retrieve content from the CMS when opening the page. By downloading all CF data and storing it in a JSON file during build time, we were able to generate pages using local file data without reaching Contentful. This greatly improved the speed of page display.

 

Next.js's code splitting and thoughtful code writing allow only the content that the user is currently viewing on the page to be included in the generated .js file. Additionally, by loading only the necessary parts of the app, performance can be improved.

3. Benefits of Jamstack-built PWAs

Considering all the benefits we have encountered, promoting PWA seems like a natural choice. In this project, by fully adopting Jamstack, we were able to enjoy all the benefits that Jamstack offers.

 

• Excellent Performance: Due to most of the content being static, app exploration/browsing is surprisingly fast.
• Low Cost: By hosting our app on Netlify, we were able to significantly reduce costs. With the "pay-as-you-go" option, customers only pay for what they use.
• Scalability: You can quickly scale up depending on engagement and reach (traffic).

 

Progressive web applications may not yet be mainstream... However, they aim to improve user experience and engagement on the web, and have potential for most companies due to the benefits mentioned above.