Practitioners of SEO will always be mistrustful of JavaScript.
That is partly centered on experience; the power of search engines to find, crawl, and accurately index content which will be heavily reliant on JavaScript has historically been poor. But it’s also habitual, born of a general wariness towards JavaScript in every its forms that isn’t centered on understanding or experience. This manifests itself as dependence on traditional SEO techniques that have not been relevant for a long time, and a conviction that to be good at technical SEO does not require an knowledge of modern web development.
As Mike King wrote in his post The Technical SEO Renaissance, these attitudes are adding to “an ever-growing technical knowledge gap within SEO as a marketing field, making it problematic for many SEOs to resolve our new problems&rdquo ;.Additionally they put SEO practitioners vulnerable to being put aside, since too many of us will not explore – aside from embrace – technologies such as for instance Progressive Web Apps (PWAs), modern JavaScript frameworks, and other such advancements which are increasingly being regarded as the ongoing future of the web.
In this short article, I’m going to be taking a fresh look at PWAs. As well as exploring implications for both SEO and usability, I’m going to be showcasing some modern frameworks and build tools which may very well not have been aware of, and suggesting ways by which we need to adapt if we’re to place ourselves at the technological forefront of the web.
1. Recap: PWAs, SPAs, and service workers
Progressive Web Apps are essentially websites which provide a person experience akin compared to that of a native app. Features like push notifications enable easy re-engagement with your audience, while users can add a common sites for their home screen minus the complication of app stores. PWAs can continue to operate offline or on low-quality networks, and they allow a top-level, full-screen experience on cellular devices which will be closer compared to that offered by native iOS and Android apps.
On top of that, PWAs try this while retaining – and even enhancing – the fundamentally open and accessible nature of the web. As suggested by the name they are progressive and responsive, designed to operate for each and every user regardless of these choice of browser or device. They can also be kept up-to-date automatically and — as we shall see — are discoverable and linkable like traditional websites. Finally, it’s not totally all or nothing: existing websites can deploy a restricted subset of those technologies (using a simple service worker) and start reaping the advantages immediately.
The spec continues to be fairly young, and naturally, you can find areas which need work, but that doesn’t stop them from being among the biggest advancements in the capabilities of the net in a decade. Adoption of PWAs is growing rapidly, and organizations are discovering the myriad of real-world business goals they are able to impact.
You are able to read more concerning the features and requirements of PWAs over on Google Developers, but two of the key technologies which will make PWAs possible are:
App Shell Architecture: Commonly achieved using a JavaScript framework like React or Angular, this identifies a way of building single page apps (SPAs) which separates logic from the actual content. Consider the app shell as the minimal HTML, CSS, and JS your app needs to operate; a skeleton of one’s UI which may be cached.
Service Workers: A special script that your browser runs in the back ground, separate from your page. It essentially acts as a proxy, intercepting and handling network requests from your page programmatically.
Note why these technologies aren’t mutually exclusive; the single page app model (brought to maturity with AngularJS in 2010) obviously predates service workers and PWAs by some time. Even as we shall see, it’s also fairly easy to create a PWA which isn’t built as an individual page app. For the purposes of this short article, however, we’re planning to be focusing on the ‘typical’way of developing modern PWAs, exploring the SEO implications — and opportunities — faced by teams that choose to join the rapidly-growing amount of organizations that make use of both technologies described above.
We’ll focus on the app shell architecture and the rendering implications of the single page app model.
2. The app shell architecture
URLs
The bottom line is, the app shell architecture involves aggressively caching static assets (the bare the least UI and functionality) and then loading the actual content dynamically, using JavaScript. Modern JavaScript SPA frameworks encourage something resembling this process, and the separation of logic and content in this ma