Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(pwa): dynamic hi route and F5 #98

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

userquin
Copy link
Contributor

@userquin userquin commented Jul 31, 2023

This PR includes:

  • allow use F5 in hi route even when offline, if the entry is cached it will work (press F5 once entered a name and before going offline): a lot of work per dynamic route
  • bump versions

If the /hi/<name> route is not in the hi-id-cache, the handlerDidError plugin will redirect to /.
EDIT: sometimes useOnline is not working, maybe some hydration/client problem, there is no warning/error.

This will work only when using build + start scripts, using generate + start:generate scripts will not work since node/express will return 404 for the dynamic route and will not be cached.

@netlify
Copy link

netlify bot commented Jul 31, 2023

Deploy Preview for vitesse-nuxt3 ready!

Name Link
🔨 Latest commit e4d61cc
🔍 Latest deploy log https://app.netlify.com/sites/vitesse-nuxt3/deploys/64c9039f8718070008c7cbe2
😎 Deploy Preview https://deploy-preview-98--vitesse-nuxt3.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@userquin userquin marked this pull request as draft August 1, 2023 08:52
@userquin
Copy link
Contributor Author

userquin commented Aug 1, 2023

I Will try to use custom plugins to avoid cache hi entries and make it working when offline and missing from cache

@userquin userquin marked this pull request as ready for review August 1, 2023 13:04
@@ -1,13 +1,31 @@
<script setup lang="ts">
const router = useRouter()
const route = useRoute()
const online = useOnline()
const hiOffline = ref(false)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can switch this to message and change it in checkHiOnline

Comment on lines +45 to +54
{
handler: 'NetworkFirst',
urlPattern: ({ sameOrigin, url }) => sameOrigin && url.pathname.startsWith('/hi/'),
options: {
plugins: [{
handlerDidError: async () => Response.redirect('/hi', 302),
cacheWillUpdate: async () => null,
}],
},
},
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It it possible to identify dynamic routes automatically in the Nuxt module? This is a starter template after all, hard code those path isn't really helpful

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, I'll try to add it to the module

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants