DEV Community

Ivan V.
Ivan V.

Posted on

9 1

Progressive web apps with Material UI (MUI), Next.js and Workbox

Setting up PWA's involves a lot of moving parts, so I've decided to create a template repository, that I would always keep up to date, and it will enable me to get started quickly.

demo: https://material-pwa.vercel.app/

repository: https://github.com/ivandotv/nextjs-material-pwa

Layout

The application supports both desktop and mobile layouts.

The desktop layout has a sidebar on the left side that can open and close.

desktop layout

The mobile layout has two options.

  • Traditional layout with a sidebar that can be swiped to open/close

mobile sidebar layout

  • Modern layout where menu items are at the bottom

mobile bottom menu layout

Theming

  • There are two themes dark and light, and they can easily be customized.

Onboarding slideshow

I've also included an onboarding slideshow which is usually present in native apps. This is optional and it can easily be removed.

onboarding slideshow

Service worker

The real hard part of creating PWA's is service worker integration, both in the build process and in production.
Service worker functionality is implemented with the excellent Workbox library

service worker setup

  • Service worker is written in Typescript and it will be compiled together with the rest of the code. The service worker will precache all the routes, images, CSS, and google fonts. Every time the app is built new cache manifest is created.

When the service worker is installed, the application will show a prompt to reload the application so the new service worker can take over.

offline fallback

Offline fallback is provided, if navigation happens when there is no network, the fallback page will be shown. Please note that the fallback files must be pure html,css, and js (no react, or css-in-js libraries). Fallback files need to be placed in the public directory.

Also, there is network offline detection, if the browser loses network connection, there will be a notification inside the app that the application is offline. You can test this via the Chrome dev tools network tab.

installation prompt

The application also has a custom prompt for the installation of the app. Please note that the installation prompt only works on the desktop OS'es and Android, no IOS.

app shortcuts

The application also has set some demo shortcuts which show up if the application is installed.

PWA shortcuts

Make sure to check out the demo:

demo: https://material-pwa.vercel.app/

repository: https://github.com/ivandotv/nextjs-material-pwa

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (1)

Collapse
 
zacbkh profile image
Zacharie Dupain •

Hi Ivan, thanks a lot!

It would be amazing to have a full tutorial, because I am confused since I see online other folks using library like next-with-workbox which you are not appearing to be using?

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay