The PWA category

The problems

This category is pretty bad ans has a ton of problems:

1. Page load is not fast enough on 3G. Your page loads too slowly and is not interactive within 10 seconds. Look at the opportunities and diagnostics in the "Performance" section to learn how to improve. Interactive at 11 s
2. Does not respond with a 200 when offline
3. User will not be prompted to Install the Web App. Failures: No manifest was fetched, Site does not register a service worker.
4. Does not redirect HTTP traffic to HTTPS
5. Does not register a service worker
6. Is not configured for a custom splash screen. Failures: No manifest was fetched.
7. Address bar does not match brand colors. Failures: No manifest was fetched, No <meta name="theme-color"> tag found.
8. Content is not sized correctly for the viewport. The viewport size is 821px, whereas the window size is 1436px.

Fixing the problems

Issue #8 disappears when we dock the DevTools at the bottom of the screen.

After that there is a lot of work to do!

From 12 to 77 points

Resources:

• Building a Progressive Web App with Next.js - Part I
• Building a Progressive Web App with Next.js - Part II

Install the following packages:

npm i -D webpack-pwa-manifest next-workbox-webpack-plugin
npm i --save @zeit/next-css express lru-cache

• Create a component for the service worker.
• Create a next.config.js file to enable the Service Worker and handle the manifest.
• Create a server.js file to setup a custom server (also here).
• Override the Next.js <App /> component
• Manage the static resources

This brings us only to 77 points, but we'll take it as a small win and we'll get back to it later.

⬅️ The SEO category | 🏠 PWA | The Performance category ➡️