Build fast Progressive Web Applications (PWA) with Jamstack

By using Jamstack PWA, it demonstrates greater effectiveness in terms of improved performance through low-cost construction and excellent scalability.

 

Since November 2016, when the internet usage rate on mobile and tablets surpassed that of desktops, mobile users have been attracting attention from many companies. As internet trends shift towards app usage, companies have been seeking ways to bring app-like user experiences to their websites to enhance engagement.

 

What solved that is Progressive Web Apps. The PWA approach changes how users interact with websites and brands on mobile devices.

1. What is a Progressive Web App?

In simple terms, a PWA is something between a website and an app. PWAs can provide an app-like experience on a website through the user's web browser, rather than prompting users to download an app.

 

1-1 Why should websites use PWA?

Since PWAs are based on HTML downloaded from a typical WWW server, there is no need to adjust for different mobile phones or OS versions from a technical perspective.

 

Naturally, PWAs provide an experience similar to mobile apps. This means that by offering more features, user engagement can be significantly enhanced. They load instantly and respond quickly to user interactions.

 

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

 

With PWA, you can send push notifications, significantly enhancing audience engagement.

 

Data is cached, so everything is incredibly fast. Since there is no delay in loading, users don't have to worry about leaving while waiting for content to load.

 

Due to the advantages mentioned above, it is said that PWS increases potential reach at a low acquisition cost and improves conversions.

 

1-2 Challenges of PWA

Not long ago, cross-browser compatibility was a challenge. Currently, Progressive Web Apps are fully supported in Chrome and Opera. Firefox supports almost all features of PWAs. 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 work to be done.

 

Additionally, there may still be issues regarding cross-application login support. The emergence of a central download store for PWAs, similar to the iTunes Store or Google Play, would greatly contribute to improving reliability.

2. Jamstack PWA

This article is not a case study. It briefly explains our thoughts based on our experience building PWAs using the Jamstack approach.

 

2-1 What We Have Created (General Needs/Requirements/Purpose of the Application)

The app we were developing needed to have standard features such as blogs and product listings, but the main goal was to build a community around that specific topic. We wanted users to be able to interact with every aspect of the website (and with each other) through article comments, product reviews, and an advanced Q&A section (which is closer to a forum than a standard FAQ page).

 

The main features of this app are the blog, product list, and community panel. The blog allows for a large number of articles to be published and includes standard features and a comment system. Regarding products, we wanted users to be able to leave reviews, aside from providing information. The community panel is a place where users can start threads, ask questions, and obtain the information they need.

 

2-2 Why did we use Jamstack here?

When creating apps using traditional methods, it was necessary to develop separate apps for Android and iOS, and also pay attention to the server for APIs, databases, hosting, and more.

 

• You can integrate third-party services or easily create your own services in the cloud.
• We will keep the content in a headless CMS as much as possible, making it accessible from multiple endpoints.
• We use JavaScript for both front-end and back-end.

 

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

 

2-3 What frameworks or services did you use, and why?

Thanks to the latest tools, we have achieved the best performance, low-cost construction, and excellent scalability. For speeding up websites, blogs, and product listings, we used Next.js as a static site generator and Contentful as a headless CMS.

 

 

2-3-1 Next.js

We decided to use Next.js for building the application. Next.js is a framework for server-rendered React applications and comes with many excellent out-of-the-box solutions. There is no need to worry about configuration, webpack, routing, or even code splitting. Additionally, it allows for static page exports, so you can statically deploy your app 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, offering high flexibility in configuration and ease of use for both developers and editors. By combining Next.js with Contentful, we were able to create an amazing static website experience. The Next.js app is exported to static files, retrieving all entries from Contentful at build time and exporting pages filled with content. This minimized the number of request submissions and improved the overall performance of the app.

 

2-3-3 AWS

As mentioned in the first half, our app is not just a blog; it also needed to have functionality as an app. We needed to bring it to life, and to achieve that in a serverless manner, we decided to adopt AWS. Therefore, we have everything we need.

 

User images are stored using Amazon Simple Storage Service (Amazon S3). When adding users to the app, please select Cognito. A database is required, and we will use DynamoDB here. If you want to access the 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 like continuous integration and continuous deployment services, free SSL, and automatic branch deployment, Netlify has become our No. 1 hosting and deployment option.

 

2-3-5 Algolia

The third-party service added to the app is Algolia. It was very important 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, ensuring that all new entries (articles, products, questions, etc.) are indexed and readily available to users.

 

2-4 Tricky Parts Comments

2-4-1 Comments

As with any ambitious project, there were obstacles that required serious coding. Our app was not intended to be a simple blog that passes content from a headless CMS via API during construction. We wanted to incorporate user-generated content into static pages as well. By providing options, we are influencing user engagement. This improves the overall performance of the app and allows unique user content to be indexed by search engines, leading to better SEO.

 

On the user side, we wanted to deliver content instantly with everything included on the received page. In other words, there is no loading indicator for data stored in the database, such as comments and reviews.

 

So, how were we able to create a static app with dynamic content? First, our app does not rebuild every time a new comment or review is added. This would mean that new comments would not be displayed immediately, but only after a rebuild, which was unacceptable. To solve this problem, we made our app both static and dynamic.

 

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

 

2-4-2 Next.js Configuration

Additionally, we aimed for the page transitions to be "overwhelmingly fast" without the need for the client to retrieve data from the CMS. By default, data is fetched from the CMS in getInitialProps of the next page, which means that content is retrieved from the CMS when the user opens the page. By downloading all CF data at build time and storing it in a JSON file, we were able to generate pages using local file data, allowing us to display content without reaching out to Contentful. This resulted in remarkably fast page displays.

 

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

3. Benefits of Jamstack Built PWA

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

 

• Outstanding Performance: Since most of the content is static, the app's exploration/browsing is remarkably fast.
• Low Cost: By hosting applications on Netlify, we were able to significantly reduce costs. With the 'service included' option, customers can pay only for what they use.
• Scalability: You can quickly scale up according to engagement and reach (traffic).

 

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