introduce pwa configs

[charleslavon]

This PR introduces a new dependency, next-pwa, for some baseline caching configs with a service worker that regenerates upon each next build. The goal is to support a more native app feel for near.org.

With improved caching of static resources for an increased level of functionality when dropping in an out of network connectivity, and supporting a browser's default ability to prompt a user to install the app to their home screen.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
near-discovery	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 2, 2024 4:56pm
near-discovery-testnet	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 2, 2024 4:56pm

[charleslavon]

@erditkurteshiSQA Thanks for finding and fixing the async error in that fetch function. This PR is much closer now.

I'll spend some time post-nearcon to optimize which files are cached, to ensure that the complied js is not cached, otherwise it will conflict with newly released components and dependencies.

[erditkurteshiSQA]

@erditkurteshiSQA Thanks for finding and fixing the async error in that fetch function. This PR is much closer now.

I'll spend some time post-nearcon to optimize which files are cached, to ensure that the complied js is not cached, otherwise it will conflict with newly released components and dependencies.

Sounds good, let me know if you need anything else from my side on this one.

[charleslavon]

@heycorwin @vanessadespain please checkout this preview build. This PR tells a browser client that near.org is an installable app. You should notice the download icon in the right side of your browser's URL field.

I've used The OS for an open web as the description here which is what users will see in several places instead of the website URL. What might you recommend?

[charleslavon]

We should probably use a short description with Near in the name, since this text is what apps will used when navigating to installed apps by text

[vanessadespain]

Small detail, is it possible to detect Dark Mode vs Light mode and use the white logo for Dark Mode? Looks like my chrome browser shows the modal in Dark mode with a dark logo.

Re: Description, maybe NEAR — the OS for an open web

Is there any other flow we should follow to review? I just clicked the download icon in the URL field.

[charleslavon]

thanks @vanessadespain i've updated it to match our website's current tag NEAR | The OS for an Open Web I'll look into darkmode.

Once you install the app. Try to search for it, open it, close it, etc. As you would another installed app like safari.

[charleslavon]

@vanessadespain dark/light support for PWAs has not yet been formalized and is still under consideration. We'll have to revisit this later.

[jackson-harris-iii]

Looks good, I installed the pwa on my device using the vercel link and the icon is a black square. Additionally the home page when not logged in is the near social feed, but that may be intentional?

[charleslavon]

thanks for testing @jackson-harris-iii Could you also try to enable push notifications on your mobile client and see if they are flowing correctly?

[jackson-harris-iii]

thanks for testing @jackson-harris-iii Could you also try to enable push notifications on your mobile client and see if they are flowing correctly?

I was able to receive notifications, but did have some intermittent strange behavior.

• I was presented with a double opt in; one from the website and one system.
• My first account did not receive notifications. that said, I use here wallet and it was receiving notifications
• Logging into another account (myNearWallet) I received notifications, but was presented with a 3rd opt-in (image w/purple square)
• When logging out of the second account and back into the first account. While in the first account I was receiving notifications from the second account and not the first.
  
  
  

[charleslavon]

really appreciate your help testing @jackson-harris-iii, thanks.
A few points and questions

• What kind of mobile device are you using?
• The double confirmation for push notifications is expected - our UI has a prompt which triggers the clients native confirmation prompt
• did the black icon only show up when your device is in a Dark mode?

Thanks for calling out that the logged-out experience drops you into the activity feed. I'm going to push a couple updates to test options with multiple shortcut links.

[jackson-harris-iii]

Glad to help @charleslavon!

• I'm using an iPhone 15 pro max running iOS 17.2.1

• I switched to light mode and that didn't change the existing icon. However, I changed my phone to light mode, deleted the pwa, and I re-installed it again while in light mode. This time the icon looks good. It also stayed the same icon when switching back from light mode to dark mode