pwa.js

Turn a website into a PWA.

How it works

pwa.js is a script you can add to a website.

After loading, the script will add an event listener to all a tags on the page. When an a link is clicked, pwa.js makes a request to the link destination, parses the document HTML, and replaces a specified part of the current page with a specified part from the new page.

You can use pwa.js to enable persistence across your website. You can have an element (i.e. a notes section) that loads on one page and let a user take that video with them through the site.

Setup

First, add the pwa.js script to your website. You can find the script in the GitHub repository.

Add the script below the closing body tag.

<script src="pwa.js"></script>

Out of the box, the script will replace the element with the ID main of a given page with the contents of the same element in a target page.

We recommend wrapping the main body of a page that will change between pages (i.e. the contents between the navigation bar and footer).

You can change the target element by replacing the main ID in the script with the ID of the element you want to replace.

                
const SELECTOR = '#main';
                
            

By default, pwa.js will replace the head tag when you navigate between pages on a website. You can override this behaviour by changing the RENDER_HEAD constant to false.

pwa.js sends a X-Headless HTTP header to the server when it makes a request to a page. You can use this header to detect if a request is coming from pwa.js and return a different response (i.e. only return page body, rather than the full document). This will make pwa.js faster because less text needs to be sent over the wire and parsed into a DOM for use in the app. If you send a headless version, you cannot replace document heads with the RENDER_HEAD option.

SEO Considerations

pwa.js does not replace link anchors with other text; rather, the script adds an event listener to the click event of all a tags on the page. This means that search engines will still be able to crawl your website and index it.