Router part of PWA opens blank on device (with Vue)

user_2097074 0
Viewed 3040

I built 2 PWA based on Vue (with Vue UI templates, with router and PWA already set up) but I get on both the same issue: after I add to Homescreen on device, when I open it from the app icon, the router viez doesn't show up and stays blank until I click on a router link. I don't understand why.

Example of one of them, my portfolio:

URL Link

GitHub Link

Some parts of files here that I think related to the issue:

router.js:

export default new Router({
  mode: 'history',
  base: 'index.html',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

firebase.json:

"rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  }
]
progressive-web-apps vue.js router
5 Answers

Had same issue. Turns out that solution is quite simple. You have to add/change this in manifest.json

"start_url": "/",
"scope": "/"
user_60948140

Edit: Checkout @webmint answer below, probably solve problem im better and clean way.

Orginal Post:

I solved my problem adding an alias to start page in routes (in my case "Login")

in manifest.json:

{
...
"start_url": "index.html",
...
}

in router config:

let router = new Router({
...
  routes: [
    {   path: '/index.html',
        component: Login,
        alias: '/'
    },
    {
        path: '/',
        name: 'login',
        component: Login
    },
...
user_53676220

At the risk of repeating kaligari's answer, I'd say that the required part is only

{ path: '/index.html', component: Home }

in the router config. You can also use an alias to make it look better on the client. Although, when used as a PWA, this makes no difference since the address bar is not visible.

{ path: '/index.html', component: Home, alias: '/' }

user_2021660

Add the following to your vue.config.js:

pwa: {
  workboxOptions: {
    navigateFallback: '/index.html',
  },
},
user_56534840

If it can help someone, here is what worked for me (after trying a lot of the above solutions and other ones on the web...) :

Context: PWA with Vue.js CLI 3.

Problem: After installing the URL on the "desktop" through the "Add to home screen" option in Safari, clicking on the icon opened a white page.

The same on Android (Chrome) was working perfectly.

I solved it with the following config:

manifest.json

  ...
  "start_url": "/index.html",
  ...

router.json (includes some Firebase config elements)

//......
const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            redirect: {
                path: '/projects'
            }
        },
        {
            path: '/login',
            name: 'Login',
            component: Login,
        },
        {
            path: '/projects',
            name: 'Projects',
            component: Projects,
            meta: {
                requiresAuth: true
            }
        },
        //......
    ]
});

router.beforeEach((to, from, next) => {
    const requiresAuth = to.matched.some(x => x.meta.requiresAuth);
    const currentUser = firebase.auth().currentUser;

    if (requiresAuth && !currentUser) {
        next('/login');
    } else if (requiresAuth && currentUser) {
        next();
    } else {
        next();
    }
});

export default router;

vue.config.js

module.exports = {
    pwa: {
        name: 'Xxxxxxxxxx',
        themeColor: '#000000',
        msTileColor: '#000000',
        appleMobileWebAppCapable: 'yes',
        appleMobileWebAppStatusBarStyle: 'black',
        workboxOptions: {
            navigateFallback: '/index.html',
        },
    }
};
user_33718620
Related