Progressive Web Application Development by Example

By : Love

Buy this Book

Progressive Web Application Development by Example

By: Love

Buy this Book

Overview of this book

Are you a developer that wants to create truly cross-platform user experiences with a minimal footprint, free of store restrictions and features customers want? Then you need to get to grips with Progressive Web Applications (PWAs), a perfect amalgamation of web and mobile applications with a blazing-fast response time. Progressive Web Application Development by Example helps you explore concepts of the PWA development by enabling you to develop three projects, starting with a 2048 game. In this game, you will review parts of a web manifest file and understand how a browser uses properties to define the home screen experience. You will then move on to learning how to develop and use a podcast client and be introduced to service workers. The application will demonstrate how service workers are registered and updated. In addition to this, you will review a caching API so that you have a firm understanding of how to use the cache within a service worker, and you'll discover core caching strategies and how to code them within a service worker. Finally, you will study how to build a tickets application, wherein you’ll apply advanced service worker techniques, such as cache invalidation. Also, you'll learn about tools you can use to validate your applications and scaffold them for quality and consistency. By the end of the book, you will have walked through browser developer tools, node modules, and online tools for creating high-quality PWAs.

Preface

Who this book is for

What this book covers

To get the most out of this book

Get in touch

Free Chapter

Introduction to Progressive Web Apps

Why we needed a new way to build websites

Real-world PWA examples

What are PWAs?

PWA advantages

PWA technical requirements

2048

Summary

Creating a Home Screen Experience with a Web Manifest

Why add to homescreen is important

Making your PWA iOS web app capable

The web manifest specification

Validating web manifest files

The Chrome improved add to homescreen experience

The add to homescreen experience

Your add to homescreen responsibilities

Tracking homescreen installs

Polyfiling the homescreen experience on iOS and other legacy browsers

Microsoft Edge and Internet Explorer

Benefits await without Polyfils

Testing the add to homescreen experience in Chrome

Summary

Making Your Website Secure

SSL history

How does TLS work?

What is HTTPS?

Different types of SSL certificate

How to obtain and install an SSL certificate

Migrating a website to HTTPS

Auditing the site for any HTTP:// link references

Configure server auto-redirect of HTTP to HTTPS

Summary

Service Workers – Notification, Synchronization, and Our Podcast App

The service worker thread

Service worker browser support

The podcast application

The Fetch API

Creating a service worker shell

The service worker life cycle

Caching

Using push notifications

Background sync

Summary

The Service Worker Life Cycle

Registering a service worker

Service worker clients

Updating a service worker

Service worker scope

Service worker updates

Service worker events

Summary

Mastering the Cache API - Managing Web Assets in a Podcast Application

Using the Fetch API

Caching responses

Caches object

The Cache object

Summary

Service Worker Caching Patterns

How the service worker cache works

Service worker events

Caching patterns and strategies

Service worker templating

Summary

Applying Advanced Service Worker Cache Strategies

What is PWA tickets?

Using the JSON server for an API

The PWA ticket JavaScript architecture

The PWA ticket service worker architecture

Using the request method to determine the caching strategy

Matching routes with caching strategies

Cache invalidation strategies

Summary

Optimizing for Performance

The importance of WPO

Reducing image payload size

The cost of CSS and JavaScript

Key performance indicators

The PRPL pattern

The RAIL pattern

Inline critical CSS

Minifying scripts with uglify

Using feature detection to conditionally load JavaScript polyfils

Lazy loading images

Summary

Service Worker Tools

Using PWABuilder to scaffold your PWA

Auditing web pages using Lighthouse

Auditing web pages with Sonar

Making complex service workers with workbox

Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Using feature detection to conditionally load JavaScript polyfils

The PWA ticket application uses many modern APIs, but some are not supported by older browsers. There are two browser scenarios you should be most concerned with: Internet Explorer and older Android phones. UC Browser is another popular browser that does not support all newer features yet.

Internet Explorer is the now deprecated Microsoft Browser. The only supported version is IE 11, and right now only lives on Windows 7 and in enterprises. Enterprises use many line of business applications, and many were created against old and obsolete web standards. Often, it is expensive for them to update or replace these applications.

Internet Explorer provides a legacy browser channel for them to continue running these applications. However, when they upgrade to Windows 10, they should configure these line of business applications...