search

Polymer / pwa-starter-kit

Starter templates for building full-featured Progressive Web Apps from web components.
https://pwa-starter-kit.polymer-project.org
2.36k stars 431 forks source link

Call a function once and once only when a view is first loaded #304

Closed freshgrapes closed 5 years ago

freshgrapes commented 5 years ago

Based on the provided comments, I see that the loadPage() function under 'src/actions/app.js' in the PWA Starter Kit will run its codes anytime a specified view is navigated to after that view is loaded.

But what if I want to have a function be executed once right after a specific view is loaded, but not anytime it is navigated to? and what if I want to have another function run when View A has been navigated to once, but the user stays in View B for so long that View A is now "killed from the background" by the browser?

I guess what I am looking for is the PWA Starter Kit's equivalence of Android app development's onCreate() and onDestroy(), because I am trying to use Firebase Cloud Firestore with PWA Starter Kit and I need a place to call "Start listening to database changes" once and another place to call "Remove the listener" once.

Where in the PWA Starter Kit can I achieve the above-mentioned goals?

Thanks!

LarsDenBakker commented 5 years ago

You can use the class constructor for one time work when the element is created, or the connectedCallback for one time work when the element is appended to the DOM. In this case I think the constructor is appropriate, although it might not be efficient to listen to database change on inactive views...

freshgrapes commented 5 years ago

@LarsDenBakker

although it might not be efficient to listen to database change on inactive views...

Is there any good place in the PWA Starter Kit to do this?

LarsDenBakker commented 5 years ago

The app sets an active boolean on the active page. You can use that to know when to connect to firebase.

motss commented 5 years ago

Sounds like firstUpdated is the right place for that. firstUpdated runs once when the element first rendered since you can't have many first render unless it has been destroyed.

freshgrapes commented 5 years ago

@LarsDenBakker Where would you put the listener codes so that they run regardless of whether an element is connected or not?

(So that we can

be efficient to listen to database change on inactive views

)

Thanks!

keanulee commented 5 years ago

constructor is run once the element is created (even before the element is connected). For more details see https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements and https://lit-element.polymer-project.org/guide/lifecycle (LitElement specific docs).