nach oben

2017 | Buch

Kapitel lesen Erstes Kapitel lesen

Beginning Progressive Web App Development

Creating a Native App Experience on the Web

verfasst von: Dennis Sheppard

Verlag: Apress

Enthalten in: Springer Professional "Wirtschaft+Technik" , Springer Professional "Technik" , Springer Professional "Wirtschaft"

Einloggen, um Zugang zu erhalten

Über dieses Buch

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 Learn

Achieve 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

Inhaltsverzeichnis

Frontmatter

Intro to PWAs and Tooling

Frontmatter

Chapter 1. Introduction to Progressive Web Apps

Abstract

When was the last time you visited an app’s mobile web site rather than its native app counterpart? Was it an enjoyable experience? What did you like about it? What could have been better?

Dennis Sheppard

Chapter 2. Tools to Measure Progressive Web Apps

Abstract

Before you go too far down the path of learning how to implement PWA features, it may help to know exactly what goals you’re trying to achieve, and how to measure your apps against those goals. I’ve already mentioned the core principles of Progressive Web Apps, but there are a lot of other little things I haven’t touched on. Most of them wouldn’t warrant a discussion all on their own; they’re just simple things you should do to make your app all it can be.

Dennis Sheppard

PWA Features

Frontmatter

Chapter 3. Service Workers

Abstract

How’s your cell phone signal right now? Are you on a capped data plan? Is your WiFi spotty? Maybe your roommate is torrenting movies and taking all the bandwidth. Perhaps you’re commuting on a train, and your cell provider’s coverage map claims the whole route is blanketed in LTE, but all you see is a perpetually spinning circle of no Internet and you start to question what you’re even paying for. But take deep breaths. Whatever the reason for your lack of a great Internet connection, there’s no reason to be ashamed. It’s not your fault.

Dennis Sheppard

Chapter 4. Caching and Offline Functionality with Service Workers

Abstract

Now that you know what service workers are and how to implement a very basic one, in this chapter you’re going to go beyond the basics. We want apps to be fast, reliable, and work offline whenever possible. So now I’m going to talk about the Cache API that lets us return items we specify from the cache instead of making the whole journey to the server.

Dennis Sheppard

Chapter 5. Background Sync for Offline Apps with Service Workers

Abstract

Most of the Pirate app is fully offline-capable. There’s one glaring weakness remaining, though, as far as functionality without a connection goes. If you need to make an API call while you don’t have a connection, there’s no mechanism in place to do that. This Pirate app is so great, we’d love for people to be able to leave comments about it. Or even have pirate-based conversations! But what if you happen to like posting Internet comments when you’re out at sea where your Internet connection is choppy? That’s where the Background Sync API is going to help!

Dennis Sheppard

Chapter 6. Adding your App to the Home Screen with Web App Manifest

Abstract

To this point, everything you’ve done could be applied to both a “traditional” web app you’d visit on your laptop or desktop computer as well as on a mobile device. In fact, offline capabilities are likely going to be needed more often on a mobile device than on a laptop. But the web app manifest is a PWA feature that is really mobile-focused. With it, you can specify details about your app that help devices give your users the best possible experience.

Dennis Sheppard

Chapter 7. Notifications

Abstract

This chapter is going to cover something that has become a little bit controversial recently. While push notifications on the Web are a powerful feature that inches the Web ever closer to native apps, some developers have started to transform them into trite annoyances that have conditioned users to ignore notifications or turn them off outright. How often do you give an app the okay to send you notifications on your phone? On the Web? There’s a good chance you’re pretty stingy with which apps you give permission to send you notifications.

Dennis Sheppard

Chapter 8. App Shell Architecture and Loading Performance

Abstract

One of the most important things you can do for your users is to give them the content they’re looking for as soon as possible.

Dennis Sheppard

Chapter 9. Exploring HTTP/2 and Server Push

Abstract

It has created relationships and knowledge sharing and the ability to look at cute puppy pictures on a whim. And for all of these things and many more, we are grateful. But as is so common as time slips by, our beloved Hypertext Transfer Protocol has shown its age. As the Web has grown, bandwidth has increased, and users are demanding richer content, HTTP 1.1 (the version you’re probably most familiar with) has shown some fundamental problems.

Dennis Sheppard

Putting the Features to Use

Frontmatter

Chapter 10. Turning a Real App into a PWA

Abstract

This is the moment you’ve been training for. Everything you’ve learned in the previous chapters has prepared you for this: your first chance to take an actual application and turn it into a PWA. None of that pirate stuff. This is the real deal. Kind of. Mostly. You’ll be taking a fantastic open source app from GitHub that’s in need of a little PWA love. First, you’ll check out the app’s Lighthouse scores for PWA and Performance. That’ll give you an idea of where to start. You’ll try to get as close to a perfect Lighthouse score as you can, but the main focus will be on making all sorts of PWA enhancements.

Dennis Sheppard

Chapter 11. PWAs From the Start

Abstract

To this point, you’ve cobbled together a Pirate PWA piece by piece and you took a movie app and totally transformed it (at least in the eyes of Lighthouse and the PWA world). There’s nothing devs love more, though, than starting a new project from scratch. Just mention the words “greenfield” or “starter kit” to a software developer and watch their eyes light up. So in this chapter I’ll talk about creating a progressive web app even before you add in any application logic. To do that, I need to talk about the most popular frameworks and libraries in the JavaScript ecosystem today. While it is a completely valid option to stick with VanillaJS to write your JavaScript apps (just look at that beautiful pirate app, after all), nowadays it’s probably most common to use some kind of library or framework. There are just too many advantages to using React or Angular or lots of others to completely and purposely avoid them. And now that PWAs are taking the world by storm, those frameworks and libraries are following suit by giving you a PWA with just a few keystrokes. In this chapter, I’ll talk about those keystrokes by covering a handful of the PWA-friendly frameworks and libraries available today: React, the ultra popular library originating from Facebook; Preact, a smaller and faster React alternative; Vue.js, the tiny view-focused library that has really blown up in the past year; Angular, the revamped component-based solution from Google; and Ionic, the mobile-centric framework built on top of Angular.

Dennis Sheppard

Leveling Up Your PWA

Frontmatter

Chapter 12. Leveling Up Your PWA

Abstract

At this point, your official PWA education is complete. Congratulations! Using what you’ve learned in this book, you now should be able to create a web application that loads fast, is installable on Android devices, works completely offline, and engages users. However, there is always more to learn. Developers tend to be smart people, and smart people are going to keep coming up with better and better ways to do things. That’s what this chapter is about: taking steps beyond what you’ve learned about PWAs and making your apps even better. That will include even more performance patterns and enhancements, like Google’s PRPL pattern, lazy loading, code splitting, server-side rendering, and web workers. You’ll explore all of that and more in this chapter. If you’ve made it this far, you’ve earned enough XP; it’s time to level up your PWA!

Dennis Sheppard

Backmatter

Titel: Beginning Progressive Web App Development
verfasst von: Dennis Sheppard
Verlag: Apress
Electronic ISBN: 978-1-4842-3090-9
Print ISBN: 978-1-4842-3089-3
DOI: https://doi.org/10.1007/978-1-4842-3090-9