How can we have a URL for each screen?

Progressive Web App Checklist | Google Developers

I think I’ve brought this up for this forum. This came after reading this excellent checklist provide by google developers, which brought me back here. The necessity that each page/screen has a URL.
The main reason - If want shareability on social media, you need a URL. Also, privacy, terms and conditions (legal compliance), forgot my username/password recovery, among other possible needs.

Any help here on how to achieve this?
Has anyone here faced this problem?

thank you

I have a partially built plugin / proof of concept that loads react-router-dom. I load it in the first screen and confirmed that I could load components based on the url

1 require “react-router-dom” in main.js

this.getReactWebPackages = function() {
   return {"react-router-dom": "^5.1.2"};
}

2 import the lib in the plugin like this

import { Router, Route, HashRouter} from 'react-router-dom'

3 setup a router in render()

  <HashRouter >
      <Route 
            exact path="/camera" 
            render={(props) => <Camera {...props} />}   >
            </Route>          
    </HashRouter>  

Will build out more later when I have $time.

I don’t have a clear design functionality yet, thoughts?

I’m working on learning plugin UI now.

~Robert

Hi Rob. This is great! Reading about PWA, the proper setup, installation, the “Manifest”, I would start from the SCOPE, which defines the navigation scope of a web application. Also considering react-ga probably could be handy. btw, I didn’t mention before, having a URL for each screen is mandatory to use Google Analytics.

Hi Marcos, I like the SPA way of building so was looking at tracking single page apps with google analytics I found this and see that analytics can track view changes in a SPA.

It looks like react-ga does expose the functionality mentioned in that article, namely

ga('set', 'page', '/new-page.html');
ga('send', 'pageview');

vs

ReactGA.set({ page: "/new-page.html" }); // my extrapolation from docs
ReactGA.ga('send', 'pageview', '/mypage');

I haven’t looked at SCOPE, does it define all the routes in the app?
And what about dealing with crawlers, do you know if pushing a site map will get that job done?

Hi Rob. Sitemap is important for SEO and will help your web app be more “indexable” by crawlers.
Let me read this SPA link shared. Sounds interesting!

I worked on the routing plugin over the weekend, unfortunately 20 hours was not enough for me to figure it out and I have to go on to something else for the moment.

I will have to solve the problem sometime, so I will let you know when I come back to it.

(I’m writing here because I can’t find your list of screens, please send me a link to that post)

1 Like

reading this article. Maybe this will help “…push notifications, background sync, and offline usage”