Tips for managing the content section during AJAX page transitions in a Progressive Web App (PWA)

I am completely new to native apps, which might be beneficial for this question.

Due to the service worker effectively caching everything, I believe there is no need to reload the entire webpage when switching pages by clicking on a link. Therefore, my plan is to only switch the content, use history pushstate to update the URL, and change the title. I have that part all figured out.

However, I am struggling to find resources that support either of the two methods I have in mind for loading content:

  1. Load center content via AJAX with HTML.
  2. Load center content as data only and render the HTML using JS.

The first method seems simple but may result in a larger payload.

The second method appears more complex as it would require HTML templates to already be present in the JS. Furthermore, I suspect there might be a way to open a heavily cached page (such as an article) and replace its contents without reloading the whole page. However, I haven't been able to find any resources discussing the pros and cons or offering reliable information on PWA AJAX page switching.

Any insight or credible information on this topic would be greatly appreciated.

EDIT
Despite continuing to research this issue, I have yet to find clear guidance on how to handle dynamic content via AJAX. I am still unsure whether I should convert JSON data to HTML in JS or have it sent as HTML directly from the backend.

In support of the second option, I have realized that my hypothesis had some validity. By utilizing pure.js to fetch an HTML template from a hidden template tag and dynamically generate HTML from JSON via AJAX.

javascriptjsonajaxprogressive-web-apps

Answer №1

Why do you have to make things so complicated? Can we please take a look at your code?

If you're trying to fetch data from a database using ajax, all you need is a simple jQuery plugin.

$(document).ready(function(){
var contentData1 = document.getElementById('contentData1');
  $(function() {

    $.post("pathToPHP.php",{contentData1: contentData1},function(data){
        $("#container").html(data);
    });
});

Your "pathToPHP.php" file should be able to retrieve the desired data for you.

echo "";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exposing external variables within the setInterval function

Here is the snippet of code I am working with: update: function(e,d) { var element = $(this); var data = element.data(); var actor = element.find('.actor'); var value = basicdesign.defaultUpdate( e, d, element, true ); var on = templateEn ...

javascriptsetintervalclearinterval

AngularJS and the JavaScript programming language

Struggling with opening an Excel sheet by clicking on a button? I've written the code, but encountering issues. function openFile(strFilePath) { var objExcel; //Create EXCEL object objExcel = new ActiveXObject("Excel.Applicati ...

javascriptangularjsexcel

What is the best way to fill radio buttons within a form that is being displayed as a string in PHP?

Looking for assistance with a PHP script that receives data from jQuery through AJAX and then executes a query to retrieve information from MySQL. Once the data is retrieved, I aim to populate a series of radio buttons within a form with this data. The for ...

phpjquerymysqlajaxforms

Node.js: The Ultimate Solution for Automatic Data Saving

Currently, I am working on a collaborative project using Node.js, MySQL, and React. I have encountered some difficulties with the ToDo list section. I would appreciate any advice on the best and quickest method to automatically save data or options to the ...

javascriptmysqlnode.jsreactjsweb-applications

Verify whether a specific value exists in my React array; if it does, display a specific component

I need to display different components based on the following criteria: Whether the items contain a specific value And if all 10 items have that value const DisplayComponents = ({ data }: Props) => { const filteredItems = data.items?.filter( ( ...

javascriptarraysreactjstypescript

What is the best way to bring files into your project from a different directory?

Recently, I've been working on an app that consists of a backend repo and 2 frontend repos. Now, I'm facing the challenge of sharing code between these two frontend repos. app/ mySecondApp/ Despite my efforts, I'm unable to successfully imp ...

javascriptreactjs

Unlock the Power of jQuery Hashing with the Addition of Additional Variables

Looking for a way to include an additional variable in a URL like the one above. I've experimented with different methods but I'm not certain which is the most effective. For example: Currently using JQUERY to detect the HASH value: if (window ...

javascriptjquery

The Request object appears to be void within a Lumen API

When attempting to upload an image file in a lumen API using an ajax call, the image is not being received in the lumen for processing, as the Request object appears to be empty. Using Ajax var file = $('#img')[0].files[0]; var form_data = new ...

phpajaxlaravelapilumen

Tips for Utilizing CSS Overflow: Hidden to Prevent the Parent Container from Expanding

I have a fixed width column and a fluid column. In the fluid column, I want to display a string with nowrap so that it does not overflow the container. Here is an illustration of how I want the text to appear: --------------------------------------------- ...

javascriptjqueryhtmlcss

Issue with Angular: Mobile view toggle button in the navbar is unresponsive

While the dropdowns are functioning correctly in web mode, the navbar toggle isn't working as expected in small screens or mobile mode. I've been trying to figure out the issue by referring to code from CodePen that I am learning from. Despite i ...

javascripthtmlangularbootstrap-4angular-ui-bootstrap

Difficulty encountered when deploying cloud function related to processing a stripe payment intent

I've been troubleshooting this code and trying to deploy it on Firebase, but I keep running into a CORS policy error: "Access to fetch at ... from origin ... has been blocked by CORS policy." Despite following Google's documentation on addressin ...

javascriptnode.jsvue.jsgoogle-cloud-functions

Using Three.js to transfer one object's rotation to another object

I have been attempting to transfer one object's rotation to another with no success using the following methods: //The first method rotates much faster than the original object's rotation boxme1.rotateOnAxis(new t.Vector3(0,1,0), cube.rotation.y ...

javascriptthree.js

Automatically scroll to specific states on Angular UI Router

I have implemented a controller that automatically scrolls the window to the top whenever a state change is initiated: $rootScope.$on('$stateChangeStart',function(){ window.scrollTo(0, 0); }); However, I am facing an issue where certain state ...

javascriptangularjs

Discover the sub strings that fall between two specified regular expressions

I am looking for a way to extract substrings from a string that are between two specified regex patterns. Here are a few examples: My $$name$$ is John, my $$surname$$ is Doe -> should return [name, surname] My &&name&& is John, my & ...

javascriptreactjsregex

Trackball's controls are not responding correctly

Recently, I have been using trackball controls and I've come across a strange bug. When I pan and then zoom out from my new position, the controls start to behave erratically, pulling towards the origin (the further I pan, the worse the issue becomes) ...

javascriptcontrolsthree.jswebgltrackball

Is it possible to pass a value back from an Atlassian Forge resolver to a Vue custom UI component?

I have a custom Atlassian Forge resolver and Vue Custom UI setup import Resolver from '@forge/resolver' const resolver = new Resolver() resolver.define('getIssueKey', ({context}) => { const jiraKey = context.extension.issue.key ...

javascriptvue.jsatlassian-forge

What is the process for incorporating a custom attribute in Quasar?

My goal is to include custom properties in the Quasar framework, but I am encountering an error with ESLint. It displays the following message: Array prototype is read only, properties should not be added I am looking to implement an extend method for Arr ...

javascriptvue.jsvuejs2quasar-frameworkquasar

Skipping code in JavaScript/jQuery function on window load

I have created a function that applies specific CSS rules to elements when the window is fully loaded. Check out my code below: function applyHover() { $('.view_preloader .overlay').css('opacity',1); $('.view_pre ...

javascriptjquery

What is the process for bringing a function into JavaScript?

I'm currently working on a Discord bot using JS with Node.js, and I've decided to organize my commands by writing each one in a separate file within a "commands" folder. Here's a snippet of my code: in index.js : const help = require("./comm ...

javascriptnode.jsdiscorddiscord.js

Interactive React Dropdown Component

As a relatively new React user, I am attempting to develop a custom component that will showcase a list of items within a select menu. The goal is to allow the user to make a selection from the menu and then click an "Add" button below it. Upon clicking th ...

javascriptreactjsreact-bootstrap