PWA

Progressive Web Apps Development

v0.5.15 2019-06-13T17:18:54
Be Very Aware!
This Web Site Is Under Construction

Work in Progress

Progressive Web Apps

PWAs are able to work completely offline, have nearly instant load times, are secure, and resilient to unreliable networks. Most modern browsers already have these features built into them, they only need to be used

PWAs use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps. PWAs have some advantages:

  • Discoverable - PWAs are discoverable using Search Engines, and when a user gets to a site which has PWAs capabilities, the browser in combination with the device asks the user if they want to install the app to the home screen

  • Installable - The relevant web standard here is the PWA manifest, which defines features of an app such as name, icon, splash screen, and theme colors in a JSON-formatted manifest file. This is for use in contexts such as app listings and device home screens

  • Linkable - One of the most powerful features of the PWA is to be able to link to an app at a specific URL — no app store needed, no complex installation process

  • Network Independent - PWAs can work when the network is unreliable, or even non-existent

PWAs are a game-changer. Major browser vendors are working together to improve how web sites are built, and have created a new set of features that give web developers the ability to create fast, reliable, and engaging websites. PWAs also have these attributes:

  • Responsive
  • Connectivity-independent
  • Interactive with a feel like a native app’s
  • Always up-to-date
  • Safe

This site is a Progressive Web App. PWAs are not created with a single technology. They are apps built to run in web browsers. They are developed using technologies and standards of both web and native apps

Native apps from App Stores are tied to specific devices or operating systems and offer a seamless experience for the users. They work offline, and users tap home screen icons to run them, rather than navigating to a web site using a browser

PWA technologies enable creating web apps that have native app advantages. They deliver an experiences like native apps using browsers. They feels like a native apps. PWAs are built for the web, they are not tied to specific devices or operating systems. They display seamlessly and identically on all devices, including desktop, mobile, tablet, or whatever comes next

Are PWAs Worth Doing?

With a relatively small amount of effort required to implement the core PWA features, the benefits are huge:

  • Fast - Users web experiences are not limited by Internet, servers, or web page rendering engine speeds. It is only limited by the speed of web browsers running on user devices

  • Web Standard Programming Languages - PWAs are programmed using Web Standard Programming Languages. PWA compilers puts all the bits and piece together necessary to make complete PWAs that run in web browsers. PWAs work because they are built using the same Web Standard Programming Languages as browsers. PWAs are independent of device hardware or operating systems

  • Interoperability - PWAs fit any form factor: desktop, mobile, tablet, or whatever is next. Native apps suffers from a lack of interoperability

  • Service Workers - Service workers are key to PWAs. They enable PWAs to load instantly, regardless of network quality. They also keep PWAs up-to-date by serving the user with the newest content upon launch. PWAs are designed to work offline and in areas of low Internet connectivity. The user is able to save them to their home screen to access them at any time, just like native apps. There is no need for app stores

  • Safe - Served to browsere using HTTPS prevents snooping and ensures the content hasn’t been tampered with. They are also secure because there is little opportunity for exploit because they run in browsers on user devices, independent and isolated from all other browser activity

  • Cohesive Experience - Using web browser technology means they work on platforms with browsers built with Web Standard Programming Languages, and independent of operating systems. PWAs look, play, and perform the same on all devices. Users will have a cohesive experience on any device they choose to launch the app on.

  • Bright Future - The technology has a bright future as it further developes and evolves into new and improved technologies that continue to abstract the PWAs ecosystem

Progressive Web Abbs References

Required Skills

Building PWAs requires skills building web sites using Web Standard Programming Languages

  • HTML to define the content of web pages

  • CSS to specify the layout of web pages

  • JavaScript to program the behavior of web pages

Tools

Building PWAs is challenging. Fortunately there are helpfull tools for building and deploying PWAs

  • JAMstack - A modern PWAs PWA Development Architecture

  • React - A JavaScript library for building user interfaces

  • The Gatsby PWA compiler and the VScode editor together help streamline building PWAs

  • VScode - Is an alias for the Microsoft Visual Studio code editor. It is probably the best Central Command and text editor I’ve used

  • GitHub - A web hosted repository for Git projects that helps software teams collaborate and maintain the entire history of project code changes, and helps answer the questions who changed what, when, where, and why

  • Netlify - Netlify provides everything needed to automatically deploy PWAs from GitHub repositories

  • The PWA Development Architecture page has a PWA Development Architecture diagram, a synopses and links to components used to build this PWA

John Telford
John Telford
Portland, Oregon