I made a progressive web app with Create React App.
The user shall be able to make data available offline by clicking i.e. a button. Is there a convention or best practise to do that?
I have read this awesome documentation, that helps to make your PWA work offline
Part 1
Part 2
Have a look at workbox. It's used in Create React App as well as Next.js.
The actual answer to the question can be found in section Access Caches from Your Web App's Code.
Related
I have a react js app built long time ago that uses 3rd party libraries and APIs, now I want to add this app to saleforce. Is there a way to add the existing react js app or do I have to build a new app using the saleforce development tools? Any advise and help is appreciated.
Can you live in an iframe? There's lightning:container tag that could help you. Search questions or blogs that mention it, on SO and on dedicated https://salesforce.stackexchange.com/. Iframe sounds meh but there are ways for it to communicate with parent ("canvas apps" in documentation - and it has nothing to do with <canvas> tag), silently log in to SF, use REST API...
You could try to rewrite your app to native Aura/LWC but you won't be able to call APIs directly from JS. You'll have to pass through SF server-side language called Apex. Which is doable but more for you to learn. There are some more restrictions, although light DOM and LWS help with these, many things Locker service blocks are OK in LWS.
There's also hybrid approach with loading your app as a library?
I have a complex requirement, where we have an asp.net webforms site we want to try and upgrade in a step by step way. We are considering using React (frontend, with asp.net core backend) for this purpose. The website has an iframe in the centre, and we want to try and replace the old content with the new completely separately hosted React content. This needs to occur after clicking a link on the asp.net webforms page.
I managed to create a ‘Create React app’ website prototype and it was simple to load it into the iframe by linking directly to the React website. I came unstuck when I wanted to try and add an authentication token into the header (oauth2 with openid connect for use with IdentityServer). The only way I could see to do this was to try using javascript to add the header by making an XMLHttpRequest object (or I tried also using the Fetch API) and this partially worked but not everything was correctly loaded.
I see for example an answer here How to embed React App into another website which I assume is the best way to add the website into an iframe.
So, I can’t find much on the internet about dealing with authentication… I guess because asp.net webforms are so old by now, but I assume others have wanted to do something similar before. The question I have, is what would be considered to be the best way to do this? I don’t know if I’m going in completely the wrong direction.
I am new to PWA, i am curious to know that is it possible to create a PWA in angularjs?
please provide steps to make PWA using angularjs if it is possible to create PWA using angularjs.
There's nothing framework-specific about PWAs - your site just has to meet a certain set of criteria:
Everything is served over HTTPS
The design must be responsive
Your app must be available offline (i.e. it needs a Service Worker)
You need to provide a manifest file containing metadata about your application
Your app must work in all modern browsers
Page transitions shouldn't block the app (i.e. you need to show loading screens/spinners if things are taking a while to load)
Each page in the app needs a unique URL
All of that is achievable with Angular 1 - it'll probably be easier with a modern framework, but there's nothing stopping you sticking with what you've got, for now at least.
look at this github project https://github.com/addyosmani/angular1-dribbble-pwa
I have a webapp devoloped using angular 1. I have to convert it to progressive web app is this possible, I had looked into many tutorials in youtube but all of them uses angular 2 and above. Does angular 1 supports this PWA features? Please help...
There's nothing framework-specific about PWAs - your site just has to meet a certain set of criteria:
Everything is served over HTTPS
The design must be responsive
Your app must be available offline (i.e. it needs a Service Worker)
You need to provide a manifest file containing metadata about your application
Your app must work in all modern browsers
Page transitions shouldn't block the app (i.e. you need to show loading screens/spinners if things are taking a while to load)
Each page in the app needs a unique URL
All of that is achievable with Angular 1 - it'll probably be easier with a modern framework, but there's nothing stopping you sticking with what you've got, for now at least.
Addy Osmani (who I believe works at Google and is pretty heavily involved with the PWA spec) has a good example of an Angular 1 PWA on his GitHub.
My code was successful, I had added serviceworker.js and manifest, I forgot to clear the caches in my mobile. That was the problem and not with the code. Now its working fine. Clear the caches in test devices and it to homescreen once again and it will work.
If i develop a mobile application using a specific BaaS SDK like parse. later on i decide to move to another BaaS.
Will the user need to remove and then install the app. Or i can offer the new application as an update?
Regarding moving from Parse to another BaaS I know about apiOmat which lets you import all your data from Parse (see this blog post). Then you upload your updated app to the app store / play store and the user only needs to update the app - no removing and reinstalling necessary. Have a look in the official documentation here.