Categories
Online Marketing

Trusted Web Activities

We know that there are some use cases where it makes sense to integrate your existing web experience into your native app, I’m Pete a developer advocate on the web team at Google. Let’s take a look at how you can do this today and what we’re doing to make your web development experience better today, you can do this either using a webview or a custom tab.

Well, each of these has their own benefits. They’re also drawbacks to each with web views. The content runs fullscreen and supports many of the PWA features. It has the ability to use post message to send messages back and forth between the webview and your native code, which makes it possible to invoke certain native functionality that isn’t available on the web. On a flip side, web views our sandbox completely from the user.

They don’t share the same cookie, store or storage and they don’t have access to the users, safe passwords and so on. The other challenge that comes up is that web views may be out of date. Web views on devices running pre, lollipop, aren’t updatable custom tabs also support content in full-screen mode and because they’re powered by the user’s default browser they share cookies, storage, passwords and more.

It’s always up-to-date and supports the full gamut of capabilities required for progressive web apps. But there is that name and address bar across the top. The user knows that they’re looking at web content, which isn’t always what you want. We’ve heard from you that you want an easier way to launch full-screen web content from a native app, but do it using the users preferred browser at the chrome dev summit.

Last year we announced a new type of activity that Android developers can use to embed trusted. First party web content trusted web activities provide a new way to integrate parts of your web experience into your native Android, app they’re powered by custom tabs, which means the content is rendered by the users up-to-date browser instead of an out-of-date webview. It shares the same cookies and storage within the browser.

It has access to AP ice that aren’t available in web views. This isn’t designed as a mechanism to simply wrap your site and dump it in the Play Store. A simple mistake can cause some drastic problems. For example, the user installs your app from the store hops on a plane and launches your app. The user is going to see the dinosaur because the app hasn’t installed the serviceworker yet trusted web activities are designed to make it possible for you to use the investment that you’ve made in your progressive web.

App within your Android, app, similar to chrome, custom, tabs trusted web activities run full screen. Each activity of your app is either completely provided by the web or an Android activity. There’s no way to combine them. For example, you can’t use Android components for navigation and content, rendering via the trusted web activity. Transitions between web and native content are between activities trusted web activities do have some constraints, you can’t just show any content, it must be yours, and you must be able to prove that it’s yours by adding a set of digital asset links, you must include an intent Filter for the opened URL in your Android manifest your app must pass the chrome, PWA install ability, checks which includes being served over HTTPS, registering a serviceworker and including a manifest and very important.

Your app must still meet all of the normal Play Store guidelines. Let’s take a look at what’s involved in adding a trusted web activity to your Android app. There are essentially two steps that we need to complete to embed or progressive web app in our Android app. First, we need to add a set of digital asset links. These links establish a relationship between our web content and the trusted web activity.

By establishing this relationship, our android app can verify that the content is served is ours and meets that first party requirement. Then we can add the activity to our Android app and show our web content and our manifest file. We need to tell it about an asset statement by adding this metadata attribute. Next, we need to update the strings.Xml file and our Android app and tell it about our web content where it lives and give it the permission that it needs oh yeah and all those quotes there.

Sorry they do need to be escaped like that. Now we need to create and deploy the assets link JSON file, using key tool on the certificate that we use to sign our Android app, we’ll get the sha-256 hash so that later Android can verify the certificate and that hash, then, in the asset, links JSON file. Will include that hash, our package name and a few other boilerplate pieces and deploy it to the dot well-known directory.

The file makes it possible for Android to verify the relationship between what’s being served and our Android app. We’ve set up the digital asset links we need now. We can create the activity. There’s a bunch of boilerplate code required to launch the activity that I’ve kind of glossed over here, but we’re working on adding that to the Android support library, so that you won’t have to deal with it in the future.

Once the boiler stuff is complete, you can create the new intent set, the URL and open the web content in your trusted web activity. Today, this is available on android and chrome 68, which is currently chrome, dev and we hope to see it land and stable sometime in q3 of 2018 to learn more check out gqo slash trusted web activities. There’s a great post there with everything you need to know to get started and a sample that you can use to try it yourself.

Thanks for reading


 

Categories
Online Marketing

Publish Typescript Package to Github & NPM | Typescript package publish | Common JS and ES6 support

Okay. Recently github has provided this feature that you can also publish the same package to github as a github module. So we will try to explore both the options, how you can publish a package to npm, which is a node package registry node, package manager right and with there we have all the packages are available.

If you look at the express react, angular all the packages, we are doing the installation and we are fetching from the npm registry right now. You can also think about how can I publish my own package? You created some kind of utility, some kind of a commander tool, some kind of helper tool, cli tool which you wanted to publish like. You created some kind of a mock library which is going to mock your database in local storage or any other kind of http library, which is helping you same as xeos cache apis and all you wanted to publish those kind of packages.

So how can you publish and what all kind of module system you can support like uh? Consider this particular package react, or you can say express so express – is a npm module right and this some somebody has published this particular package, and now you will be able to install this particular package and use in your application right. So somebody has published it, and now, if I wanted to use, I can use it just like using require commonjs module or you can also use it in the typescript support ufi.

You can see import express as alias from express, so it is supporting everything because the alias type type script – typing type definitions are available for express. Similarly, if we just talk about angular angular has at the rectangular, where we have all the packages like angular c lines. Now, if I wanted to install it, what I will do is, I will simply do npm install minus c, it’s like a utility package, so you will install it globally and then you can.

You will be able to run all these different different commands right. Similarly, all these packages are published by someone you can see that this is the reference repository. This is the home page last published versioning. You can see the semantics versioning where you are actually major minor and patch version right. So all these things you have to manage now to support all these different things like your package, should be able to be imported as a common gs modules or the esx module.

When I talk about es6 module means you will be using the required syntax as a common gs module right if you are using import, export import, react from react or construct equal to require react. Both both are different right. So simple, like i’m just using this writer import react construct equal to require it. This is a common json view of common gsb of importing the module, but your module, which you publish to npm, should support common gs export so that you will be able to use it like this or otherwise.

You will do import react from react. Library – and this is what you do – this is a es6 view of import right, so we will see how you can publish a simple utility and which can support both and what we are going to do. We are going to support both the system, common gs and esx import, and we will use typescript for it because if you are using es6, so you should also be providing the typescript interface and typing the type definition for your library.

So, if any typescript project you are writing for the node.Js or the client side, you should be able to provide type definitions for it. Okay, so we will take a look, the basic things before publishing any npm module. So, first of all, you should have a npm account. Npm account means you should be able to login like you can do the sign in and you should be able to create a package. So I do have my account just try to see.

If I can do, I don’t have password on the system, so you should be able to do a login right. So how you can you can do all these logins using just simply npm login, okay here it will ask you your username. So if you have account, then you would be able to provide it and your npm password enter password. When you create your account, you should be getting it and your email id okay. So I am logged into this repository to this registry.

It’s npm global registry. Here I can publish my public project, a public library or private library. Okay, now coming to the code code, can be as simple as basic type script code or basic javascript code. What I am doing is, I am creating the build for common json eses es6 support. So I am using the typescript here if you can see the package.Js the definition here, I am using the type config right so few things which you just need to take care.

While you are publishing a typescript package, because you are writing code in typescript, you will be uh exposing the interface all the type definitions. So you should always make the declaration. True four types of packages – and this emit metadata decorations, experiment and decorations if you’re using any third-party module, they may need these flags as a tool so that you can expose the typings used by those modules and target is 2015 module system.

Is this strict true? So you will not be using any everywhere. You will be defining the types. These are the compiler options which you have defined and what you are including and type root. You will be adding a type root so in in index.Ps on your both the packages and output directory. When the compilation typescript build is done, you will get a liv esm, okay, so this is the kind of utility you are going to build.

Don’t treat these library as that they are. You are going to get an output as a ui, it’s just a cli library or some kind of utility and you’re just writing those classes which whoever is going. The end user is going to import this module and you you will be using these classes to execute some function, so your code can be as simple as just a simple like this functions, calculator or anything. Also.

I should consider that I am just exposing these two things. One is a function and one is a class okay. Now what i’m doing is, first of all the package.Json definitions and typing typing.Json, these two things you have to take care here. I will be supporting both the module system esm and here this cgs common gs and esm modules. So for common gs, this is another typing.Json. I will just extending the ts config, and I will be just overriding.

These two attributes in my compiler config, which is a model system, will be config and output directory for uh compiler types compiler will be cgs, so i’m using common js here here, i’m using esm. Okay, esm and cgs both outputs – I will be get when I do npm rental, so I did already npm install when I do npm run build for this particular code. So I i’m trying to get the build for both here. I’r executing both the things by passing both the configs in the tsc so as mentioned, output directory is different for both output directory and output directory for this ts, config is different.

So if you see the lib right, it’s a cgs common gs right. So if you take a look on to the index.Js, it is exporting like this, so whenever I wanted to use it, I will. However, I do it on hello equal to consider. This is a hello.Js file or library, hello. Okay, so I will just importing npm install uh this library name and then I will be able to install this package, something like this from that library.

Okay, this this library is just exporting one class and I will be getting it like this, so it is exporting, say hello and the class. So i’m getting two things from here: uh class, hello and the say hello function, so I will be able to import them. Something like this, like commonjs module way where you just use, require and in the require this particular module. Commonjs module is exporting two things module so how we do it module exports.

But here we are exporting two things say hello and hello, so you can selectively get either hello or say hello or both while you just require it. So you can write your code and you will be able to require. Similarly, if I just take a look on to my esm here, I will be getting the export import syntax right, so it is exporting two things. So what I can do is either you can just use import everything as uh.

All from this module, like uh module, name library name right now, I can just do – is everything dot here? I will just use the hello in my code or like everything, dots here. This is, how will I use, or I can just use import selective import either. Just like say, hello or hello, wrong library name, which i’m going to publish okay, and when you just put a library name, it will look into the node modules before, because you will publish this module, then you will install it.

This module will be available in the node modules and when you do it something like this, it will look inside a node modules inside index.Ts and it will find okay. Yes, I got the definition of hello and clo, so it will import that. Similarly, we can just do a selective impact input for this commonjs module here here you will just uh const like get everything constructs equal to, you can say, require this library name and then you can just do a dot around it and you can get see hello Or you can just get the hello okay, so this is the different way of importing exporting things, and i’m supporting my library, my library, supporting both things right before that you can also write your test coverage and all these things you can write.

So all the setup is done here. You can just look at the code if you want here, I have package.Json. So what is minimum thing to require to publish on the package to npm? Nothing, you just need a code. You don’t even need a repository, because npm is putting the repository what you have defined in the configuration. It is not saying. Okay, you just need to have a repository, but obviously, if you are publishing something we will be managing the version, so we create a github track tags and all and then from there we run a ci cd which indirectly publishing the module to the npm.

Now the data modules are also there, so you might be publishing the same module on the github as a getter module. So what I did is, I just did npm login, okay and one. The name of the package is test package right. So if you just look at the test package globally, there may be 100 package already there with name test package, but package name is unique, so I will be using my username as a prefix. So for tksarma, this test package is unique right right.

So i’m just putting my alias this is you can say the scope is my username or my own repository there i’m putting test package okay. So you have to select the name wisely. So i’m putting a test package in my repository and it is a public package. So, first of all, we have already done npm in it. What we need to do is, after once we are done. Npm init. We can just let’s try to do and claim publish so here you have to take care of publishing this package as the public package, so I have already written these instructions here how you are going to publish a package okay, so you just need to provide this Access public and if your package is already published, then you have to manage the versioning here.

I have a package.Json here. If the package 2 1.2.2 is already published, npm publish x is public, so you can see it is now published mobile package and it will publish the version latest version and now it is successful. I don’t see any error, and this is now package is available. You can just locate it or I can just show you okay. So this is my package name and it’s a public package so while defining it as a npm install npm, install minus minus save, you have to use this particular name.

Add that tk semaphore slash test package. The scope of this is around this okay, so my package name is unique. I don’t need to worry about the conflict you can see now you have to link it with some repository, so all these instructions you are specifying in your package.Json. The repository author registry registry is npm registry. It is common global repository, the repository url, because the same configuration will be published on the npm repository here.

You will see the link uh, the repository of the page. All the descriptions which you provide in the package.Json will be published on the npm site, and here is a description. Okay main will be the index.Js for commonjs and for the modules it will be index.Js in the esl. Okay, I just need a build instruction. Simply npm run build, so it will just generate a build for esm and cgs. Both and rest. You can do the testing and all these things length length fixed because you are, you might be writing a huge amount of code for a library.

So you need to take care of the linting library, uh linting testing testing coverage. You should be writing good code for this okay, so you can see see the author publish config repository and all right now, if I did npm publish, I did nothing. I just have a package.Json and you can create a package.Json using npm in it, and you can just provide the username basically tk server. Okay, there, you can initialize your uh basic package.

Json with the tksm as a username for the scope, okay, so publishing something to uh. I can say: npm is quickly very easy. You just need to have account. Second, you just log in npm, login and then publish npm login. Just you have just have a username password and your package will be published same as like this okay. Now, what? If I want to publish the same package to a gator module, okay, few things for the github module, it’s like a same process, but now what we are going to have, we are going to have it.

We are going to target github, only not npm as a publisher right. So few things which you need to change in your code is the publish config. So what published config is published, config is saying that now publish it will be targeting npm module, npm github, so it will be pointing to this domain npm.Package.Json.Com, and your repository name should be valid because before publishing, it will look at your github.

This is the username. Okay, do you have this repository there? The name of the package can be received, okay repository and you are now in the depend just just plug in with these things, so I already have this package.Get.Json with all the changes. So what we do is we will just rename it to package.Json and rename the existing one. Here I already have all the changes published config repository and the basic things, the package name and all it should be unique.

Okay and types types will be available in index dot d, dot ts, which is same in earlier version. Also in the package location, we were having lib integra dot d dot ts. So if you can see here here, I have whatever the code I have written. These are the types available for it, so whenever you import this package in the typescript project, where it will look for the default definition, typing is in the index.

Ts. So if you are using these classes, see hello and all these things, then it will look for the default typings here. Okay, the name is, it is expecting as a string if you are importing this library and passing name something else, and it will give an error because the typings are in the index.D index: dot d: dot, ts, okay, okay, so let’s get ready for publishing it to The github module, so what we need to do after doing all the changes, let’s rename it to existing package rotation to something, and here we can rename it to package.

Json okay. So it’s saying we have all the definitions here also, I will be publishing this library for both cgs and esm. Okay and library files will be in the live. The same instructions build a notch, only the publish configuration. The repository should be that available already, and I have this – is a typescript package. So if, if we talk about what is needed for the typescript library, okay, obviously you just need to have a typescript uh in the dependencies like.

I have a lot of things because i’m doing a testings and all these things – nyc moca, chai bluebird. All these things I need. But if you are writing a simple package without test and coverage and all then you just need to have a typings node.Js or a minimal typescript like here, okay, otherwise, once your package is published, if you see the dependencies dependencies are published here, you can see it.

These are the dependencies, and these are the dev dependencies – try not to increase by these too much, because your packet should be lightweight and you should not have a dependencies and on too many things too many external package try to write more on your own code. Okay, now, first of all, if we just go there, how to publish a github package, so you just need to have a github account that a basic thing, and now you can just follow the basic instructions npm login.

Okay, here is the command which you have to little bit careful about. You just need to log in first of all with the registry, it is npm login registry this and follow the prompts like this. Here I change the registry right now. It is targeting to npm.Package.Github.Com. So it is not seen as your npm login, and here, if you have two factored authentication enabled, then you have to pass your personal access token.

Okay, most probably yes, i’m logged in now. This is about when you wanted to use it. Okay. What I can do is, I can just figure the simple instructions: npm publish, okay, let’s see if we get any errors, so I think I bumped up the version, so it’s packaged or decent. So currently, the version is this: you can change this to one dot, one. So it is also following the same instructions, and now your one dot one is published.

Okay, it is quickly straightforward. You just did npm login. Just you just need to specify what you are targeting the registry is this right, so you will be targeting this registry and you are publishing npm package. This is also a public package. You already done. Npm run build so it will just create a live folder with the both the support, cgs and esf. Now we just need to do npm publish same as we are doing for the npm publish right now.

It will just see okay, where you’re logged in i’m logged in with npm, so it will just push this package now. If you wanted to see where it is published, and we can just see at github here, you can see. I have this test package and it is published auto product one right and I just have a dummy, redo file. I will just clean it just to see so if you wanted to use it, then npm install this. You have to use it in your code and this is how you will define it in your package.

Json okay, so your package is published here, 1.4.1 right, and so when you have a github package, you will just use the you can use the github actions to actually Create a tag for the previous package, so you will have you will maintain the the previous packages also and their code also right, so you can just create a github tag before publishing the new package and you should maintain the consistency of this versioning 1.

1 major miner And patch version – and you should be running all this – you can just configure a basic pipeline like this travis, where you will doing npm install and payment, build, npm, run test, and then npm pack or npm publish what it just needed. It just needed a github token, which you can just use the github environment variables to pass it okay, but here we just talked about how you can just create a basic package or basic library and can publish it to npm and github.

It just matter of your typing or ps, config and the compiler options. What you are targeting you just need to take care of very few things. Declaration should be true, you just define output directory your target and your module system. Module system can be a common js or can be. Es6 is 1020 here. For this I am using common js module pattern. I just creating the different different bundles. So when your package is being imported, you can import it as a requirements: module sorry, common js module where you are just doing a require, or you can use the import export like a es6 module where you can use it.

So the same code base, a typescript enabled where you have the typings defined, can be used as a es6 module as a common js module so most of the packages what they like is they don’t have the type type definitions available. So what they create is they create a type pack type definitions as a separate module right. Are they types? If you see so here around this, you will see type node s react react dom.

So if you have a big library, then you can define the typing separately right. So we have a node and type nodes, so it is providing the type definitions for all the node.Js core library things: okay, okay, so this is all about how you can publish a library written in the typescript and node.Js I mean we are just writing typescript and Javascript and you can publish it for the common json es6 module thanks.

Everyone thanks for reading. Please like subscribe, my blog, if you like the article


 

Categories
Online Marketing

Debugging JavaScript – Chrome DevTools 101

Debugging than you need to this tutorial shows you how to make the most of chrome dev tools so that you can debug your JavaScript as quickly as possible. I’r going to use this buggy demo here to demonstrate all of the debugging tools and dip tools. I recommend that you open up this demo yourself and follow along with each step.

The link is in the description. Whatever issue you’re debugging, you always want to start by reproducing the issue. You want to find a series of actions that consistently reproduces the book in this demo. When I add five and one the result down here at the bottom is 51. Obviously that should be 6. This is the bug that I need to check down at this point. You might be tempted to use console.Log to infer where the code is going wrong.

Sure it may get the job done, but it’s rather inefficient. First, you have to find the relevant code which could take a while on a big code base. Then you have to sprinkle constant log statements throughout the code. Then you got to reload the page and look at the logs, but maybe the logs didn’t give you all the information you need, so you got to go back and add more logs and so on with dev tools.

You can pause the code in the middle of its execution, inspect the variables that are in scope at that moment in time and walk through your code, one line at a time open, dev tools by pressing command option, J on Mac or ctrl shift J on Windows And Linux, then click the sources tab. The sources panel is where you debug JavaScript. It has three main parts at the top left. Here is the file navigator pane, where you can inspect the files that the page uses after clicking on a file.

You can see the contents of it here in the code editor pin and down here is the JavaScript debugging pane, which you’ll learn more about shortly. Note that when your dev tools window is wide, the JavaScript debugging pane moves to the right. If you take a step back and think about how the app works, it’s probably safe to guess that the incorrect sum gets computed in the click event listener that’s associated to the button.

Therefore, you want to pause code right when the eventlistener executes event.Listen their breakpoints. Let you do exactly that. Expand the eventlistener breakpoint section then expand the mouse category then check the click check, box, dev tools now pauses on the first line of any click event listener that executes back in the demo, click the button again and dev tools. Pauses on the first line of this on-click function, the blue highlight indicates what line of code you’re currently paused on, if you’re paused on a different line of code press resume script execution until you’re paused on the correct line you paused on the wrong line, because you Have a Chrome extension which registers click event listeners on every page that you visit.

If you try the workflow I’m describing in an incognito window, you can see that you always pause on the correct line of code event. Listener, breakpoints are just one type of a breakpoint. Dev tools offers many other types. For example, you can set a breakpoint on a specific line of code or when a Dom node changes or when an exception gets thrown and so on. After this tutorial, I recommend checking out our breakpoints guide, which teaches you when and how to use each type.

The link to that guide is in the description too, I’m paused in the click listener, and now I want to execute the code one line at a time. The code stepping control is right here. Let you do that click. The step into next function call button to investigate a function further. For example, when I step into the inputs our empty function, it jumps me to the first line of that function when I’m confident that a function is working as expected, I can click the step over next function call button the function executes, but I don’t walk through It line by line, for example, if I click to step into the next function, call this line here would be highlighted, blue meaning.

This is where I’m currently paused, but when I click step over next function, call the function executes to completion and I pause them. The next line of the function that I’m currently stepping through last suppose, I’m stepping through a function, and I realize it’s not relevant to my bug. In that case, I can press step out of current function and dev tools executes the rest of the function. If this doesn’t make complete sense right now, I recommend creating a snippet, which is a little block of JavaScript code, that you can execute at any time set a breakpoint and your snippet and play around with the code stepping controls yourself in order to understand how they All work back in the script, I can tell that the bug is probably somewhere in the update label function rather than stepping through a bunch of irrelevant code.

I can set a line of code breakpoint right around where the bug probably occurs to do that. I just click the line number next to the code. This blue icon indicates that there’s a breakpoint on this line when I press resume script, execution dip tools runs all the code up until that lime and then pauses before that line executes over here in the JavaScript debugging pane. I can see the call stack that caused this code to execute.

I can click on the functions to see where each one got caught. The scope section shows me all the local and global variables that are currently defined at this moment in time. I can click on values to edit them, but I’m not going to do that right now. However, when I look at these values, they look suspicious they’re, wrapped in double quotes, which means that their strings. This could be the cause of the book.

I’r going to investigate this further over in the read expressions section here. I can read the values of variables over time. You can store any valid JavaScript expression here, for example, I click, Add expression, then type type of sum then press enter, and I can now see the value of that expression, as I suspected sum is a string when it should be an integer. Now I’m going to open up the console to test out a potential fix for the book when I’m paused on a line of code, the console has access to all the variables that are currently in scope.

For example, when I evaluate addend 1, it returns 5. I think I can fix this bug by converting the addend 1 and adding two variables two integers before adding them. So let me try that now yep that fixes it. I can verify that this change fixes the bug by editing the code directly from dev tools. First I’ll resume script. Execution then make my change, save the change. I press command s on Mac or ctrl s on Windows and Linux.

Then I click deactivate breakpoints so that I can test out the app without triggering the breakpoints I’ve set. Now the app sums up numbers as expected, all right, you now have an excellent foundation and how to effectively debug JavaScript using dev tools from here. I recommend learning about all the breakpoints that dev tools has to offer. As I mentioned before, we also have a JavaScript debugging reference where you can learn about literally every feature related to debugging in dev tools.

Links to both are in the description thanks for reading and happy bug, hunting


 

Categories
Online Marketing

Turn a web app into a PWA in 10 minutes

I will show you how to turn an existing application into a progressive web application using just a plain JavaScript API. So if you want to see how we built this application, go ahead and check out the first article, let’s get started, so our application is a newsreader. We have a plain application with just some news articles being displayed.

What I want to do now is turn this application into a progressive web application. What I want to be able to do is install this application on devices that support it and have it run offline, so that we can see some previously fetched news, even if we are offline now, when we’re building a progressive web application, a good place to start Is the application tab in chrome, dev tools? It will essentially guide you through the steps needed we’ll start up here at the manifest tab and right now we can see that there’s no manifest detected.

So that’s a good indication of what we need to do. First, so we’ll jump into our code here and we will create a new file a any test web any first. The web manifest is just a JSON file containing some of the basic information about our application. Like its name, what URL should start some basic things like icons as such once we have, the file itself will go into our index file and we’ll link to our manifest.

So just the same way as we would link to a style sheet. We will link to our manifest file, we’ll save this go back to our browser refresh, and we should be able to see that we have our manifest file here. So we can see our icons, we can see the name. We can also see that there’s an add to homescreen link here now, so this is a good way for us to check if our application is in fact installable. So let’s click on it.

Ok, so we can see that we can’t install this because there’s no matching serviceworker detected, so that’s again a good indication on what we need to do next, so I’ll create a new service worker phone service worker jeaious, if you’re not familiar with a service worker, it’s Essentially, a JavaScript worker that sits between your application and the network. This means that whenever your application goes out to the network, it will pass through the service worker it’ll.

Allow us to do things like caching in between, so we can decide ourselves whether or not we actually want to go out to the network for a particular resource. We can also decide that we can return some things from our cache if we are offline. So this will allow us to make our application work offline. Ok, so we have our service worker file. The next part of using a service worker is registering it, so we’ll go into our load listener here and once we’ve fetched our noose, the user is already happily using the application.

We can go ahead and register our service worker call. This register SW so we’ll implement this service worker register. The registration looks something like this, so we have a quick feature detection. First, we want to make sure that the browser actually does support service worker before we try to register it. We then call service worker dot register on the navigator object and pass in our service worker file.

So let’s save this: let’s go back to our application refresh and see if we got an service worker, it’s a little bit smaller. So we can now see that we do in fact have a service worker file, while you’re developing. It’s really good to keep this update on reload check that way. You’ll get all the new changes that you make to service, who are very visible immediately. Instead of having to close the window and reopen it, which would normally be required for a service worker to take take effect so we’ll go back and turn the manifest file here, our manifest tab will click on add to homescreen and see.

If we’re, there already turns out worse able to install the application, because the browser is telling us that the page doesn’t work offline. Now that makes sense, because our Service Worker file is completely empty and the Service Worker is a completely event-driven thing, so it can only run code if some event triggers that. The first event that gets triggered on a serviceworker is the install event.

So we’ll add a listener for the install event on the serviceworker itself. Typically, what we want to do in the install event is cache. Some like static files that we know our application will need the way we do that is by using the cache API. So we’ll open up a cache with a given name, and then we will add a list of static assets that we have. So, let’s define our cache net first cache name, let’s call this use v1 and then we’ll define an area of the different static assets that we have so our index, page CSS and JavaScript files, and so on.

We’ll save those. The final thing that we do here is we call skip waiting which will cost the serviceworker to move into the activate face the activate faces, essentially when a new service worker takes over from any previous service workers. Normally, what you would do here is clean out any previous versions of your cache. For instance, what I’m calling here is self got clients that claim which will essentially tell my service worker to start servicing the running application immediately, instead of waiting until the next time.

We get to this application. This will allow us to keep start fetching and caching, the newest articles already on the first time, all right so we’ll go back to our application, will refresh here make sure that we have a new Service Worker up and running. We can go in and check in our cache tab here that everything that we defined in that static array did get cashed now that we have stuff in the cache.

Let’s go back to our manifest tab here and see if we’re able to add this to the home screen, it turns out that we are still not able to do add this to our home screen, because it’s still not working offline. The way the browser knows that it’s not working offline is because, even though we did put stuff into the cache we haven’t used any of that stuff, so we still need to prove to the browser that we work offline.

The way we do that is by listening for yet another event, so we’ll add a listener for the fetch event. Now this listener will get. Essentially, this listener will intercept any fetch request going from our application out to the network, so this will allow us to handle these requests any way we want to. Essentially what I’m doing here is I’m differentiating on traffic based on where it’s going. So if we’re fetching something from our own application, so that would be any of these static resources.

We want to check first, if it’s in our cache and return that, and if not, then we could go to the network. If we’re fetching news, though, what we want to do is we want to fetch the latest news first and then only if we’re unable to do that because we’re offline or whatever, then we want to see if we might have an older version in our cache. So the cache first strategy would look something like this.

So first of all, we will open up the same cache that we had from before. We will then call cached match see if there’s something in our cache that matches this request. If there is we’ll return that, if not, we will fall back on the network, the network first strategy will look a little bit different, but should be pretty straightforward as well. So what we do here is we will open up the same cache but we’ll first try to see if we were able to fetch that from the network.

If we are able to fetch it from the network, we will put that version into the cache. So we’ll put a clone of it just because we’re only able to read a response once so that way we can put one version into the cache and then return the other one. If any of this fails. So if we’re unable to fetch the latest news, we’ll fall back on something that we have in our cache, so we’ll again call this cache that match and return that.

So, let’s go to our browser. Let’s refresh here, let’s look at the serviceworker here we have a serviceworker here, just registered. We can go into our cache storage here, verify that we’re caching stuff, not only those static assets that we have, but also some stuff from the network, and if we now go into the manifest file tab here, click on add to home screen. It will actually trigger the Add to Home screen logic.

We should always also be able to go to the serviceworker tab here and take our application offline and still be able to refresh and see that it’s working. So hopefully this gave you a good idea of what it’s like to turn an application into a progressive web application by adding that manifest file and adding that serviceworker now, normally, if you’re building an app for yourself, you probably don’t want to use this very low-level API That I just showed you there are libraries like workbox, that I’ll link in the show notes below that you can use to kind of simplify this a whole lot and gives you much more tools to do.

Things like manage your cache size and how many, how many images you want to cache or how long you want to keep something in the cache for all right. So thanks for reading, I hope you enjoyed it I’ll see you later.


 

Categories
Online Marketing

JavaScript: SEO Mythbusting

Where do these come from? How do these get into the world The myths, the legends that come through now JavaScript? I think a lot of it is people with very good intentions will try to provide the information they have available and there’s a gap in translation between the SEOs and the developers and how they think and what they consider So by going ahead and adopting is acceptance Criteria as part of my tickets, when I work with devs that lets them know very specifically, instead of being like “, and I want you to make magic for me” And you go from “.

Give me magic” to “, hey here’s, my user story,.” “. I would like to accomplish three pieces for acceptance criteria..”, You can bridge the gap, Hello and welcome to another episode of SEO. Myth busting With me today is Jamie Alberico Jamie. What do you do in your job? Thank you so much for having me here. I’M a technical SEO with Arrow Electronics. That means that I am embedded with a number of dev teams across a number of projects, And we tried to execute these initiatives, get new features available on the site in an effective and search friendly way, And that means a lot of times.

We have to have conversations about how we’re using our JavaScript Having you here is fantastic, because then we can have a conversation about pretty much everything that you want to know from the search side, as well as the web developer side. So… Any questions that you have in mind or anything like pops into your mind. Oh so many questions. I hope I get to poke at the black box of Google here And I have one.

That’S absolutely burning Is JavaScript the devil. That’S a fantastic question. It might seem that way, sometimes, especially when things are not going the way you want. You see the horror stories They’re on forums or on Twitter. Everything is gone. Yeah, that’s one thing: That’s the SEO site on the developer site is also like. Oh, it’s a language that wasn’t designed to be like super resilient, But it actually is and then often people are oh, It’s a C style type language and it’s not really.

It’S a list type language They’re, like a lot of misconceptions, coming from both worlds together and clashing here. I don’t think it is the devil. I think it has its benefits. I mean it allows us to build really cool and fantastic stuff on the web and be really responsive to what the user does and wants to do with our applications. And it has moved the web from becoming or being a document platform towards an application platform.

And I think that’s fantastic, So I think we are already pushing hard on fighting this “ JavaScript is the devil,.” And “. If you use JavaScript, we can’t be indexed at all.”. So that’s not true for for a long time, But I think now the documentation is catching up with like outlining the different Bits and pieces that you should be aware of and the features that you have to deal with that are not available.

One thing, for instance, is you probably have built single page applications right? Oh, yes, Has there been problems in terms of SEO when they rolled out, I I was pretty lucky. I had a dev team who believed in SEO. That’S good, That’s really good. That was actually my the big moment of my career when I got on the technical SEO And I came and I talked to you one of my new developers for the first time with this very specific problem I was trying to solve and he just paused and Looked up from his keyboard and went “ you’re, not snake oil”, So I think we’re making a lot of progress between SEO and devs.

That is fantastic. It’S a great story, So you might hear a few people in in the community going like ooh. Should we do a single page application? Is that risky And one of the things that a bunch of developers are not aware of, and some SEOs are not necessarily communicating all the time is that we are stateless. So that means with a single page application. You have a bit of an application state right, You know which page you are looking at and you how you transition between these pages.

However, when a search user clicks on a search result, They are not having this application. They are jumping in right to the page that we indexed, so we only index pages that can be jumped right into So a lot of the technology. Javascript technology is making assumptions of how The user navigates so the application. So like the developer as a developer. In my test, It’s okay, Here’s my application.

I click on the main navigation for this particular page and then I click on this product and then I see and everything works, But that might not do the trick because… You need that unique URL. It has to be something we can get right to Not using a hashed URL and also the server needs to be able to serve that right away. If I, if I do this journey and then basically take this URL and copy and paste it into an incognito browser Mm-hmm, I want people to see the content, Not the home page and not a 404 page.

So that’s something that we’re working on giving more guidance for lazy loading. You probably have seen a bunch of communication about that. One is probably Yes Yeah. How do we get a rich media experience out to users, but do it in a way where, if you’re on your cell phone, we keep that very small time frame? We have to get your attention Correct and you want to make sure that if you have a long list of content, You don’t bring everything into the especially on the cell phone right, Just feeling, like 100 images, What about Ajax? What about using asynchronous, JavaScript and XML? That is perfect Whoa I haven’t, I haven’t, heard Ajax being used in a while, and it’s fell out in a while.

I mean Everyone’s using it, but no one’s talking about it that much It was just like yeah. You just load data in as you go and that’s perfectly fine. We are able to do that. Also, I often get us about how that affects the crawl budget.., Let’s talk So what worries you about that? Well, if we’re using Ajax and me requests, say a product detail page and we’re using Ajax to supplement a lot of pieces of content to it.

Right, Googlebot’s requested one URL and it’s gotten back nine Yeah, because each of those Ajax calls had a unique string right. How do we handle that and does that negatively impact our crawl budget? So I wouldn’t say it negatively impacts your crawl budget, because crawl budget is much more complex than you might see this It’s one of these things that looks like super simple, but there’s more than meets the eye, We’re doing a bunch of caching right, because we expect That content doesn’t necessarily like update too much.

So Let’s say you have this product page. You make one request to the product page and then that makes nine more requests. We don’t make it. We don’t distinguish between like loading, the CSS or the JavaScript, or the images or the API calls that get you the product details. So if you have nine calls from this one page load, then that’s going to be ten in the crawl budget. Because of caching, we might have some of these in the cache already, So if we have something that is already cached, that doesn’t count towards your crawl budget.

So if we were to version our Ajax calls, yes, those could be cached as those could be cached exactly. Yes and then that’s that’s one way of working around it. If you can do that, if that’s a possibility, The other thing is, you could also consider it not just an issue for The crawl budget, but also an issue for the user right, because, if you’re on a slow network or spotty network connection, It might flake out In the middle – and you were your left foot broken content, That’s not a great user experience.

You want to probably think about, like pre-rendering or hybrid, rendering or server side, rendering Anything in between there And crawl budget is tricky generally, because we are trying to deal with the whole “ host load” situation. So what can your server actually deal with? So we are constantly adjusting that anyway, So it’s like “, oh this affected our crawl budget negatively.”, Not really because we just like had host load issues with your server, So we like adjusted it anyway, so we had balancing issues across your entire content.

So I wouldn’t say that it’s not much of a deal, But I see that it’s very important for people to understand that and unfortunately that’s not that easy. Can we demystify Googlebot a little bit Because we have this, The omnibus, the great the Googlebot, but it actually goes through a series of Actions. So we get that initial HTML parse. We find that the JavaScript and CSS that we need to go ahead and make our content then call those pieces.

We know. Since Google I/O there is actually a gap between our initial parse and our HTML rendering. But I want to know more because Googlebot follows HTML. / HTML5 protocols – Yes, There’s some nuances there. I don’t think I know I didn’t know about Where say: you’ve got an iframe in your head and you’ve got a closing head script right there That ends your head for Googlebot Yeah. All of our lovely meta content, our hreflangs and canonical’s below that have a tendency to exist.

.. That is true, there’s a bunch of things at play. So when we say Googlebot what we actually mean on the other side of the curtain is a lot of moving parts. So There’s the crawling bit that literally takes in URLs right and then caches them from the server, then so that when you are providing the content to us, we get like the raw HTML. That tells us about the CSS, the JavaScript And the images that we need to get and also the links in the initial HTML yeah, and because we have that already we have such a wealth of information already.

We can then start it like go off and fetch the JavaScript and everything that we need to render later on, But we can also already use the HTML that we’ve got and say like “. Oh look, there’s links in here that need to be crawled.”. So when you have links in your initial HTML, we can go off and basically start the same process for these URLs as well. So a lot of things happen in parallel, rather than just like one step and then the next step, and then the next step.

So this is definitely the start of it And as we get the HTML in parallel to extracting the links and then crawling these, we queue them for rendering. So we can’t index before we have rendered it, because a bunch of content needs to be to be rendered. First, In a way that better fits us, if we’ve got a single page application, We now.. Googlebot has the template. They just got to grab the content that fits within there Yeah.

So, wouldn’t that mean that Googlebot likes these JavaScript platforms, The more content you get us quickly in the first step in the crawling step, the better it is because we can then basically carry that information over rather than having to wait for the rendering to happen, But Is prerender always the best solution? That’S a tricky one. I think most of the time. It is because it has benefits for the user on top of just the crawlers, But you have to very carefully measure what you’re doing there, I think so Giving more content over is always a great thing.

That doesn’t mean that you should always give us a page with a bazillion images right away, because that’s just not going to be good for the users, Because they’re going to have to then…. If you’re on a really old phone. And I have a pretty old phone and you have a pages full of images and transitions and stuff, then you’re like.. “. I can’t use this website.”. So pre-rendering is not always a great idea.

It should be always a mix between Getting as much crucial content and as possible, but then figuring out which content you can load lazily in the end of it. So for SEOs. That would be. You know we. We know that different queries are different. Intents Informational, transactional,…, so elements critical to that intent should really be in that initial rush Exactly and you might consider if, if the intents are wildly different And the content is very, very different, consider making it into multiple pages or at least multiple views if you’re Using a single page Application so that you have an entry point for the crawler to specifically point at it when when it comes to surfacing The search results, So treat it like a hub and let the users branch out from there.

Yes, so that’s where we’d use! Maybe our CSS toggle for visibility. That is a possibility just having different URLs, is always an option, especially with the history API. You can probably in the single page application figure out which route to display and then like have the content separated between different routes or Be a little more dynamic. There.. We support parameters, So even if you use URL parameters.

. Basically expose the state that is relevant to the user in the URL. What other ways does that benefit our users, because our ultimate goal is to make them happy And that’s our ultimate goal too. So like we are, we are the same in terms of what our goal is. We both want to surface useful information to the user as quickly as possible, So The users benefits are especially if you do like hybrid rendering or the server-side, rendering that They get the content really quick.

Normally, if it’s done well, if it’s not overloading their device And they get to jump in right where the meaty bits are right. So if I’m looking for some specific thing – and you give me a URL that I can use to go to that specific thing – I’m right there and I’ll have a great time, because it’s the content that I needed So yeah. If you have performance metrics going up as well, then, even if I’m on a slow phone and a really spotty network, I still get there.

I mean our performance metrics, that’s based on a lot of pieces. We have a stack of technology. That is true. What should SEOs look for in our stack? Where should we try to identify those areas where we could have a better experience for not just Googlebot, but our humans Yeah? So I think a bit that is oftentimes overlooked, not by a SEOs But by businesses and developers, is the content part. So you want to make sure that the content is what the users need and want, and it’s written in a way that helps them.

But on the technology side,… Wait So that blurb at the top people always do where the like. Here’S my hero image and then 500 words about this thing And I’m a human who wants to buy something and there’s so much stuff in the way…. Yeah. Don’T do it At least like have two pages have like the promotional page that you want to do direct marketing towards and then, if I specifically look for your product, just give me your product.

Just let me let me give you money, So I think Talking about performance and all the different metrics, it’s a bit of a blend of all the things like Look at. When does my my content actually arrive, when does my page become responsive? So you look at First content for pain. You look at time to first buy as well less important than the first content full paint. I would say, because it’s fine, if it takes a little longer.

If, then, the content is all there Versus.. So time to first byte can take a bit of a hit Yeah If we deliver that faster first, meaningful paint Exactly because in the in the end as a user, I don’t care about. If the first byte has arrived quicker, if I’m Still looking at a blank page because javascript is executing or something is blocking a resource… If it arrives a little later, but then it’s right there, That’s fantastic right and you can get there in multiple ways.

I highly recommend testing testing testing testing. What testing tools would you recommend? So I definitely recommend lighthouse. That’S a great way. Web hint is more More broad approach as well, and you could also use PageSpeed insights or the new SEO audits in lighthouse. Mobile-Friendly test also gives you a bunch of information. Pagespeed insights is look at that full page though Mm-hmm and we had a bit of a bit of a gap.

We have almost this futurist Lighthouse, where we want that time to interactive, and then we have people adopt this methodology. That’S how we got you know so much contact via Ajax, because full page load is fast, but all that content was still coming…. I would recommend lighthouse that gives you like the Filmstrip view of when things are actually ready for the user to work with. So I would highly recommend looking at lighthouse but PageSpeed insight Gives you a good like first first view over and it integrates with lighthouse really nicely now.

Wonderful. Do you think that JavaScript and SEO can be friends now and developers and SEO s can also work together? I do I really think that You know if Google is a library and a webpage is a book using these JavaScript frameworks. Lets us make pop-up books, enrichen experiences to engage with. Oh that’s a fantastic analogy. I love that image. That’S a that’s a beautiful one! Thank you so much Jaime.

Thank you very much and I hope you enjoyed it and see you next time. Have you ever wondered where, on the map, you should put UX and performance when you’re talking about SEO, So have I Let’s find out in the next SEO? Myth-Busting episode,


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