Online Marketing

Gulp Setup – Progressive Web App Training

Modern web development involves quite a few tasks, running servers, optimizing images and processing source code. Now these are the kinds of manual tasks that you can automate with: gulp grunt make or other build tools. The world of build tools is constantly changing, but we chose gulp here for its relative longevity and its relative simplicity simply put gulp reads: a file called the gulp file to tell it what to do it then processes your source files, transforms them and writes the results To a build directory, this is a sample golf rjs file, it’s written in JavaScript with a couple of no js’ extensions for loading, other files, the require statements of the top load, the core gulp commands and the gulp interface to uglify.

These are known as gulp plugins and by the way, uglify is a program to compress and minify javascript. Now, gulp files are divided into a series of tasks. A task might run a server minify some code or even delete files. Each task should be one self-contained action. We define a task named uglify j/s and write some JavaScript to implement it. The gulp dots sauce task reads all the J’s files from source J s.

We then pass all those files into the uglify tool using the pipe command. Now the output of each command is ready to pipe into the next, so we use the gulp nest command to write the result into new files under dist J s. Snap formerly gulp is a cross-platform streaming task. Runner that lets developers automate many development tasks at a high level, gulp reads: files as streams and pipes the streams to different tasks.

These tasks are code based and use. Plugins the tasks modify the files building source files into production files to get an idea of what gulp can do check the list of gulp recipes on github gulp is an ode package and the plugins that it uses are also node packages. So you need to install node.Js first, this also installs the node package manager, and you should also enable gulp from the command-line and to do this install the gulp CLI package.

You can then go into your project or create a new one and have NPM install the gulp plugins. You need into your project right, your gulp file, j/s, and you can begin using gulp from the command-line here’s an example of creating a project and installing gulp plugins. The first line creates a new NPM project. This generates a package JSON file that lists your project’s plugins. The following commands install various example plugins, including gulp itself: the save dev flag updates the package JSON file with the corresponding plug-in the plugins are installed in a node modules directory with this method, you can easily reinstall all plugins and their dependencies later by using the package.

Json file, rather than reinstalling each plug-in individually, now note that plugins, a B and C a imaginary we’re just using those names to show how plugins work once the plugins are installed. They need to be loaded into the gulp file using require now you’re ready to define tasks. This task is named task ABC. It takes file from the some sources, files path and pipes and through functions from each of the plugins which modify the files.

The processed files are passed to gulp tests, which writes the files to some destination path. The task we just defined can be run from the command line by typing gulp space and the task name in this case. It’s gulp space task, ABC here’s a set of links for learning more about gulp ins. We’ve also built a code lab that takes you through common tasks, follow the link to get to the lab. Now don’t worry if you’ve missed any details, just look at the gulp documentation and our to find out more.

We supply gulp files with our code labs, so you’ll be all set for now. Let’s get back to writing PWA s and i’ll see you soon.


Online Marketing

Installing Google Analytics – Progressive Web App Training

We want to know what users are doing on our site, which pages are popular, whether users follow the paths we expect and if anything goes wrong. Analytics is all about collecting measurements of user activity on the site. Google Analytics is a service that collects processes and reports.

Data about an applications, use patterns and performance, adding Google Analytics to a web application enables the collection of data like visitor traffic, user agent, the user’s location, etc. This data is sent to Google Analytics servers where it is processed. The reports are available in the Google Analytics web interface and throw reporting API. Google Analytics is free and highly customizable.

Integrating Google Analytics is simple. First, you must create a Google Analytics account. Each account has properties, these aren’t JavaScript properties, but refer to individual applications or websites. Google Analytics then generates a tracking snippet for each property. This is a piece of JavaScript that you pasted into your page. It sends data to Google Analytics back-end. You can also use the analytics library to create custom analytics, such as tracking specific user actions or tracking push notifications.

I want to say a bit more about properties. An account has properties that represent individual collections of data. These properties have property, IDs, also called tracking IDs. That identify them to Google Analytics if an account represents a company. One property in that account might represent the company’s website, while another property might represent the company’s mobile app. If you only have one app, the simplest scenario is to create a single Google Analytics account and add a single property.

To that account. The analytics server will then generate a custom bit of JavaScript matching your account and property. This is the tracking snippets. This is the key part of the tracking snippet. The entire snippet needs to be pasted into every page. You want to track at a high level when this script runs. It creates an a syncs Tagg that downloads analytics is the analytics library defines the GA function called the command.

Q creates a tracker that gathers user data and sends this data as a pageview hit via HTTP request to Google Analytics. This data is analyzed and stored in your analytics account, in addition to the data gathered by tracker creation, the page view event allows Google Analytics to infer what pages the user is visiting, how long they are visiting them and in what order for simpler applications. This is the only coding required note that you can replace analytics j/s with analytics underscore debug KS for console debugging.

Using this version will log detailed messages to the console for each hit, sent it also logs warnings and errors for your tracking code. The data is sent to Google Analytics back-end where it is processed into reports. These reports are available through the Google Analytics dashboard. Here is the audience overview interface. Here you can see general information such as page view, records bounce rate, ratio of new and returning visitors and other statistics, it’s also possible to view analytics information in real time.

This interface allows you to see hits as they occur on your site. I encourage you to take some time and explore there’s an extensive set of features in the dashboard. You should explore the standard reports and look at creating your own. Knowing how to use analytics effectively is a skill in itself. Fortunately, the Google Analytics Academy offers a free set of online courses. I encourage you to install analytics on some of your sites.

If you haven’t already check out the free analytics Academy courses as well, then once you’re comfortable with analytics, come back and I’ll show you how to integrate analytics into a PWA. Thanks for reading and I’ll see you soon,


Online Marketing

Implementing the Web Payments API – Progressive Web App Training

Api is a w3c standard to eliminate payment forms for users and standardized payment collections for sites. It allows us to request payment and shipping information with a single API call.

This knows how to run Apple pay on iOS Safari and Google pay on Android. It’s not limited to those to any payment provider can write a plug-in. It’s not even restricted to one browser. It’s probably in the browser you’re using right now the browser simply acts as an intermediary collecting the information we need in a consistent way. Then returns a JSON object with the results that we can use to collect the payment.

If you have used a pay with Apple pay or pay with Google pay button in the browser, you already know what the experience will be, like developers previously used custom libraries to implement this, such as the Apple pay, API or the Google Wallet API, and if you Want to do that too great, but if you want to work with whatever payment system, the user has payment request. Is your friend, let’s take a quick look at the code flow and user experience? We want to buy this jacket, what happens when we tap buy now? This is an ordinary button with an ordinary event handler.

First, the site creates a payment request, object and populates it with some details. It typically has the price, a list of items being purchased and the available forms of payment. This is all invisible to the user. We need to trigger the payment user interface, you get the UI by calling payment request, dot, show this displays a native UI over the browser and returns a promise. The next few steps are all happening inside this promise.

The first screen is a summary of the information supplied by the app tapping on an item opens it the EPI stores, addresses and payment options securely. In this example, Larry can select his shipping address with one tap edit. The address or add another need to change. The shipping option no problem: it’s just kappa way note that changing this option may change the total price. The payment request api can handle this with a little help from your app notice, the multiple payment options, the api also handles country, specific payment methods and, finally, the user taps on pay.

At this point, the browser runs the selected payment service. This might be an app on your device or going across the network to a payment provider. The completed payment returns a special token that you can send to your server. The server has ways of verifying this token. Is this safe? The api is more secure than form based payments. The new payment instruments are based on modern cryptography. You don’t need to enter payment data that can be logged or observed at the point of entry, so to review payment requests, eliminates manual and tedious entry by storing the user’s information securely in the browser.

It works across browsers across OS platforms and can work with any payment service that wants to write just a little code now that you’ve seen how payment request works for the user, let me show you how to code it remember that the payment UI contains multiple sections. We need to populate these sections before making the request. The request needs at least three data structures, the payment options, the order, details and shipping options so we’ll create those then generate a payment request.

We will call show and get back a promise that resolves when it’s time to contact the payment processor, finally notice that we may want to or three event handlers. These are called while the UI is visible and can trigger updates when the user changes addresses or shipping options. Let’s walk through the steps in the UI and the corresponding code. First, the user taps by now. So we want to set up a payment request.

Remember that we need some data structures before we can create the request. The payment methods lists all the payment services that your site understands. It’s an array of payment method, objects and each method may have its own specific properties here. We’re listing the basic credit card method and Google pay note that I’m leaving out the details of the Google pay object as it’s pretty involved.

We want the user to know what they’re buying. This includes the core details of the transaction, how much money? What currency? And what list items you want displayed? Keep the line items fairly high level. It isn’t meant to be used as an itemized receipt. If you want more than one shipping option, you can define this structure notice, it’s a property on the transaction details. If you have multiple options include a selected bit, the browser will highlight the selected option and fire an event when it changes.

Now you can define what information you want from the API by default. Payment requests will only return the payment info if the user is logged. In you may have the rest of their information. If you need more these options, let you collect what you need. Take the data structures, you’ve just created and pass them to the payment request constructor. This should happen in response to a button tap or other user initiated action.

Now so far the screen hasn’t changed. We need to trigger the UI, take the payment request and call the show method. This returns a promise and opens the user interface notice. There’s a big block of code. After this, we still have a couple of steps until we’re done. The UI shows the details of the purchase and collects payment information when the user approves the promise resolves with a payment response object.

The payment response object contains everything needed to submit a payment for credit card payments. The response is standardized for non credit card payments such as Google pay. The response will be documented by the provider. Next, you should check that the payment is valid. Send the information to your payment processor for processing the UI will show a spinner while the request takes place. Okay.

So how do we remove the payment UI after we click payment? Even if it fails call payment response, not complete. You can include a message to the user. This tells the browser that the payment is complete and allows the app to notify the user of the result. Now, there’s one loose end to tie up what happens if the user changes their shipping address or options. This may change a total cost and, in some cases, may change a shipping options.

Payment requests can omit shipping, address, change, shipping, option, change and payment method change events. You should have event listeners for these and update details accordingly. Remember we’re making the update in the middle of a promise, just as we do installing the Service Worker, so we use a similar bit of code. We get the event and call update with on it. This takes a promise that resolves to a new transaction details record.

It’s not all that different from calling cache at all from the service workers install event that also returns its result via the event. The get new info method is something that you would write. It takes some data from the request and builds a new transaction details. Object. Here’s a reminder of what goes in the transaction details. Your code probably needs to copy from the old object to a new one.

We resolve the promise with the new details, update with then updates the payment request and the screen, and that’s it. You now have a seamless, easy to use checkout experience now that was a bit of a long example, but most of it is boilerplate check out the payment request. Samples at Google, Chrome, github, io, remember the process for easier payments starts with autofill. If you want more payment request, is there to help? You can also check out specific libraries for Apple pay, Google pay, Samsung pay and others they put up a pay with button on the screen.

They usually fall back to the payment request interface, but they may be an easier option for your users. The only way to know is to try them for yourself thanks for hanging in there through web payments. This is one of the most complex parts of building a PWA, yet it’s really satisfying and could be great for business. Take care and I’ll see you again soon.


Online Marketing

Indexing your PWA (Discoverability & SEO) – Progressive Web App Training

Every search engine has a different way of ranking pages, but they all depend on a web crawler to gather information, and when you build a JavaScript driven site, the crawler might not be able to find everything you might need to give it a little help.

While every search engine has its own way of crawling, there are two fairly obvious rules. First, if the crawler can’t see it, it’s not going to be indexed and everything needs its own URL. There may be a trivial solution for your site if customers always search for a landing page or other static content, but those pages be static content. This won’t index client rendered content, but that may be exactly what you want.

This does raise an interesting distinction. A PWA does not have to be a single page app, you could add a serviceworker do every page in a website or a multi page app. As long as these pages have the same origin and path, they will share a serviceworker. Another option is to serve a render the dynamic content and then let the client take over rendering this lets any crawler see and index. All of your content.

You can use these solutions with any crawler since there’s no JavaScript involved, and if you want your app to be indexed everywhere, you’ll have to render it on the server. You can write code that renders on the client or as server-side JavaScript, it’s called isomorphic JavaScript, but that assumes you’re using node or another JavaScript server. And if you want an easy test, you can run lighthouse.

It includes some basic SEO. Discoverability tests lighthouse runs some basic SEO tests as if you have an HTML only crawler each test has instructions for fixing or improving shortcomings. Okay, so the universal answer is not to depend on JavaScript, but Google’s crawler can run JavaScript. So you can index client rendered sites. As long as you follow some rules, there are about a dozen rules, but the top five will take you most of the way we’ve already covered.

The first rule make your content crawlable. That means rendering it so the crawler can find it. If you’re writing a single page app, the top five rules become these top five tips. Many developers provide navigation links with a hash for the URL and use a click listener. Instead, these should point to actual paths in your app to trigger changes. You also need to avoid URL fragments the part that begins with a hash sign these break many tools and libraries and are now deprecated.

We used to recommend hash-bang prefixes for crawling a jet-powered sites as a way to change URLs without reloading the page. But now you should use the history API. Instead, the next rule is to use canonical URLs for duplicate content. For example, amp pages normally have a server rendered page and the client rendered amp page. The client rendered page has a link back to the server rendered page using the rel equals canonical attribute.

The crawler will index the canonical server rendered page some developers, even shadow, their client rendered pages, with server rendered pages and use the canonical link to point back to the server. This makes more of the app discoverable tip. Number 4 also gives you great accessibility, use the native HTML elements whenever possible. Crawlers know what to do with an actual button, but won’t recognize a div of class button in the same way, finally use progressive enhancement, use polyfills, where it makes sense to support older browsers.

You never know which version of a browser is used in a particular crawler, so play it safe. Some simple changes can improve your data quality and give users much better results. One is to use the schema.Org annotations for structured data there, a predefined schema for common areas, such as e-commerce, scheduling and job postings search engines, can use the schema annotations to parse your data accurately.

The same logic applies to the Open Graph protocol, which allows any web page to become a rich object in a social graph. Finally, the Twitter cards provide a rich media card that displays, when anyone links to your site from Twitter, it’s important to test your work and work iteratively. So the you can see the effects of each change. Testing on multiple browsers is not only a best practice for everyday development.

It ensures your site renders correctly on multiple crawlers testing with the Google webmasters search console will crawl your site and show the result, and you should always pay attention to loading performance. Use tools such as PageSpeed insights or webpage tests to measure the loading performance of your site remember about 40 % of consumers will leave a page that takes longer than 3 seconds to load.

Of course, the most important rule is to treat client-side rendering as a progressive enhancement. If you test on a range of browsers, you’re, probably fine. If you want to be certain, you can use the fetch as Google tool on the site. If that went by a little fast see the Google Webmaster central blog for the details on how to make your PWA search ready. Then come back here and I’ll. Tell you how to measure user engagement in your PW A’s thanks for reading

You have to try the best pumpkin seed snack from Spunks! Learn about the creators by watching the video below.