In my earlier article, Progressive Net Apps: An Introduction, I wrote about the important thing applied sciences concerned with constructing a PWA and easy methods to get began with them. On this put up I’m going to inform you about my expertise of constructing a PWA with Gatsby, a static website generator.
What’s Gatsby?
A number of members of the event crew at Mud have been getting fairly enthusiastic about Gatsby just lately – in truth, our recently-published, soccer world-cup-themed website On the Airplane was constructed with Gatsby. In contrast to different static website mills, Gatsby makes use of React because it’s templating engine. Every thing you construct is rendered in React elements, making it extraordinarily quick. I wrote about getting began with Gatsby on my private weblog, right here (additionally printed on the Gatsby website).
You don’t must know React to get a easy Gatsby website up and working, though it’s in all probability useful if you wish to reap the benefits of the whole lot it has to supply. Nonetheless, some intermediate-level JavaScript will get you surprisingly far!
One of many nice issues about Gatsby is it comes with a complete construct setup already configured, which suggests, in case you hate coping with that stuff (like I do) you possibly can think about the enjoyable stuff, like writing superior code! One other great point is the documentation, which is top-notch. After working by means of the on-site tutorial and constructing my very own website, CSS {In Actual Life}, my subsequent port of name was to make my website a Progressive Net App.
Constructing a Progressive Net App
A comparability desk on the Gatsby website reveals how its many options stack up in comparison with different static website mills, and eagle-eyed viewers will spot that it scores very extremely within the Efficiency / PWA part. The truth is, I used to be stunned about how easy the method was.
One factor to notice is your website doesn’t should be a PWA from the outset – it’s completely potential to construct an everyday website to start with and convert it to a PWA at a later date.
HTTPS
PWAs use service employees, extraordinarily highly effective net employees, to fetch and cache content material, so earlier than your website can turn into a PWA it should first use HTTPS. My website is hosted with Netlify, which permits very simple integration with Gatsby. Via Netlify it’s a easy step (only a click on of a button) to confirm your area, present a LetsEncrypt certificates and swap a website to HTTPS.
Putting in Gatsby plugins
Gatsby has an incredible ecosystem of plugins to automate all kinds of various duties. We have to set up a few these as a way to present offline performance for our PWA:
Putting in Gatsby plugins is quite a bit like putting in node modules – you run npm set up [name of plugin], then add them as an array in your gatsby-config.js file, like on this instance.
plugins: [`gatsby-plugin-manifest`, `gatsby-plugin-offline`];
For our PWA, gatsby-plugin-offline should be listed after gatsby-plugin-manifest within the array.
After putting in plugins it’s essential cease and restart the event server (utilizing command gatsby develop). The manifest JSON file shall be generated, you then simply want so as to add your individual configuration choices – your website title, background color theme color and icon – which can enhance the visible expertise for customers and permit them so as to add your PWA to their residence display screen (in supporting browsers).
Ordinarily when constructing a PWA it’s essential present a number of icon sizes to account for various shows. With the Gatsby plugin you possibly can simply present one icon on the highest decision (512px x 512px) and the remainder shall be generated for you.
Lighthouse
After stopping and beginning the event server once more to permit the modifications to take impact, you possibly can then examine your website in Chrome’s dev instruments. We are able to verify our service employee has activated by going to the Software tab. On the left of the Software view you must see the Manifest and Service Employee. Clicking on the service employee tab will present you whether or not or not the service employee is lively.
To see how your website measures up you need to use Google’s Lighthouse device, which was developed for testing PWAs. That is obtainable from the Audits panel in your dev instruments, or as a Chrome extension. You can even run it from the command line by putting in a node module. Lighthouse will run an audit of your website, testing for efficiency, PWA standing, accessibility, greatest practices and web optimization, and generate a report with suggestions for enhancements. It’s not a crucial a part of the method of constructing a PWA, however I at all times discover it very helpful.
Customising the <head>
One factor you’ll additionally little question need to do to optimise your website (and one thing that Lighthouse will decide up on) is customise the data within the doc <head> along with your website’s metadata. In Gatsby you possibly can’t edit the <head> immediately, so the easiest way is to make use of the plugin gatsby-plugin-react-helmet to offer you entry to it. Comply with the identical steps to put in the earlier plugins. Then you possibly can add the <Helmet> tag inside your <physique> tag, which can render within the <head> when compiled:
<Helmet
title="CSS {In Actual Life}">
<html lang="en-gb" />
<meta title="description" content material="CSS In Actual Life is a weblog masking CSS matters and helpful snippets on the net’s most stunning language. Revealed by Michelle Barker, entrance finish developer at Mud and CSS superfan."/>
<meta title="key phrases" content material="css, entrance finish, net growth, net design"/>
</Helmet>
Then you possibly can run gatsby construct and publish your website. Congratulations, you now have a Progressive Net App!
