Sheppard Beginning Progressive Web App Development

Creating a Native App Experience on the Web
1. ed
ISBN: 978-1-4842-3090-9
Verlag: Apress
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Englisch, 268 Seiten

Build fast, reliable web applications using the latest web development technologies. This book provides step-by-step learning through the process of transforming a 'traditional' web app into a high-performing progressive web app, leveraging principles and lessons taught throughout the book. You will learn to improve the performance, reliability, reach, and user engagement of mobile web applications through the use of specific, practical examples. Because most non-trivial web applications developed today use JavaScript frameworks, you will learn about the most popular frameworks offering a PWA right out of the box, including React, Preact, Vue.js, Angular, and Ionic. You also will learn which tools to enlist to measure your application's performance, such as Google's Lighthouse.Beginning Progressive Web App Development includes best practices to make your app work even when an end user has a poor or no Internet connection, and to send notifications and reminders with the Notification and Push APIs to keep your users engaged. You will come away with an understanding of the technologies-application shells, server push technology, and caching-that will allow you to rapidly deliver content to your users.As important as it is to provide mobile users with a great experience, the principles of PWAs are not limited to smartphones. Most of what you will learn in this book is directly applicable to web applications on all screen sizes. 
What You'll LearnAchieve nearly instant loading times
Implement service workers to make your app load faster and work while users are offline
Keep users engaged with web notifications
Measure the performance and reach of your web applications
Transform your existing web app into a progressive web appCreate a progressive web app from scratch
Understand what building a truly fast web app entails with Google's PRPL pattern  
Who This Book Is For
Web developers with prior JavaScript experience

Dennis Sheppard is the VP of Technology at NextTier Education, a startup dedicated to helping students navigate the college selection process. Long before that, though, Dennis graduated from Louisiana Tech University with a computer science degree, and went on to develop and architect software for almost a dozen different industries. With over 10 years of professional software development experience, he has built his share of web applications, for both mobile and desktop. Because of that, Dennis strongly believes in the power of Progressive Web Apps to further help the tech world reach those who do not have access to the fastest networks and latest and greatest phones. He was born and raised in the deep south, but migrated to the suburbs of Chicago where he lives with his wife, a set of twins who are growing up way too fast, and an arthritic but playful golden retriever.

Autoren/Hrsg.

Sheppard, Dennis

Inhaltsverzeichnis

1;Table of Contents;5
2;About the Author;11
3;About the Technical Reviewer;12
4;Acknowledgments;13
5;Part I: Intro to PWAs and Tooling;14
5.1;Chapter 1: Introduction to Progressive Web Apps;15
5.1.1; What a Progressive Web App Actually Is;17
5.1.2; Current and Future PWA Support;20
5.1.3; Looking Ahead;22
5.2;Chapter 2: Tools to Measure Progressive Web Apps;23
5.2.1; A Light to Keep You Off the Rocks;23
5.2.2; Chrome DevTools;27
5.2.3; Webpagetest.org;30
5.2.4; Looking Ahead;32
6;Part II: PWA Features;33
6.1;Chapter 3: Service Workers;34
6.1.1; Promises;36
6.1.2; Fetch;40
6.1.3; Service Workers;41
6.1.4; Register the Service Worker;42
6.1.5; Updating the Service Worker;49
6.1.6; Other DevTools Options;53
6.1.7; Browser Compatibility;54
6.1.8; Service Worker Recap;54
6.1.9; Looking Ahead;54
6.2;Chapter 4: Caching and Offline Functionality with  Service Workers;55
6.2.1; The fetch Event;55
6.2.2; The Cache API;57
6.2.3; Going Offline;63
6.2.4; Different Caching Strategies;66
6.2.5; Updating the Cache;71
6.2.6; sw-precache;73
6.2.7; sw-toolbox;75
6.2.8; Dynamic Page Caching;79
6.2.9; Looking Ahead;81
6.3;Chapter 5: Background Sync for Offline Apps with Service Workers;82
6.3.1; The Background Sync API;82
6.3.1.1; Registering for sync;82
6.3.1.2; Listening for sync;83
6.3.1.3; Implementation Details of Using sync;84
6.3.1.4; Testing for Offline Sync;89
6.3.2; Making Improvements;90
6.3.3; Data Storage;91
6.3.3.1; IndexedDB vs. localForage;91
6.3.3.2; Using localForage For Better Offline Support;95
6.3.3.3; The message Service Worker Event;99
6.3.3.4; Looking Ahead;102
6.4;Chapter 6: Adding your App to the Home Screen with Web App Manifest;103
6.4.1; Installing the App to the Home Screen;108
6.4.1.1; Handling Installation Events;108
6.4.1.2; Manually Adding the App to the Home Screen;109
6.4.2; The App Splash Screen;112
6.4.3; The display Property;114
6.4.4; The start_url Property;115
6.4.5; Looking Ahead;115
6.5;Chapter 7: Notifications;116
6.5.1; Web Notifications;118
6.5.1.1; Requesting Permission to Notify;118
6.5.1.2; Sending a Notification;120
6.5.1.3; Tagging Notifications;123
6.5.1.4; Web Notifications with Service Workers;123
6.5.2; Push Notifications;125
6.5.2.1; Subscribing a User to Push Notifications;126
6.5.2.2; Saving the PushSubscription Object;131
6.5.2.3; Triggering the Push Notification;135
6.5.2.4; Catching Push Events in the Service Worker;137
6.5.2.5; Testing Push on Mobile;140
6.5.2.6; Handling Notification Click Events;142
6.5.2.7; Looking Ahead;144
6.6;Chapter 8: App Shell Architecture and Loading Performance;145
6.6.1; What an App Shell Is;145
6.6.2; Caching the App Shell;149
6.6.3; Measuring App Shell Performance;151
6.6.4; Going Beyond the App Shell;152
6.6.4.1; Render Blocking Scripts;154
6.6.4.2; Async and Defer;155
6.6.4.3; Deferring Stylesheet Parsing and Execution;157
6.6.4.4; Preloading JavaScript and CSS and Other Resources;157
6.6.4.5; Looking Ahead;159
6.7;Chapter 9: Exploring HTTP/2 and Server Push;160
6.7.1; Head-of-Line Blocking;160
6.7.2; Header Compression;163
6.7.3; Introducing HTTP/2;164
6.7.4; Implementing HTTP/2 in Node.js;164
6.7.5; Server Push;167
6.7.6; Deploying HTTP/2 and Server Push;173
6.7.7; Measuring the Impact of HTTP/2 and Server Push;174
6.7.8; Looking Ahead;177
7;Part III: Putting the Features to Use;178
7.1;Chapter 10: Turning a Real App into a PWA;179
7.1.1; The Movies Finder App;179
7.1.2; The Plan to Make a PWA;184
7.1.3; Getting the Code and Running It;185
7.1.4; Setting Up sw-precache;186
7.1.5; Caching All the Things;190
7.1.6; Deploying to Firebase;193
7.1.7; Moving the Render-Blocking Stylesheet;197
7.1.8; Implementing Server Push;197
7.1.9; Adding the App Manifest;201
7.1.10; Thoughts on Movies Finder Performance;210
7.1.11; Looking Ahead;211
7.2;Chapter 11: PWAs From the Start;213
7.2.1; React PWA;214
7.2.1.1; Creating a React App;215
7.2.1.2; Configuring the Service Worker;217
7.2.1.3; Running and Building the React App;218
7.2.1.4; Deploying and Measuring Your React PWA;219
7.2.1.5; Summary of React’s PWA Effort;221
7.2.2; Preact PWA;221
7.2.2.1; Preact CLI;222
7.2.2.2; Running the Built-in Preact HTTP/2 Server;223
7.2.2.3; Preact CLI Plugins;224
7.2.2.4; Running Lighthouse on Firebase-Deployed Preact;225
7.2.2.5; Summary of Preact’s PWA Effort;227
7.2.3; Vue.js PWA;227
7.2.3.1; Vue CLI and PWA Creation;228
7.2.3.2; What the Deployed Vue PWA Offers;229
7.2.3.3; Running Lighthouse on Firebase-Deployed Vue;231
7.2.3.4; Summary of Vue’s PWA Effort;233
7.2.4; Angular PWA;233
7.2.4.1; Angular’s Rocky PWA Start;234
7.2.4.2; Building the Angular PWA;235
7.2.4.3; Running Lighthouse on Firebase-Deployed Angular;236
7.2.4.4; Summary of Angular’s PWA Offering;237
7.2.5; Ionic PWA;237
7.2.5.1; Installing Ionic;238
7.2.5.2; Enabling the Ionic Service Worker;240
7.2.5.3; Building Ionic;240
7.2.5.4; Deploying and Testing the Ionic PWA;241
7.2.5.5; Summary of Ionic’s PWA Offering;243
7.2.6; Starting a PWA from Scratch;244
7.2.7; Looking Ahead;244
8;Part IV: Leveling Up Your PWA;245
8.1;Chapter 12: Leveling Up Your PWA;246
8.1.1; Google’s PRPL Pattern;246
8.1.1.1; Lazy Loading;247
8.1.1.2; Code Splitting;247
8.1.2; Analyzing Bundles;249
8.1.3; Server-Side Rendering;252
8.1.3.1; Drawbacks to Server-Side Rendering;254
8.1.3.2; Resources to Implement Server-Side Rendering;254
8.1.3.3; Pre-Rendering;255
8.1.4; Web Workers;255
8.1.5; PWA News;259
8.1.5.1; Safari;259
8.1.5.2; Workbox;259
8.1.6; A Last Word;262
9;Index;263