search

vuejs-templates / pwa

PWA template for vue-cli based on the webpack template
MIT License
3.04k stars 508 forks source link

Offline support when using html5 history api #188

Closed sohailalam2 closed 6 years ago

sohailalam2 commented 6 years ago

What are the best practices (and how to go about doing it) to support offline mode when using html5 history api for url rewrites?

For example, (hypothetically) I have a PWA SPA application at https://abc.xyz which has internationalization built in. So when I visit this link, the Vue router redirect me to https://abc.xyz/en.

This works perfectly when I am online (ofcourse, the webserver is also handling this redirect so that app works even if you directly visit the said link).

However, its a different story when I am offline. The service worker caches all resources correctly so when I visit the URL https://abc.xyz everything loads up as expected. However, now if I manually type the URL to https://abc.xyz/en, the app fails to load up.

Any pointers on how to achieve this?

sohailalam2 commented 6 years ago

For those of you who also faced this issue - this solved it for me :)

Updating the SWPrecacheWebpackPlugin webpack config

new SWPrecacheWebpackPlugin({
    ...
    navigateFallback: '/index.html'
    ...
})

Source: https://stackoverflow.com/questions/50526752/how-to-enable-offline-support-when-using-html5-history-api