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.

Related Content you might be interested in

Current Title:

Small book image
Progressive Web Application Development by Example
Chris Love
Jul, 2018 | 354 pages
Small book image
Progressive Web Apps with React
Scott Domes
Oct, 2017 | 302 pages
Small book image
Hybrid Mobile Development with Ionic
Gaurav Saini
Apr, 2017 | 242 pages
Small book image
Blazor WebAssembly By Example
Toi B Wright
Feb, 2023 | 438 pages
Table of Contents (12 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Introduction to Progressive Web Apps
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
2
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
Summary
3
Making Your Website Secure
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
4
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
The Fetch API
Creating a service worker shell
The service worker life cycle
Caching
Using push notifications
Background sync
Summary
5
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
Summary
6
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
Caches object
The Cache object
Summary
7
Service Worker Caching Patterns
Service Worker Caching Patterns
How the service worker cache works
Service worker events
Caching patterns and strategies
Service worker templating
Summary
8
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
Summary
9
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
Summary
10
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
Summary
11
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Making your PWA iOS web app capable

When Apple introduced iOS, the original app recommendation was to use HTML5, CSS3, and JavaScript to create rich client-side user experiences. Apple has not removed web app support and has enhanced some capabilities over time. The iOS web app experience is driven by custom metadata that's added to a web page's HEAD.

Much of the Apple meta data has served as a model for the modern web manifest specification. Before the web manifest specification was created, Chrome on Android integrated support for the Apple meta data to drive a similar experience.

The web app experience on iOS is triggered when your website contains Apple-specific META tags, corresponding icons, and when the user has added your site to their homescreen.

The first piece you need is a png file as the default homescreen icon. The file should be named apple-touch-icon...

Previous Section
End of Section 3
Next Section