So lets say you have a React-based mobile web app, that takes advantage of server-side rendering for the initial view ( for speed + SEO reasons ). There is no "index.html" file - the index file is dynamically built server-side and returned in the initial response.
Now lets say you want to add PWA functionality to that app. You hook up a service worker to cache assets, etc.
One of the core tenants of PWA's is that they provide an offline experience. Say we just want to show a refresh page, "You're offline, click here to refresh", when the service worker detects the user is offline.
Online examples provided by google talk about using an App Shell -- a static HTML file, which can be cached by the service worker on initial visit, and which will be the "shell" your react app lives inside. This shell ties in to showing an "offline" view.
How does this work with server-side rendering, where there is no "shell" html file, and each route can potentially return a different index.html file?
Any demos or examples of this functionality in the wild?
Any demos or examples of this functionality in the wild?
Yes!
Take a look at https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo, which uses the dynamicUrlToDepndencies option in sw-precache to define which underlying resources are used to server-render the App Shell HTML.
The service worker it generates will take care of updating the App Shell HTML whenever any of the resources it depends on changes.
In this model the service worker will return the same App Shell HTML document for all navigation requests, so it assumes that the App Shell HTML is generic enough to then be populated at runtime with the dynamic content that's associated with the actual URL via your standard client-side routing logic.
Related
We have a ExtJS7 app, that for special requests like reset password, that always opens a new tab via email reset link, get loaded in full. We would like to load only few pages that are needed to load for these kind of request
Is there a way in ExtJS that would only load a particular page and its dependencies
I have not seen tutorials on this subject in official documentation. Myself did the following - just created another app (or bundle) for logging. The backend is responsible for the logic of what to display (loginapp or mainapp) - in the absence of a session, the user receives the app login
Absolutely. You can make another app - each app is a page, and will have its own packaged dependencies.
That's the easiest approach. A more complicated approach is to break your application into several ExtJS packages. You can then configure the app.json to exclude all of the packages from the micro loader. You then need to load these packages dynamically, presumably after logging in.
Doing this, though, is extremely complicated, and almost certainly not worth doing.
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
What is the strategy to SSR the App Shell of my PWA when my SEO metadata is dynamic per route? For instance, on the /home route, I want just a title:
<title>Shop - Home</title>
while on /search, I want to add a description:
<title>Shop - Search</title>
<meta name="description" content="Search results" />
The issue is if I include this into my SSRd App Shell, my service worker will cache that specific page's version of the app shell. I also still want my metadata to change depending on the route my user is currently on. For this, I am using React Helmet. We are also using Prerender to cache each page on our app for SEO that will read our page's SSR metadata.
In general, you can think of your server side rendering as being independent from whether or not you use an App Shell.
SSR takes care of responses from clients that don't have your service worker installed—at least as of right, crawlers and bots will fall into this category. You can continue including page-specific metadata in each SSR response.
If you're following the App Shell model, your service worker will end up handling all (or at least most) navigations by returning the generic App Shell HTML. This won't have any page-specific metadata, but you could always adjust titles and other parts of the <head> via client-side JavaScript. Only "real" users, not crawlers and bots, should end up with your service worker installed, so you don't have to worry as much about relying on client-side JavaScript for populating the metadata.
I've angular app with lots of states and modules etc. Now, I want to send a link to the user. When user'll hit this url, I want to redirect him to a new tab rendering only that particular state (specified in URL) i-e I don't want anything else to be visible to the user. Or you can say, I want to open a popup window rendering that particular state's html in popup window . This is the approach that comes to my mind to sort it out.
Ps. There are Rest APIs at the backend which I am calling through angular resource service to bind data with the model of the views
Option
I've rest APIs on backend, So, I was thinking to developing s separate Nodejs application, And I will send nodejs application url to the user and in the default/home route I'll call backend API and, the returned resultset will be rendered in html file within nodeJs application and this way, I'll render the corresponding data to user's browser window.
This is the flow for that
I don't know if that is right or clever approach. Please suggest me what will be the best approach to sort it out.
Thanks in advance.
This is what my app looks like
Everything in the left side-nav is a module and clicking on this I am routing to a different state. I am using angular-material and lots of other dependencies in this project.
And this is what I want.
I'll refer a link to the user for example www.myapp.com/specificpage.html. And hitting this url, a new tab/popup will be opened rendering state defined in the same app but with some non-editable url. And it should like.
There are multiple ways to achieve this and each approach has advantage and disadvantage. You have to choose depending on requirement and architecture. Details are below-
Create a separate app - You can do it through separate code base or use the module based build process and include this module only for new app.
Divide application is two part, public pages and private pages - Include this page and required APIs for this page in the public modules for your app.
Send token in the link - If you want to make secure page, send short lived token in the eMail and validate token on the server before displaying page to the user.
I have a single page web app which has close to 10 different sections like
discussions
profile
video
etc , each of them have their states in the router as , it has its own controller and template and the urls are like
1. http://myapp/#/discussions
2. http://myapp/#/profile
3. http://myapp/#/video
when the angular app loads all the templates and js files are downloaded and at IIS only one request is made ie:
http://myapp/
but the things after '#' don't get passed to server. The UI router replaces templates at the client side but I want to track how many users visit the particular sections of my web app.
I cant do that from IIS logs as no resources are requested for individual sections in short i am expecting a log entry in IIS as below when a user visits discussion section
http://myapp/discussions
please let me know if I am correct in this approach or should i follow some other method.
A single page app, by definition, only makes an initial request to the server (IIS) to retrieve HTML and javascript. Subsequent interaction with your app is all handled by the javascript you loaded initially.
You won't be able to rely on your web server for tracking this. Instead, you should find something that can fire events from the javascript side, such as Google Analytics.