DEV Community

Cover image for Creating a PWA with Remix ๐Ÿ’ฟ
Abdur-Rahman
Abdur-Rahman

Posted on

Creating a PWA with Remix ๐Ÿ’ฟ

Welcome to this week's article post, peeps. This week, we would be creating a small PWA app with Remix and remix-pwa. In the last article in this series, we talked about PWA in Remix a little bit and in this article, we would try and put that short talk together in an app.

Getting Started:

To begin creating our app, we would navigate to the folder we want to create our Remix app in, my favourite directory is Documents (always Documents folder). Open up your terminal and using the cd command, navigate to your chosen directory. After that, install your Remix app by doing:

npx create-remix@latest
Enter fullscreen mode Exit fullscreen mode

I am using "Vercel" as my deployment option for this project and would showcase the build after. I would also be using TypeScript as my language in this project (always TS). After installing, navigate into that folder and use the command code . to open it in your editor (if you're VS code, which you should, btw)

We are not done with the commands yet! Run the npm command:

npm run postinstall
Enter fullscreen mode Exit fullscreen mode

Now you can sit back and smile, good job you have set up your Remix app! You are nowhere done. Yet. Before we start editing our files, let's install remix-pwa. Run the command:

npx remix-pwa@latest
Enter fullscreen mode Exit fullscreen mode

and wait for the installation to finish. Halfway through, you would be required to choose the language you are using for this project
remix-pwa options
After selecting your chosen language, the remaining scripts would run and you are done with the installation. Now you have a PWA skeleton set up, and awaiting you!

Still one more scripts to run though, and that's for the dependencies needed, run:

npm run pwa
Enter fullscreen mode Exit fullscreen mode

and you are finally done. Awesome job!

Inspection:

Let's inspect our files a bit. If you've created a Remix app before, you would notice some subtle differences. First, we've got a new file in the app folder, entry.worker.[j/t]s. We also have a new folder, resources with a manifest file within the routes directory. Add the following code to the <head> of your app, right above the <Links />:

<link rel="manifest" href="/resources/manifest.json" />
Enter fullscreen mode Exit fullscreen mode

You could go on to inspect the files, I won't talk about their contents right now, cause I expect them to change somewhat in the coming days.

To completely set it up, import React into your root file and head into the import {...} from "remix" statement at the top of the root file and make sure useLocation and useMatches are imported too (You have to manually do that).

Don't worry about upgrades to remix-pwa, you could always do npm i --save-dev remix-pwa after every major upgrade. Even if you choose not to upgrade, your app would work just fine.

That's that then, let's start. Run

npm run dev
Enter fullscreen mode Exit fullscreen mode

and let's watch our PWA code to life!

Start Tooling:

Open your browser and navigate to localhost:3000, Remix's default templates are open. But that's not what we are after, open your devtools and navigate to the "Application" tab

SW

Cool! We have our manifest.json file and also service workers up and running. Let's not stand and stare all day! Time to create our App.

This is a redo of the short "Remix App tutorial" I published last week

I would be creating a fake e-commerce app complete with PWA features using the Fake Store API. I also won't show all my code steps but highlight my significant changes and decisions.

Let's get started. The first thing I love to do when creating an app is to pick a colour scheme, that allows me to easily visualize designs liberally within a set colour boundary. I love using Coolors to generate my palettes. I would also be using a purple scheme for this one
Palette

After that, I head over to Figma to create my App icons and get the right resolutions I need. (32x32, 48x48, 96x96, 120x120, 196x196, 512x512 px)

Thanks to pngtree for the icons too!

App icons

Building Time!:

I have created the basic apps and routes with Remix already. We have 3 major routes, a Home page, a product page and finally a category page. Quite a Simple layout.

Home Layout

Homepage Layout (not the best of designs, it's a fake store anyway)

Let's start talking about our PWA and customizing it.

First thing, I would edit the manifest.json file. We change our name and short_name. My app is called Remix Fake Store. Our short name would be Fake Store. The start url would be "/" cause our homepage would be the landing page of the app. display would be left as standalone because we want our app to have its unique interface. Our shortcuts would be a single shortcut, and that's to the homepage ๐Ÿ˜….

shortcuts: [
        {
          name: "Homepage",
          url: "/",
          icons: [
            {
              src: "/icons/icon-96x96.png",
              sizes: "96x96",
              type: "image/png",
              purpose: "any monochrome",
            },
          ],
        },
      ],
Enter fullscreen mode Exit fullscreen mode

Finally, I set the icons to my customized icons and set the theme and background colour.

Shortcut

Our shortcut looks good, we don't have much options anyway

I think our manifest is good to go. Another thing I want to add is Web Share feature. This allows us to share details straight from our app to supported apps. In my case, I would be sharing product links to other apps. We can handle that with WebShareLink API present in remix-pwa.

I create a button to handle the event and trigger the share API on click

import { WebShareLink } from "~/utils/client/pwa-utils.client";

<button 
  className="share" 
  onClick={() => WebShareLink(window.location.href, `${data.title}`, `${data.description}`)}
>
   <BsShareFill />
 </button>
Enter fullscreen mode Exit fullscreen mode

Share API

Awesome! Now we can share products with other apps on our devices including native devices. Let's do something naughty next, we would send notifications to our users at a random time about a new product and when they click it, it opens up that project.
Since Fake Shop API can't edit its database, we would send random products to them. (You would use real products in your app)

We would use the Notifications API and send the message at a random time. Let's go

const [random, setRandom] = useState<number>(0);
  useEffect(() => {
    const randomNumber = Math.random() * 30000;
    const randomProduct = Math.random() * (data.length - 1);
    setTimeout(() => {
      setRandom(data => data + 1)
      SendNotification("Remix FakeShop", {
        body: `New Item Here! Check it out \n${window.location.href}products/${data[randomProduct]?.id}`,
        silent: false,
        image: data[randomProduct]?.image,
        badge: "/icons/icon-48x48.png",
        icon: "/icons/icon-48x48.png",
      });
    }, randomNumber * 1000);
  }, [random]);
Enter fullscreen mode Exit fullscreen mode

I defined a random time (30000 seconds) in which the notification can be sent to the user, and I also defined a random state that changes every time a notification is sent. That means a notification is sent randomly to our user between every 0 seconds and 30000 seconds that contains a random product.

In a real app, you would want to handle this via the server (Push API).

All this while, we've been testing our app in Chrome. Let's install our app and have a look!

Installed App

Our App!

Let's add a navigation button to our App so users can move about from within the app.

Back Navigation

Looks much better. Let's add some optimistic UI to make our App a bit more friendly.

Trasition

Loving those transitions! ๐Ÿ˜„
PS.: I did change them to something more appealing later

Ok, let's deploy our App and re-cap a bit.

We created a Mock E-commerce app with Progressive Web Enhancement features including Share API and Notifications API. The site is fast and transitions make things look more like home. Lastly, it was fun to make.

Personally, building Remix sites before was fast ๐Ÿ”ฅ but there is something about adding PWA features that makes it even more appealing. Another interesting thing is that we didn't utilize up to 10% of remix-pwa features, yet we see & feel a big difference from our everyday web apps. I feel very happy contributing to the future of Open-Source and would continue to actively work on remix-pwa. I feel Progressive Web is the future of the Web and throwing Remix into that future would make for an exciting one yet! Can't wait to see what the future holds


That's this week's article peeps. Fun to write and fun to make. The code can be found on github and the site itself can be viewed on https://remix-fakeshop.vercel.app. If you have any questions, feel free to ask them. This week's outro would be short ๐Ÿ˜†. Enjoy yourselves peeps and always remember to give something back, for all your achievements, milestones, support. Give something back to those that made it possible. Till next time ๐Ÿ‘‹

Top comments (2)

Collapse
 
westernal profile image
Ali Navidi

Hi Abdur Rahman, first thank you for this amazing feature second I have a problem with finding the matching service worker for the manifest with the newest remix-pwa package I did everything the package said but can't find the service worker.

Collapse
 
shafspecs profile image
Abdur-Rahman

Could you please open an issue on Github? I don't understand what you mean by "can't find service worker".
And thanks for the feedback!