Progressive Web App (PWA) default start URL

I am currently facing an issue with my Vue app, which is also a Progressive Web App (PWA). While the PWA functions correctly as planned, I realized that I am using generic paths for my web application. This means that in order to access the correct page, I must use the path /test/${user}. Due to this setup, when a user installs the app, they are automatically directed to the start path "website.com" instead of "website.com/test/uniqueid". Therefore, my inquiry is - is it feasible to configure the start_url so that when a user installs the PWA and launches the app, they are immediately redirected to "website.com/test/uniqueid"?

javascriptvue.jsprogressive-web-apps

Answer №1

For anyone looking for a solution, I came up with a workaround that may not be perfect but gets the job done. One downside is if the user clears their local storage.

I implemented an event listener for 'appinstalled' to track when the user installs the PWA and then set a localStorage variable.

window.addEventListener("appinstalled", () => {
            localStorage["installURL"] = window.location.pathname;
        });

In my scenario, in the router.js file at the root path, I check for the existence of this localStorage value and redirect the user to the saved path from the localStorage variable.

{
path: "/",
        name: "redirect",
        beforeEnter: (to, from, next) => {
            const installFrom = localStorage["installURL"];
            if (installFrom) {
                window.location.replace(installURL);
            } else {
                window.location.href = "https://youtube.com/";
            }
            next();
        },
}

This method can be easily adapted for other frameworks or non-framework applications. Just make sure to implement the same process before mounting your application :)

Answer №2

If you're wondering what to do next, here's a guide:

  1. First, add the PWA to your Home Screen using
  2. serves as your sign-in gateway.
  3. Once the user has signed in, redirect them to

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate a unique identifier $id within the ajax request

Whenever I make changes to my product, I would like the categories to show up in a dropdown menu. Currently, it only displays: -- Select your category -- For instance, if my $current_category_id = 2, I want the dropdown to show the relevant categories. ...

javascriptphpjqueryajax

How can I adjust the height of an iframe dynamically using AngularJS?

I wrote a function that resizes the height of an iframe element to always be 100% after it loads: app.directive('iframeAutoSize', [function() { return { restrict: 'A', link: function(scope, element, attrs) { ...

javascriptcssangularjsiframe

Tips for efficiently storing data in the Laravel database using Ajax

I'm attempting to upload a product with multiple images to the database without refreshing the page. Despite not encountering any errors in the console, I am seeing a long block of text that starts like this: <script> Sfdump = window.Sfdump || ...

javascriptphpajaxlaravellaravel-5

What is the reason that the select option change event does not allow the use of "this" and event.target to access the selected value

Why is it difficult to obtain the selected value in a select option change event using this or event.target, and instead needing to use cumbersome code like $( "select option:selected" )? This issue arose when I needed to access certain data-* attributes ...

javascriptjquery

Issue with Canvas Update in Loop while Using Three.js Library

In the code snippet provided, it takes in a number of scans which is always set to 2880. The canvas is divided into 2880 sectors to cover a full 360°. The code runs a loop from 0 to 2880, rendering colored points in each sector from the center of the canv ...

javascriptreactjsd3.jscanvasthree.js

Stop user from navigating to specific route using React-router

I am currently utilizing react-router with history useQueries(createHashHistory)(), and I have a requirement to restrict navigation to certain routes based on the route's configuration. The route configuration looks like this: <Route path="/" name ...

javascriptreactjsreact-routerbrowser-history

How can I invoke object functions stored in an array using Javascript?

I'm currently attempting to iterate through an array of game objects and invoke their update methods. The challenge is that game objects may have different update implementations - for example, the update function for an enemy is different from that o ...

javascriptarraysinheritancemethodsoverriding

Load the entire AngularJS webpage using AJAX requests

I'm facing a challenge where I need to integrate an entire legacy page, along with some AngularJS elements, into our new page using AJAX. Initially, all I could see was the raw AngularJS markup: Rank ID {{$index+1}} {{player.playerid}} Afte ...

javascriptjqueryhtmlangularjsajax

Issues arise when using bootstrap-multiselect onDropdownShow

I am currently utilizing the bootstrap-multiselect plugin created by davidstutz in conjunction with twitter bootstrap 3.3.0. My goal is to have a radio button selected when I click on the dropdown, however, this functionality does not seem to be working a ...

javascriptjquerytwitter-bootstraplaravel-blade

Utilizing Javascript to Parse Json Information

For my latest project, I am attempting to retrieve JSON data from a specific URL and display it on a web page using only JavaScript. This is all new to me. Can someone assist me in fetching the JSON data from the following link: I have been experimenting ...

javascriptjsonajax

Using Angular2 to assign the response from an http.get request to a class object

I am a beginner in Angular and I have a JSON file that holds the configuration URL for my application. Path: app/config/development.json { "apiUrl": "http://staging.domain.com:9000/", "debugging": true } Below is the content of my config.service.t ...

javascriptangulartypescript

I'm looking to search through multiple indices in Algolia using different search parameters for each index. How can I achieve this with Vue Instantsearch?

I've been using Vue Instantsearch and dealing with multiple indices. Within the ais-search-box component, I have set up a query to search through two indices simultaneously and display the results using an ais-autocomplete component. Everything is w ...

vue.jsalgoliainstantsearch.jsvue-instant-search

What is the best way to save an integer in HTML's localStorage instead of a string?

I've encountered an issue while using the localStorage feature in a game I'm developing. Specifically, the money variable should be increasing by 1 every second. Here's a snippet of my code: var money = 0; window.onload = function () { ...

javascripthtmllocal-storage

Angular: promptly exit out of ngClick event handler

I have a selection menu on my webpage that is essentially an unordered list, with each item in the menu formatted like this: <li ng-click='doCalc(5)'>Five</li> The doCalc function that is triggered by clicking on these items may tak ...

javascriptangularjspromise

I'm encountering an issue in my server.js file where I am unable to read the property 'collection' as it is undefined

I have encountered an error in my code: /home/ubuntu/workspace/server.js:43 db.collection('quotes').find().toArray(function(err, results) { ^ TypeError: Cannot read property 'collection' of undefined at Object.<anonymous> ( ...

javascriptnode.jsmongodbexpressmean

Tips for passing a timestamp to a Postgresql DB using a Button in a Form instead of a traditional rails time_select box

I am currently developing a CAD App in Rails 4 with Ruby 2. The goal is to provide users with a button on the screen to log an on-scene time and clear scene time, especially since most users will be using touch screen computers. Instead of using the defaul ...

javascriptrubyhtmlcssruby-on-rails-4

Vue - Display components next to sidebar

Having an issue with the vue-sidebar-menu. The sidebar is appearing over the components instead of beside them. Here is a screenshot of the problem: https://i.sstatic.net/cVgI6.jpg <template> <div id="app"> <sidebar-menu :menu="menu" ...

javascripthtmlcssvue.js

Issue with Magento site: Clicking on thumbnail photo does not update the large photo on mobile devices

As I navigate through a Magento site, I encounter a problem with the thumbnail images not reloading the larger image when clicked. Instead, the browser jumps to the top of the page and a hash symbol gets added to the URL. Based on this behavior, I suspect ...

javascriptjquerymagentomobileprototypejs

Sending two objects back in res.send() in an API: A step-by-step guide

I've got an API that looks like this router.get('/exist', async (req, res) => { try { const { user: { _id: userId } } = req; const user = await User.findById(userId); const profile = await Profile.findById(user.profile, &apo ...

javascriptnode.jsexpressmongoose

Run the JavaScript configuration (Object) prior to converting it to JSON format

Is there a way to implement functions within a JavaScript file (configuration for backend server) that execute before parsing the data to JSON? For example: config.js module.exports = { structure_layout: { BUILDING: "BUILDING", FLOOR: ...

javascriptjsonconfig