SEO & Progressive Web Apps: Trying to the Future
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:
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