Book Image

Progressive Web Application Development by Example

By : Chris Love

Book Image

Progressive Web Application Development by Example

By: Chris Love

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

Free Chapter

Introduction to Progressive Web Apps

Introduction to Progressive Web Apps

Why we needed a new way to build websites

Real-world PWA examples

PWA technical requirements

Creating a Home Screen Experience with a Web Manifest

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

Making Your Website Secure

Making Your Website Secure

How does TLS work?

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

Service Workers – Notification, Synchronization, and Our Podcast App

Service Workers – Notification, Synchronization, and Our Podcast App

The service worker thread

Service worker browser support

The podcast application

Creating a service worker shell

The service worker life cycle

Using push notifications

Background sync

The Service Worker Life Cycle

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

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

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

Using the Fetch API

Caching responses

The Cache object

Service Worker Caching Patterns

Service Worker Caching Patterns

How the service worker cache works

Service worker events

Caching patterns and strategies

Service worker templating

Applying Advanced Service Worker Cache Strategies

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

Optimizing for Performance

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

Service Worker Tools

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

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Other Books You May Enjoy

If you enjoyed this book, you may be interested in these other books by Packt:

Progressive Web Apps with React
Scott Domes

ISBN: 9781788297554

Set up Webpack configuration, as well as get the development server running
Learn basic Firebase configuration and deployment
Create routes, manage multiple components, and learn how to use React Router v4 to manage the flow of data
Use React life cycle methods to load data
Add a service worker to the app and learn how it works
Use a service worker to send Push Notifications
Configure Webpack to split up the JavaScript bundle and lazy load component files
Learn how to use the web Cache API to use your app offline
Audit PWAs with Google's Lighthouse tool

Hands-on Full Stack Development with Angular 5 and Firebase
Uttam Agarwal

ISBN: 9781788298735

Understand the core concepts of Angular framework
Create...