How can we have a URL for each screen?


#1

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


#2

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


#3

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.


#4

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?


#5

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!


#6

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)


#7

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