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.
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.
PWA is nice, but getting it to work correctly and elegantly is not that easy. I have spent a lot of time figuring out how things work under the hood and how to use workbox. Then I finally came up with an elegant solution myself, next-pwa, which allows me to add PWA support on a next.js app cleanly and easily.
With the plugin, add PWA is as easy as add
const withTypescript = require('@zeit/next-typescript')
Also, add one line in release script to copy the service worker and precache script to deployment folder. Now the web app will have full PWA support and could run offline.
One big step here is that cold start is not a problem anymore, because I use workbox to implement a pattern called
Stale While Revalidate. Which return the cache copy of the web app first upon request, and send http request to server to refresh the cache content on the background.
Image from Workbox Docs
Therefore, the user only feels snapy page load instead of waiting for http request to complete fetching resources. Next time the user open the app, the refreshed cache is used, this process also eliminates the need to update the app constantly, better than native app!
File sizes remains unchanged
weiwio:FWTA weiw$ ls -ohSR dist/functions/pages
Code start time is not a problem at this point.
- Performance: 97
- Accessibility: 63
- Best Practices: 100
- SEO: 100
- PWA: 100 - Nice!
The snapshot commit could be find here.
Global State Management, firebase authentication, firebase firestore …