Markdown blog on Flask with Vite-built assets and WeasyPrint PDF export, rewritten from the Wagtail build that preceded it.
blogdockerflaskmarkdownpythonself-hostedvite
1---
2title: Creating a PWA with Next.js and next-pwa to improve your websites UX
3slug: creating-a-pwa-with-nextjs-and-next-pwa-to-improve-your-websites-ux
4date: 2022-06-18
5publish_date: 2022-06-18
6tags: webdev
7description: Turning your website into a PWA, especially if your website doesn't rely on an internet connection at all, can greatly improve its user experience by allowing them to access your web app anywhere.
8cover_image: lighthouse-pwa-check.webp
9---
10
11If you have a particularly large single page web app then a PWA can dramatically increase return conversions by reducing the need to redownload assets on repeat visits and provide a native app like experience on users' devices.
12
13Timelite is currently one of my apps that I needed to make into a PWA, you can check it out at <https://timelite.bythewood.me/>.
14
15
16
17With the creation of Timelite I knew I wanted it to be a PWA since it was a 100% client side web app. I've gone through a couple of Next.js PWA plugin iterations over the years but the easiest by far has been [next-pwa](https://github.com/shadowwalker/next-pwa). The installation process was done in two steps. First I had to install it with `yarn add next-pwa`, you can also use `npm install next-pwa` if you prefer. Then update my `next.config.js` file with the following:
18
19```javascript
20const withPWA = require("next-pwa");
21const runtimeCaching = require("next-pwa/cache");
22
23const nextConfig = withPWA({
24 pwa: {
25 dest: "public",
26 disable: process.env.NODE_ENV === "development",
27 runtimeCaching,
28 },
29});
30
31module.exports = nextConfig;
32```
33
34And I was done! I can now add the Timelite app to my phone's home screen or install it on Chromium based browsers.
35
36
37
38To be fair there is slightly more work you have to put into this installation if you don't already have a `manifest.json` file. I already had one since Timelite was already a PWA but your manifest goes in the `public` folder of your Next.js app and it looks something like this:
39
40```javascript
41{
42 "name": "Timelite",
43 "short_name": "Timelite",
44 "background_color": "#0D0221",
45 "display": "standalone",
46 "scope": "/",
47 "start_url": "/",
48 "icons": [
49 {
50 "src": "/static/logo.png",
51 "type": "image/png",
52 "sizes": "512x512"
53 }
54 ],
55 "theme_color": "#0D0221"
56}
57```
58
59Now you're truly done! I have a very simple manifest file for Timelite but you may want to add a few more lines and icons such as a maskable icon, which I currently don't have, but it would improve the way the icon looks on some users home screens. For more manifest options and documentation you can check out the [next-pwa README](https://github.com/shadowwalker/next-pwa#step-2-add-manifest-file-example).