FWTA is a project embraces the vision to create cross-platform mobile first applications using morden web technologies and best practices, such as Server Side Rendering (SSR), Progressive Web Application (PWA), Accelerated Mobile Pages (AMP), PRPL Pattern, Severless Backend.

This is one of the article series which records thoughts and notes during my implementation of FWTA.

• Github
• Demo

In the previous article, I have deployed my web app to firebase using its hosting and functions service. In this article, I would add some UI to make it more like an app rather than dummy web page.

FWTA is a project embraces the vision to create cross-platform mobile first applications using morden web technologies and best practices, such as Server Side Rendering (SSR), Progressive Web Application (PWA), Accelerated Mobile Pages (AMP), PRPL Pattern, Severless Backend.

This is one of the article series which records thoughts and notes during my implementation of FWTA.

• Github
• Demo

In the previous article, I have added some UI to the web app to make it more like a native app. I will add PWA support to achieve the goals below:

• Add web app to home screen and launch it just like other apps
• Completely runs when offline
• Performance optimize using all the PWA powers with caches

I wrote a blog before to introduce PWA, now I would like to put those knowledge into action.

FWTA is a project embraces the vision to create cross-platform mobile first applications using morden web technologies and best practices, such as Server Side Rendering (SSR), Progressive Web Application (PWA), Accelerated Mobile Pages (AMP), PRPL Pattern, Severless Backend.

This is one of the article series which records thoughts and notes during my implementation of FWTA.

• Github
• Demo

In the previous article, I have deployed my dummy web app to firebase using its hosting and functions service. In this article, I would add some UI to make it more like an app rather than dummy web page.

FWTA is a project embraces the vision to create cross-platform mobile first applications using morden web technologies and best practices, such as Server Side Rendering (SSR), Progressive Web Application (PWA), Accelerated Mobile Pages (AMP), PRPL Pattern, Severless Backend.

This is one of the article series which records thoughts and notes during my implementation of FWTA.

• Github
• Demo

In the previous article, I have setup a very simple web app with next.js and react.js. It feaures hot reloading in development and SSR, and has only one DOM in the index page:

1

<div>FWTA first web app</div>

In this article, I will setup cloud infrastructure, deploy and publish the web app to the world. Then continue setup with some of my favorite settings. From this point, it makes sense to use my favorite IDE or editor, a.k.a VS Code.

FWTA is a project embraces the vision to create cross-platform mobile first applications using morden web technologies and best practices, such as Server Side Rendering (SSR), Progressive Web Application (PWA), Accelerated Mobile Pages (AMP), PRPL Pattern, Severless Backend.

The final product of FWTA would be a cross-platform mobile progressive web app which

• has user experience and features close to native app
• runs on major platforms with responsive design
• optimizes performance on major platforms
• is discoverable using search engine (SEO)
• is hosted on serverless cloud infrastructure
• runs with offline support
• updates seamlessly
• distribute freely without app store

This is one of the article series which records thoughts and notes during my implementation of FWTA.

• Github
• Demo

First things first, let’s get started and setup the project.

Progressive web applications (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications. PWAs combine the flexibility of the web with the experience of a native application.

Wikipedia

In short, PWA makes web app experience close to native apps, plus the following features:

Setup a react npm package to share components or other modules in 5 minutes, without getting hands dirty.

A lot of tutorials online use webpack or even create-react-app to setup a react package. There are drawbacks for those methods:

• The babel-* dependencies bundle doesn’t come for free and usually hard to understand
• webpack.config.js and .babelrc could be hard to get them right

This tutorial gives you a silly simple way to create a react package without those drawbacks but the benefit from TypeScript: build time type checking (You can opt-out this benefit by writting just JavaScript). Which means your package is born with TypeScript support.

Jump to Source Code.