One place for hosting & domains

      Decoding WordPress: New Site Blocks in 5.9


      WordPress has always been a user-friendly platform that is flexible and easy to learn. However, those without coding skills may struggle to perform certain customization tasks.

      Fortunately, Version 5.9 introduced Full-Site Editing, which brings together both new and existing features to provide centralized control of your entire site. One of the most significant changes is the addition of new site level blocks.

      In this post, we’ll discuss everything you need to know about site blocks in WordPress. We’ll also look at some examples and show you how to use them. Let’s get started!

      An Introduction to WordPress Blocks

      Blocks have been a fundamental aspect of WordPress since late 2018. Version 5.0 of WordPress replaced the classic editor with a new WordPress block editor called Gutenberg.

      A block is a specific element that you can add to your site. For instance, there are blocks for images, headings, lists, paragraphs, and more. This system provides users with a simple and intuitive way to create a unique website.

      Each block comes with a set of customization options, such as alignment, color, and size. Additionally, blocks can be moved around on via a drag-and-drop editor, facilitating a simpler page-building process.

      Common WordPress Blocks

      Gutenberg introduced blocks for various purposes. There may be some blocks that you will never touch. However, there are others you’ll probably use every time you create a post. Let’s take a look at some of the most common options in the new block editor.

      The Heading Block

      The Heading block provides several choices for configuring and styling headings:

      WordPress Heading Block

      This block can help you organize your content more efficiently. For instance, you can select the heading level H2 for main sections, and H3-H6 for subsections. Additionally, you can add a hyperlink to the heading.

      The Paragraph Block

      Paragraphs are the most frequently-used block in the Gutenberg editor:

      WordPress Paragraph Block

      This element enables users to write text and customize the typography. Usually, headings are used to group relevant paragraphs together and split up the page’s content.

      The Image Block

      Image blocks enable you to upload photos or artwork to your site:

      WordPress Image Block

      You can then use the settings to resize and crop your images. You can also add captions and alt text.

      The Video Block

      You can also add videos to your post. There are different options for displaying videos:

      WordPress Video Block

      For instance, you can upload them to your site’s Media Library, or embed them from YouTube and other video-sharing platforms. You can also add text tracks such as subtitles, captions, chapters, and descriptions to the block.

      The List Block

      The List block enables you to insert bulleted or numbered lists into your page:

      WordPress List Block

      This block comes with styling options such as bold and italics, as well as more intricate rich-text controls. Additionally, you can add hyperlinks to list items.

      Skip the line and get tips right in your inbox

      Click below to sign up for more how-to’s and tutorials just like this one, delivered to your inbox.

      marketing tips

      New Site Blocks in WordPress 5.9

      Now that Full-Site Editing is here, individual blocks can also be used for editing your site’s theme. You can use the new editor to customize all aspects of your site:

      WordPress Full Site Editing - edit template

      This feature has replaced the Customizer. However, it only supports block-based themes, such as Twenty Twenty-Two. If you’re using a ‘standard’ theme, you’ll still have access to the Customizer (and the Gutenberg block editor), but you won’t be able to use the Full-Site Editor.

      The Full-Site Editor comes with templates for different pages, such as your archive or home page. Additionally, you can customize more areas of your site, such as your header and footer. There is also a new Global Styles feature, which enables you to define site-wide settings for your blocks.

      In addition, the Full-Site Editor has introduced a range of ‘theme blocks’. Often nicknamed ‘site blocks’, these new additions enable you to use and edit global elements such as the site logo and tagline, navigation, and post lists.

      The Benefits of Using Theme Blocks

      The new theme blocks were introduced to make the web design process in WordPress simpler and more streamlined. Previously, the WordPress theme editor had limited customization options, and users who wanted unique designs often needed to use custom code.

      Theme blocks remove the need for coding (and third-party page builder plugins) in most cases. Each block has a variety of styling and display options, offering users the flexibility to create almost any layout and design. Whether you’re a WordPress beginner or an experienced web developer, the process of creating custom sites is now faster and easier.

      Let’s take a look at some notable site blocks that have been added with WordPress 5.9. This is just a brief introduction – we’ll delve more deeply into each of these Gutenberg blocks shortly.

      Navigation

      This feature enables you to add your site’s navigation menu to a page:

      WordPress Navigation Block

      You can customize both the design and structure of your menu. For instance, you can add submenu items, change the color and alignment, and more.

      Query Loop

      A query loop is a block that displays a set of posts based on specific conditions and parameters:

      WordPress Query Loop Block

      This is a great way to showcase posts on a particular topic. You can filter content by post categories, tags, authors, and keywords. The block also comes with different styling options for the post feed.

      Template Part

      Template parts are used to organize the structure of a site. They’re essentially collections or containers of other content blocks:

      WordPress Template Part Block

      They can only be used when editing templates, so you’ll find this block in the Full-Site Editor. Each template part has a user-generated name. When adding a block, you can choose an existing template or create a new one.

      How to Use Common WordPress Site Blocks (6 New Theme Blocks)

      Now, let’s take a detailed look at a few common theme blocks. For each of the new blocks, we’ll discuss its purpose and the steps for using it.

      1. Navigation

      Navigation blocks are used for editing your site’s menus. When you add this block to your page, you are given three options: select an existing menu, add all of the site’s pages, or start with an empty menu:

      WordPress Navigation Block

      You can include additional menu items as well as indented items, which appear as subpages. Moreover, you can change the links and names of each item using the “anchor” icon in the toolbar. The toolbar also enables you to change the alignment and other layout settings.

      2. Login/out

      The login/out block provides a simple way to add a login and logout button to your website:

      WordPress Login/Out Block

      It automatically displays the correct link depending on the status of the user. You also have the option to display the login/out button as a switch.

      3. Template Part 

      This element can be thought of as a group of blocks. The template part helps you organize the structure of your page. These blocks can only be used when editing templates, and they’re an excellent way to manage global areas such as headers and footers:

      WordPress Header Block

      Template parts can be added in the site editor. Upon selecting the block, you’ll be asked if you want to add an existing template or create a new one.

      If you opt for the latter, you’ll be prompted to enter a name for the template. Then, you can go ahead and add in blocks to create the desired layout.

      4. Site Title

      As the name suggests, this block is used to display the title of your site:

      WordPress Site Title Block

      By default, the title links to the home page, but this can be turned off with a toggle switch in the settings. There’s also a range of styling options, including text and background colors, font size, line height, letter spacing, and other typography settings.

      5. Post Excerpt

      Post excerpts give readers a sneak peek into a post, and can help them decide whether or not they wish to read the entire article:

      WordPress Post Excerpt Block

      Most of the time, this block will be a child element of a query loop. It displays either the first 55 words of a post, or the set excerpt for that post. You can also add a “read more” link. This will take the user directly to the full post.

      6. Query Loop

      Query loops can be used to display a set of posts based on specific conditions and parameters. For example, you may use this block to show all posts in a particular category or by a specific author:

      WordPress Query Loop Block

      Query loops are made up of multiple blocks, including post titles, dates, excerpts, and featured images. You have the option to start blank and add nested blocks manually, or start with a premade layout and edit from there.

      You can then alter the width, alignment, arrangement, and colors. You can also change the number of posts that the query loop displays.

      Conclusion

      In the past, customizing WordPress sites may have been challenging for some users. However, with the release of new site blocks in version 5.9, the process has become a lot easier.

      Thanks to the Full-Site Editing feature, you can now make changes to your entire site from a unified interface. You can also customize individual elements such as the site title and tagline, navigation menu, and template parts like headers and footers.

      If you’re looking for a fast, reliable, and affordable place to host your WordPress site, we’ve got you covered. Check out our DreamHost WordPress Hosting plans!

      Power Your Website with DreamHost

      We make sure your website is fast, secure and always up so your visitors trust you. Plans start at $1.99/mo.

      shared hosting



      Source link

      How to Fix “The Site Ahead Contains Harmful Programs” Warning in WordPress


      WordPress warnings are never pleasant. However, there’s one message that website owners particularly dread: “The site ahead contains harmful programs.”

      Fortunately, this doesn’t have to spell disaster for your website. By following some simple steps, you can remove every trace of this suspicious software.

      In this post, we’ll explore exactly what’s causing the “harmful programs” error. We’ll then show you how to resolve the underlying issue and banish this error message before it can inflict irreversible damage on your search engine rankings. Let’s get started!

      What the Harmful Programs Warning Is (And What It Means)

      If you encounter the “harmful programs” error, then your site has most likely been hacked. In an effort to provide a safe browsing experience, search engines routinely scan the web for digital threats. If they detect malware on your site, they will flag it as unsafe (or label it as a deceptive site) and display a warning to anyone who tries to access your website.

      A Google Chrome search warning.

      Some search engines even display different warning messages based on how your site has been compromised. Depending on the severity of the threat, visitors may get the option to bypass this warning and proceed to your website anyway.

      “The site ahead contains harmful programs” warning.

      When a compromised website appears in the Search Engine Results Pages (SERPs), some engines show an additional warning alongside the site in question. For example, Google’s SERP warnings include “This site may harm your computer and “This site may be hacked.”

      Google’s search engine results warning.

      These security warnings are designed to help keep internet users safe. However, a “harmful programs” message can have several consequences for your site.

      Most website owners see their traffic levels plummet. This will affect your search engine rankings and your conversions. In addition, if your hosting provider discovers that your site has been hacked, they may even suspend your account until you resolve the issue.

      Hacked WordPress Site? We’ll Fix It Fast

      With our Hacked Site Repair service, we’ll fix the malware infection and restore your website so it’s back up and running fast.

      How to Fix the “Site Ahead Contains Harmful Programs Warning” Error in WordPress (In 5 Easy Steps)

      By taking immediate action, you can preserve your SEO success and your site’s reputation as a secure platform. With that in mind, here’s how to remove Google’s “harmful programs” warning message in five easy steps.

      Step 1: Check Your Site Status in Safe Browsing

      Many search engines have built-in mechanisms designed to help keep internet users safe. For example, if Google is warning people away from your site, you might see a huge drop in organic traffic.

      Fortunately, you can verify whether Google has blacklisted your website using the Site Status diagnostic tool.

      Google’s Site Status diagnostic tool.

      Start by entering your WordPress site’s URL. The diagnostic tool will then run its tests and display a warning if it detects any unsafe content.

      If it does warn you about malicious content, your site has been blacklisted. With Google accounting for more than 60% of U.S. desktop search queries, this could have a devastating impact on your traffic. With so much at stake, you must take immediate action to resolve this problem.

      Step 2: Find the Malicious Code

      Once you’ve verified that malicious software is present on your site, it’s time to track down the offending code and files. While it’s possible to look for malware manually, this can be a time-consuming process that often requires a significant amount of technical know-how.

      Hackers are also coming up with new tricks all the time, so it’s not always easy to manually identify every single piece of malicious code. If you do leave some malware behind, search engines may continue to turn visitors away from your site. This means the hack will continue to impact your traffic, conversions, and search engine results.

      If the “harmful programs” warning persists for a significant period of time, it might even inflict long-term damage to your reputation. Your customers may begin to question how seriously you take security and whether you can really be trusted with their personal information.

      With the stakes being so high, we recommend using a professional malware removal service. Our DreamShield add-on can help ensure that your website is free from every trace of malicious code.

      When you add DreamShield to your plan, it will immediately scan your site for malware. It will then repeat this scan automatically every week. If DreamShield detects an issue, it will notify you via email and your DreamHost panel. Thanks to this powerful tool, you may be able to resolve a security breach before Google even realizes there’s a problem!

      To add DreamShield to your account, log in to your DreamHost dashboard. You can then navigate to Domains > Manage Domains.

      DreamHost’s DreamShield service.

      Now, find the domain where you want to enable DreamShield, and click on the accompanying Add Malware Remover link. You can then select the DreamShield Package Remover add-on that you want to use.

      Step 3: Remove the Malware From Your Site

      DreamShield will routinely scan your site and notify you about any issues. These notifications will specify how to remove the detected malware. Simply follow the instructions, and you should be able to eliminate the “harmful programs” warning.

      If you don’t have the DreamSheild add-on, you’ll need to remove these files manually. The best approach will vary, depending on the nature of the hack. However, you can often get positive results by connecting to your site via Secure File Transfer Protocol (SFTP) using a client such as FileZilla.

      Then, carefully work your way through all of your site’s files and delete any that have been compromised.

      A Secure File Transfer Protocol (SFTP) client.

      To speed up the process, it may help to look for files with modification timestamps that occurred around the time of the security breach. You may also want to examine any files where the timestamp seems suspicious, for example, if it’s dated after you last edited your site.

      Some hackers may try to insert code into the .htaccess file. To sanitize this file, connect to your site using an SFTP client. Then navigate to your public_html directory, which contains the .htaccess file.

      WordPress’ .htaccess file.

      Delete this file and then switch over to your WordPress dashboard. You can now navigate to Setting > Permalinks.

      WordPress’ permalink settings.

      Then, simply click on the Save Changes button at the bottom of the page. WordPress will automatically generate a new .htaccess file that’s completely free from malicious code.

      Step 4: Submit Your Site to Google for Review

      Once you’re confident that you’ve removed every trace of malware, you can ask Google to rescan your site. If you haven’t already, you’ll need to sign up to Google Search Console and verify that you own the website in question.

      After claiming your site, log in to the Search Console and navigate to Security & Manual Actions > Security Issues. On the next page, select Request a Review.

      Google will now process your request and provide a response in your Google Webmaster account or your Messages in Search Console. Assuming that you’ve managed to erase all malicious code, Google will remove the “harmful programs” error, and you can resume business as usual.

      Step 5: Harden Your Site Against Future Hacks

      Once you’re back in Google’s good books, it’s smart to perform a security audit. While no website can ever be 100% secure, there are steps you can take to strengthen your site against attack.

      Your password is essential for preventing unauthorized access to your dashboard. However, even with multiple security mechanisms in place, if a hacker manages to guess or steal your password, then all of your hard work may be for nothing.

      To start, it’s always a good idea to follow password best practices. This means using a minimum of eight characters and a mix of upper and lowercase letters, numbers, and symbols. You might also want to consider using a password generator such as Strong Random Password Generator or LastPass.

      The LastPass password generator.

      If you’re using a long and complex password, then you’re off to a great start. However, there are some attacks where password strength has less impact on whether the hacker succeeds or fails. This includes credential stuffing attacks, where a malicious third party attempts to break into your site using dozens or even hundreds of usernames and passwords.

      Two-Factor Authentication (2FA) can make your site far less susceptible to password-based attacks, including credential stuffing. With 2FA in place, a hacker will need to pass an additional security check before they can access your website. For example, they may need to enter a one-time PIN that’s sent to your smartphone.

      We always recommend installing a Secure Sockets Layer certificate (sometimes referred to as an SSL certificate or secure certificate). This ensures that you’re transferring data via Hypertext Transfer Protocol Secure (HTTPS) instead of Hypertext Transfer Protocol (HTTP). When your data is encrypted, it becomes much harder for an attacker to get their hands on information that they can use against you.

      Additional Troubleshooting Tutorials

      Do you want to learn how to resolve other WordPress issues? Here are some of our favorite troubleshooting tutorials:

      If you want more information about keeping your site in tip-top shape, check out our WordPress Tutorials. There, you’ll find everything you need to run a successful website.

      Dealing with Suspicious Code? You Can Skip the Stress

      Avoid troubleshooting unwanted software when you sign up for DreamPress. A friendly WordPress expert is always available 24/7 to help solve your website problems — big or small.

      Fixing the Harmful Programs Error

      If you encounter the “harmful programs” warning when trying to access your site, a hacker may be to blame. While this may sound scary, don’t panic – it is possible to recover a compromised website.

      Let’s quickly recap how to fix the “harmful programs” warning:

      1. First, verify your site status in Safe Browsing.
      2. Find malicious code using a service such as DreamShield.
      3. Remove malware from your site.
      4. Submit your site to Google for review via the Search Console.
      5. Harden your site against future attacks.

      If you’re seeing the “harmful programs” warning, our team of experts can get your site back to normal before the hacker has a chance to do more damage. As part of our Hacked Site Repair Service, we’ll even review your site and upgrade your security at no additional cost.



      Source link

      How To Convert a Gatsby Site to a Progressive Web App


      The author selected the Internet Archive to receive a donation as part of the Write for DOnations program.

      Introduction

      Gatsby is a popular framework for turning source material into static HTML files that are ready for instant deployment. Because of this, it is often called a Static Site Generator (SSG). As an SSG, it already has a positive impact on user experience (UX) by turning multiple content sources into an optimized website, but there is another layer available for UX improvement: Progressive Web App capabilities.

      A Progressive Web App, or PWA, is a type of website that goes beyond the usual limits of web capabilities, using newer technology to bridge the gap between your browser and your operating system. PWAs encompass a lot of different features, such as offline browsing, installation support, and newer web APIs. By combining these features, PWAs deliver your users an improved overall browsing experience, as well as the option to use your website like any other application, complete with its own icon and app window.

      Although there is a lot that goes into making an optimal PWA, Gatsby provides tools and support to streamline the process, such as a manifest file plugin (gatsby-plugin-manifest) and an offline plugin (gatsby-plugin-offline). This tutorial will walk you through using these plugins, as well as audit tools like Lighthouse, and by the end you will have learned how to take a Gatsby site and turn it into a fully-functional Progressive Web App.

      Prerequisites

      Before starting, here are a few things you will need:

      • A local installation of Node.js for running Gatsby and building your site. The installation procedure varies by operating system, but DigitalOcean has guides for Ubuntu 20.04 and macOS, and you can always find the latest release on the official NodeJS download page.
      • Some familiarity with JavaScript, for working in Gatsby. The JavaScript language is an expansive topic, but a good starting spot is our How to Code in JavaScript series.
      • An existing Gatsby project that does not yet have PWA support, but is otherwise functional. For satisfying this requirement and building a new Gatsby project from scratch, you can refer to Step 1 of the How to Set Up Your First Gatsby Website tutorial.
      • (Optional) An icon file for your website. In order to be installable, your PWA will need an icon with an original resolution of at least 512 x 512 pixels. If you do not have an icon in mind, this tutorial will instruct you to download a sample icon in Step 2.

      This tutorial was tested on Node v14.17.2, npm v6.14.13, Gatsby v3.9.0, gatsby-plugin-offline v4.8.0, and gatsby-plugin-manifest v3.8.0.

      Step 1 — Preparing Your Content (Optional)

      As a prerequisite, you already have created a functional Gatsby site that can be built and deployed. However, you might not have any content for your site yet. In this step, you will prepare a sample smart home user guide site to demonstrate what kind of content benefits from PWA features.

      As a smart home user guide is something likely to be visited multiple times by the same user, it makes a great example to showcase the main features of a PWA. The app-like qualities of a PWA, such as installation support and home screen icons, make it accessible on both mobile and desktop devices, and thanks to offline support, even when your home network fails, you or other residents can still access the guide.

      Building off the starter template, you can add a new page for the smart home guide under src/pages. Create a file named src/pages/internet-issues.js, and add the following sample page code:

      src/pages/internet-issues.js

      import * as React from "react"
      import { Link } from "gatsby"
      
      import Layout from "../components/layout"
      import Seo from "../components/seo"
      
      const IndexPage = () => (
        <Layout>
          <Seo title="Internet Issues" />
          <h1>Internet Issues - Troubleshooting</h1>
          <p>Having issues connecting to the internet? Here are some things to try in our house.</p>
          <ul>
            <li>Your Device
              <ul>
                <li>Is airplane mode on? Is WiFi enabled?</li>
                <li>Is the device within range of the router or physically connected to the network via ethernet?</li>
                <li>Are you connected to the correct network?</li>
              </ul>
            </li>
      
            <br />
      
            <li>The Router / Modem
              <ul>
                <li>Have you checked the ISPs status page to check for an outage? You can use your smartphone and mobile data to check this.</li>
                <li>Have you tried rebooting the router and/or modem?</li>
                <li>Have you checked to make sure that all physical connections to and from the router and modem are secure?</li>
              </ul>
            </li>
          </ul>
      
          <br/>
      
          <p>
            <Link to="/">Back to homepage</Link> <br />
          </p>
        </Layout>
      )
      
      export default IndexPage
      

      In this page code, you’ve provided troubleshooting instructions to your housemates or guests for when they are having trouble connecting to the internet. You have done so with a bulleted list, providing a link back to the homepage for easier navigation. Since this is a Gatsby project, you’ve created the entire page as a React component, which will nest your list inside a reusable Layout component and return the page as JSX so Gatsby can process it. For an optimized navigational experience, you’ve also used a Link component to link back to the homepage, instead of a regular HTML a tag.

      Make sure to save the file after updating it, and you can go ahead and close it since you won’t need to update it again in this tutorial.

      This page will be accessible at your_domain/internet-issues/, but you will also add a link to it from your homepage to make it easier to get to.

      Open up src/pages/index.js, and add a direct link to the new page within the React component IndexPage, as shown in the following highlighted code:

      src/pages/index.js

      import * as React from "react"
      import { Link } from "gatsby"
      import { StaticImage } from "gatsby-plugin-image"
      
      import Layout from "../components/layout"
      import Seo from "../components/seo"
      
      const IndexPage = () => (
        <Layout>
          ...
      
          <p>
            <Link to="/internet-issues/">Internet Issues Troubleshooting Page</Link> <br />
            <Link to="/page-2/">Go to page 2</Link> <br />
            ...
          </p>
        </Layout>
      )
      

      Save and close index.js with the added link.

      You’ve now built a brand new page for your smart home user guide and added a link to get to it from your homepage. In the next step, you will be adding a special file known as a manifest file, which instructs web browsers on the specifics of your PWA setup.

      Step 2 — Adding a Manifest File

      The next step is fulfilling one of the core requirements of PWAs by adding a manifest JSON file, manifest.json. The manifest file tells the web browser details about your site and how to display it to the user if it is installed on the users’s OS, specifying details such as what icon to use and how it should be launched. You will use gatsby-plugin-manifest to generate this file by initializing the plugin in your Gatsby config file.

      First, install the Gatsby plugin by running the following command in your Gatsby project directory:

      • npm install gatsby-plugin-manifest

      Next, you will provide some details to the plugin that tell it how you want the PWA to appear and act. You do this by editing the main Gatsby config file that lives in the root of your project directory, gatsby-config.js. Open this file and add the following code:

      gatsby-config.js

      module.exports = {
        plugins: [
          ...
      
          {
            resolve: `gatsby-plugin-manifest`,
            options: {
              name: `My Smart-Home Guide`,
              short_name: `SH Guide`,
              description: `Guide for residents of the ABC123 Smart Home`,
              start_url: `/`,
              background_color: `#0a68f0`,
              theme_color: `#0a68f0`,
              display: `standalone`,
              icon: `src/images/pwa-icon.png`,
              icons: [
                {
                  src: `/favicons/pwa-icon-192x192.png`,
                  sizes: `192x192`,
                  type: `image/png`
                },
                {
                  src: `/favicons/pwa-icon-512x512.png`,
                  sizes: `512x512`,
                  type: `image/png`
                }
              ]
            },
          }
      
          ...
        ]
      }
      

      Note: If you have started with the gatsby-starter-default template, you will already have some values for this plugin in your config file. In that case, overwrite the existing values with this code.

      There are a lot of values in this file, so here is a quick explanation:

      • name and short_name should correspond with the name of your site and how you want the site to appear to users when installed. short_name appears on the home screen of the user’s device, or other places where space is limited, and name appears everywhere else.
      • description should be text that describes the purpose of your application.
      • start_url is used to suggest to the browser which page should open when the user launches the PWA from their launcher. A value of /, as used here, tells the browser you would like the user to land on your homepage when opening the PWA.
      • background_color and theme_color are both directives to the browser on styling the PWA, and the values should correspond to CSS color strings. background_color is only used while waiting on the actual stylesheet to load, as a placeholder background color, whereas theme_color is potentially used in multiple places outside the PWA, such as surrounding the icon on an Android home screen.
      • display is a special value because it dictates how your entire site acts as a PWA, and, unlike other fields which support hundreds of different combinations, can be one of four possible values: fullscreen, standalone, minimal-ui, or browser. In your config, the value of standalone makes the PWA act like a standalone application outside the standard web browser. In practice, this means that it acts similar to a native application—it gets its own launcher icon, application window, and the URL address bar is hidden.
      • icon is not one of the standard manifest fields, but is a special field within the context of gatsby-plugin-manifest. By using this property, and providing a path to a file that meets the minimum requirements (at least 512x512 pixels, square), the Gatsby plugin will automatically transform the image into a site favicon, as well as inject into the manifest as the required icons manifest property. By specifying icons with an array of filenames, sizes, and image types, you are invoking the Hybrid Mode Configuration of the manifest plugin. This takes your single source icon file and transforms it into the filenames and sizes specified. This is not strictly necessary, but it avoids any possible issues with deployments in environments like Apache, which don’t work with the default /icons directory.

      Make sure to save the config file with your changes, but keep it open for the next step, where you will be adding another Gatsby plugin and configuring offline support.

      In the manifest values, the path used for icon was src/images/pwa-icon.png, but you still need to place an image file at that location before it will work. If you have a square image file that is at least 512 x 512 pixels, you can copy it to that path. Otherwise, you can use a pre-formatted image file selected for this tutorial. To use the tutorial icon file, either download the sample icon file for this tutorial and save it at src/images/pwa-icon.png, or if you prefer the command line, use cURL from your project root directory:

      • curl -o ./src/images/pwa-icon.png https://assets.digitalocean.com/articles/67869/1.png

      This will download the image to the correct part of your Gatsby application. This is the only image file you’ll need; Gatsby will automatically generate the 192x192 version.

      You have now configured your Gatsby project to serve a manifest JSON file with the correct values, which is a required part of enabling PWA capabilities. In the next step, you will be addressing another requirement of PWAs, offline support, by adding the feature via a service worker plugin, gatsby-plugin-offline.

      Step 3 — Adding Offline Support with Service Workers

      Another key component of PWAs is offline support, which you will implement with a piece of web technology known as a service worker. A service worker is essentially a bundle of JavaScript code that runs separately from all the code tied to the UI of the page you are on. This isolated code is also granted special privileges, such as the ability to alter the behavior of network requests, which is critical for implementing offline support. In this step, you will set up a robust service worker through the gatsby-plugin-offline plugin, configured through your Gatsby config file.

      Start by installing the gatsby-plugin-offline package and adding it to your dependencies. You can do so with:

      • npm install gatsby-plugin-offline

      Next, load the plugin through the Gatsby config, the same gatsby-config.js edited in the previous step:

      gatsby-config.js

      module.exports = {
        plugins: [
          ...
      
          {
            resolve: `gatsby-plugin-manifest`,
            options: {
              ...
            },
          },
          `gatsby-plugin-offline`,
      
          ...
        ]
      }
      

      Make sure to save the configuration file after adding the new plugin.

      Warning: Both the docs for gatsby-plugin-manifest and for gatsby-plugin-offline specify that gatsby-plugin-offline should always come after gatsby-plugin-manifest in the configuration array, as shown in this code snippet. This ensures that the manifest file itself can be cached.

      At this point, you’ve both added offline support and created a manifest file for your app. Next, this tutorial will explain the third necessary part of a PWA: having a secure context.

      Step 4 — Providing a Secure Context

      The last of the three basic minimum requirements for any PWA is that it run in a secure context. A secure context refers to a web environment in which certain baseline standards are met for authentication and security, and most often is referring to content served over HTTPS.

      A secure context can be achieved in many ways. Because of this, this tutorial will describe a few different strategies to get a secure context, then move forward with testing your Gatsby site locally.

      If you are deploying your Gatsby project through a static host, such as DigitalOcean’s App Platform, then it is likely that HTTPS is supported out of the box, with no setup required. For more information on deploying your app on App Platform, check out the How To Deploy a Gatsby Application to DigitalOcean App Platform tutorial.

      If you are deploying on a server that does not automatically provide HTTPS, but you have SSH access, you can use Let’s Encrypt to obtain and install a free TLS/SSL certificate. For example, if you are using Apache with Ubuntu 20.04, you can follow How To Secure Apache with Let’s Encrypt on Ubuntu 20.04 to use Certbot to handle this process. If you are deploying to a shared host, you will want to check their specific documentation pages for if, and how, SSL certificate installation might be available.

      For local testing, you don’t have to deal with obtaining or installing an SSL certificate. This is because most modern browsers treat localhost sites as a secure context, even without a TLS/SSL certificate installed or HTTPS protocol.

      You now have successfully added PWA support to your Gatsby project by meeting the three baseline criteria: HTTPS (or a localhost secure context), a manifest file, and a service worker. The next step is to test and verify that it shows up correctly, with PWA features enabled.

      Step 5 — Running Local Tests

      In this step, you will run some local tests to make sure your PWA functionality is working properly. This is an initial testing step before using the Lighthouse tool for a more comprehensive audit.

      To locally test your Gatsby site’s functionality as a PWA, build it and then serve the generated build directory:

      • npm run build
      • npm run serve

      Once it is ready, you will see the following:

      Output

      You can now view gatsby-starter-default in the browser. ⠀ http://localhost:9000/

      You can now visit that URL in your web browser, and if the browser supports PWAs, you will encounter some special additional UI elements. For example, on Chrome desktop, there will be a new button exposed in the address bar that, when clicked, asks if you would like to install the Gatsby site as an app, as shown in the following image:

      Screenshot showing a popup menu, originating from the Chrome desktop address bar, asking if you would like to

      If you want to test your site locally on a smartphone, this is possible with something like Chrome’s remote debugging tool (Android only), or a localhost tunneling service such as ngrok. On mobile, you will encounter the same option to install your site as an app, as shown in the following:

      Screenshot from an Android device, showing a

      This PWA prompt is different for each device, operating system, and browser. Additionally, certain features such as Add to Home Screen might only be available on certain devices. Certain browsers running on specific devices might not support PWAs entirely; check caniuse.com for more information on platform support.

      You have now verified that your Gatsby project can be built and served locally, with your browser successfully detecting that it offers PWA functionality. The next step will be a final check against what you have put together, and using the Lighthouse tool to check if there are areas for improvement.

      Step 6 — Running an Audit with Lighthouse

      At this point, you have a Gatsby site that meets all the core requirements for a PWA: it has HTTPS, a manifest, and a service worker for offline support. However, the concept of a PWA goes beyond any single requirement—it encompasses all of the facets working together, plus adhering to general guidelines. With this in mind, your last step is to use an audit tool to verify that you meet the baseline criteria, as well as gather information on how you can further optimize your Gatsby project to meet PWA best practices.

      There are a few different ways to audit your site as a PWA, but at the moment the gold standard is the Lighthouse Tool. If you have desktop Chrome installed, you can run an audit against your site directly in the web browser DevTools.

      First, navigate to your Gatsby site in Chrome, then open Chrome DevTools by right clicking anywhere on the webpage and selecting Inspect in the right click menu. Next, click the Lighthouse tab under DevTools. If you don’t see it, click the >> label next to the right-most tab to show tabs that are hidden due to size constraints.

      Now, to actually run the report, uncheck everything on the Lighthouse tab except for Progressive Web App, and then hit Generate Report to analyze your site:

      Screenshot showing the Lighthouse tab in desktop Chrome DevTools, with only the Progressive Web App report category checked

      You can also generate this report programmatically, via the Lighthouse Node.js CLI. This command will run the PWA-only audit and then open the report for viewing:

      • npx lighthouse http://localhost:9000 --only-categories=pwa --view

      However, using Lighthouse via CLI does not bypass the need to have Chrome installed; this just makes it easier to automate the process.

      The report generated by Lighthouse tells you a few things, broken down into categories. Some of the most important are:

      • Installable: This is the most important category, and addresses whether or not your site meets the three baseline criteria for being an installable PWA—HTTPS, manifest files, and a service worker.
      • PWA Optimized: These are things that you should be doing for an optimal PWA user experience, but aren’t strictly required for your PWA to be functional. Think of these as best-practice suggestions. Some examples of these are creating a custom splash screen to display during mobile app loading, setting a theme color for the address bar, and providing fallback content for when JavaScript is unavailable. If you’d like to look at the full list, check out the official Lighthouse documentation.

      By using the Lighthouse tool to audit your Gatsby PWA, you not only now have a functional PWA, but also have an idea of how it meets PWA requirements and best practices.

      Conclusion

      After following these steps, you now have a Gatsby site that can also function as a modern installable Progressive Web App, with strong offline support. You are now providing your users with the best of both worlds: They can browse your site as a normal web page, but they can also use it as they would a native application, with its own launcher icon, display window, and the reliable performance they expect from native applications.

      If you are looking for more ways to deliver the most optimized PWA experience possible, in addition to the Lighthouse PWA audit, Google also has a published a PWA checklist that will help. If you would like to read more on Gatsby, check out the rest of the How To Create Static Web Sites with Gatsby.js series.



      Source link