41,99 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Enhance the performance of your applications by using React and adding the Progressive web app capability to it
About This Book
- Bring the best of mobile sites and native apps to your users with progressive web applications
- Create fast, reliable, and engaging PWAs with React and Firebase
- Create high-performance applications even with low connection speeds by leveraging modern web technologies
Who This Book Is For
This book is for Javascript Developers who want to develop high performance Web User Interfaces. This book requires basic knowledge of HTML, CSS and JavaScript.
What You Will Learn
- 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
In Detail
For years, the speed and power of web apps has lagged behind native applications. Progressive Web Apps (PWAs) aim to solve this by bridging the gap between the web apps and native apps, delivering a host of exciting features. Simultaneously, React is fast becoming the go-to solution for building modern web UIs, combining ease of development with performance and capability. Using React alongside PWA technology will make it easy for you to build a fast, beautiful, and functional web app.
After an introduction and brief overview of the goals of PWAs, the book moves on to setting up the application structure. From there, it covers the Webpack build process and the process of creating React components. You'll learn how to set up the backend database and authentication solution to communicate with Firebase and how to work with React Router. Next, you will create and configure your web app manifest, making your PWA installable on mobile devices. Then you'll get introduced to service workers and see how they work as we configure the app to send push notifications using Firebase Cloud Messaging. We'll also explore the App Shell pattern, a key concept in PWAs and look at its advantages regarding efficient performance. Finally, you'll learn how to add offline capabilities to the app with caching and confirm your progress by auditing your PWA with Lighthouse. Also, you'll discover helper libraries and shortcuts that will help you save time and understand the future of PWA development.
Style and approach
This is a step-by-step book, wherein, you will use the React framework to create a complete progressive web app.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 299
Veröffentlichungsjahr: 2017
Ähnliche
BIRMINGHAM - MUMBAI
Progressive Web Apps with React
Copyright © 2017 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author(s), nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: October 2017
Production reference: 1181017
ISBN 978-1-78829-755-4
www.packtpub.com
Credits
Author
Scott Domes
Copy Editor
Shaila Kusanale
Reviewer
Amar Gharat
Project Coordinator
Devanshi Doshi
Commissioning Editor
Kunal Chaudhari
Proofreader
Safis Editing
Acquisition Editor
Shweta Pant
Indexer
Tejal Daruwale Soni
ContentDevelopmentEditor
Onkar Wani
Graphics
Jason Monteiro
Technical Editor
Akhil Nair
Production Coordinator
Melwyn Dsa
About the Author
Scott Domes is a full stack developer who specializes in React, with a passion for building powerful and performant web applications, and for playing with shiny new technologies. Based out of Vancouver, when not coding he's probably out hiking some mountain, or getting lost in a good book. Scott loves to teach and talk about web development, and is always looking to learn new things.
About the Reviewer
Amar Gharat focuses on developing creative and unique web applications using LAMP, open source, and cutting-edge technology as well as delivering work on time to meet the deadlines with dedicated team work.
He has a total work experience of 11 years, and has executed projects from design, development, production, and support. He defines requirements and plans project life cycle deployment.
He also has knowledge of SDLC and process models, and defines resources and schedules for project implementation. He plans and schedules project deliverables, goals, milestones, and tracking them to closure.
Strong leadership and people management are Amar's core skills.
He develops and delivers progress reports, proposals, requirements documentation, and presentations; submits status reports from the project team, analyzes results, and troubleshoots problem areas; manages changes in project scope, identifies potential crises, and devises contingency plans.
He defines project success criteria and disseminates them to involved parties throughout the project life cycle, and helps build, develop, and grow any business relationships vital to the success of the project.
Research, innovate, propose, and discuss product area improvements is what he believes in, and he works on clear requirements with business managers and product managers. He gets projects developed using agile, and is responsible for code reviews, documentation, and maintenance of applications. He's also responsible for core product metrics and end-to-end responsibility for programming of new pages/microsites.
He develops internal web-based interfaces, and provides technical leadership to team members. He's known for delivering time-based task assignments, and is an expert in unit testing.
Amar is also experienced in portal management.
www.PacktPub.com
For support files and downloads related to your book, please visit www.PacktPub.com. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www.packtpub.com/mapt
Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.
Why subscribe?
Fully searchable across every book published by Packt
Copy and paste, print, and bookmark content
On demand and accessible via a web browser
Customer Feedback
Thanks for purchasing this Packt book. At Packt, quality is at the heart of our editorial process. To help us improve, please leave us an honest review on this book's Amazon page at https://www.amazon.com/dp/1788297555. If you'd like to join our team of regular reviewers, you can email us at [email protected]. We award our regular reviewers with free eBooks and videos in exchange for their valuable feedback. Help us be relentless in improving our products!
Table of Contents
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
Creating Our App Structure
Setting the scene
The problem
The other problem
Beginning work
Why Progressive Web Apps?
Why React?
A rose by any other name
User stories
Application challenges
Instant loading
Push notifications
Offline access
Mobile-first design
Progressive enhancement
Let's get going
Our app skeleton
CSS and assets
Meta tags and favicons
What is npm?
Node setup
The dark side of npm
Project initiation
Installing React
Using React
Welcome to ReactDOM
Summary
Getting Started with Webpack
Our project structure
Welcome to Webpack
Bundling files
Moving our React
Shortcuts
Our Dev server
Webpack loaders
Our first ES6
Splitting up our app
Hot reloading
Building for production
Creating a custom script
Making an asset manifest
Summary
Our App's Login Page
What is a React component?
Controversies and Separation of Concerns
Class components versus functional components
Our second component
State in React
Reusing components
Summary
Easy Backend Setup With Firebase
What is Firebase?
Firebase gotchas
Setting up
Hiding our API key
Deploying Firebase
Authentication with Firebase
What is a promise?
Back to authentication
Code cleanup
Signing up
Saving our user
Event listeners
Lifecycle methods
Summary
Routing with React
The plan
Pages on pages
The React Router difference
Our ChatContainer
Installing React Router
Our BrowserRouter
Our first two Routes
Redirecting on login
Logging out
Detour - higher order components
Our third Route
Summary
Completing Our App
User stories progress
ChatContainer skeleton
Managing data flow
Creating a message
Sending a message to Firebase
Our message data
Loading data from Firebase
Displaying our messages
Message display improvements
Multiple users
Batching user messages
Scrolling down
React refs
Loading indicator
The Profile page
Summary
Adding a Service Worker
What is a service worker?
The service worker life cycle
Registering our first service worker
Checking for browser support
Listening for the page load
Registering the service worker
Logging out the result
Experiencing the service worker life cycle
Adding Firebase to our service worker
Naming our service worker
Summary
Using a Service Worker to Send Push Notifications
Requesting permission
Tracking tokens
Attaching a user to the token
Changing the user inside NotificationResource
Creating a new token
Updating an existing token
Sending push notifications
Writing our Cloud function
Sending to the tokens
Testing our push notifications
Debugging push notifications
Checking the Cloud Functions logs
Checking the Service Worker
Checking the tokens
Summary
Making Our App Installable with a Manifest
What is an app manifest?
Browser support
Making our app installable - Android
Manifest properties
Other properties
Linking our manifest
Making our app installable - iOS
App install banners and you
Delaying the app install banner
Listening for the event
Summary
The App Shell
What is progressive enhancement?
The RAIL model
Load
Idle
Animation
Response
Timeline
Measuring using the timeline
The Summary tab
Network requests
Waterfall
Screenshots
PageSpeed Insights
The app shell pattern
Moving shell HTML out of React
Moving CSS out of React
Moving the loading indicator
Summary
Chunking JavaScript to Optimize Performance with Webpack
The PRPL pattern
Push
Render
Pre-cache
Lazy-load
What is code splitting?
Webpack configuration
Babel stage 1
Conditional imports
Higher-order components
AsyncComponent
Route splitting
Lazy loading
Summary
Ready to Cache
What is caching?
The importance of caching
The Cache API
Methods
The asset manifest
Setting up our cache
The install event
Opening up the cache
Fetching the asset manifest
Parsing the JSON
Adding the relevant URLs to the cache
The fetch event
The activate event
Grab the list of cache names
Loop over them
Testing our cache
Summary
Auditing Our App
What is Lighthouse?
The criteria
The Audits tab
Our first audit
Evaluating the readout
Using the Lighthouse CLI
Serving our build folder
Using Lighthouse to assess the served page
Logging the results
Summary
Conclusion and Next Steps
Next steps
Learning resources
Case studies
Building the Google I/O 2016 Progressive Web App
AliExpress case study
eXtra Electronics case study
Jumia case study
Konga case study
SUUMO case study
Example applications
PWA.rocks
React Hacker News
Notes
2048 Puzzle
Articles to read
Native apps are doomed
A BIG list of Progressive Web App tips & tricks
Testing service workers
Twitter Lite and High Performance React Progressive Web Apps at Scale
Why are App Install Banners Still a thing?
A Progressive Web Application with Vue JS
Transforming an existing Angular application into a Progressive Web App
Progressing the Web
Designed Degradations - UX Patterns for Hostile Environments
Instant Loading Web Apps With An Application Shell Architecture
Trick users into thinking your site's faster than it is
Apple’s refusal to support Progressive Web Apps is a detriment to the future of the web
Tools
Workbox
Sw-precache
Sw-toolbox
Offline-plugin
Manifest-json
Serviceworker-rails
Sw-offline-google-analytics
Dynamic Service Workers (DSW)
UpUp
Generator-pwa
Progressive-webapp-config
Stretch goals
Switch to Preact
Show online status
Show when typing
Include file upload
Create chat rooms
Interactive without React
Building your own backend
Closing words
Summary
Preface
Progressive Web Apps with React aims to give you everything you need to know about the future of web development. Progressive Web Apps (PWAs) are becoming more and more common for companies looking to leverage the best the web can offer, powered by cutting-edge technologies that bridge the gap between web apps and native apps.
In this book, we'll leverage the power of the popular JavaScript library React.js to create a fast and functional UI. Then, we'll add Progressive Web App features such as push notifications and instant loading, using revolutionary new web technology. Finally, we'll streamline our app's performance and look at how to best measure its speed.
By the end of this book, you will feel comfortable with both React and PWAs, and be ready for the future of the web.
What this book covers
Chapter 1, Creating Our App Structure, gives a brief overview of what exactly you will be learning to build-- a real-time chat application with push notifications and offline support. You will get to learn about the challenges that such an app presents, and get a brief overview of the technologies that will be discussed in this book. By the end of the chapter, you will set up the application structure of a chat app, with HTML and CSS.
Chapter 2, Getting Started with Webpack, says that before you write any React code, you need to set up the webpack build process. In this chapter, you will be introduced to webpack; you will learn to install the package and set up some basic configuration as well as get the development server running. This chapter will get you ready to jump into React.
Chapter 3, Our App's Login Page, introduces you to React time! In this chapter, you will learn to write the first two components: an App wrapper to contain the application and a LoginContainer. Learn about rendering with ReactDOM and JSX, and write a basic form to allow the users to log in. By the end of this chapter, you will be familiar and comfortable with the React syntax.
Chapter 4, Easy Backend Setup With Firebase, informs that the login form looks great, but is lacking actual functionality. To move forward, you will need a backend database and authentication solution to communicate with it. This chapter will introduce you to Firebase by Google. Set up the application on the Firebase console, and then program the login and signup functionality for the form.
Chapter 5, Routing with React, lets you know that once the user logs in, you want to redirect them to the main chat view. Therefore, in this chapter, you will learn to build that main view and then set up the React Router that allows the users to move between the pages. Lastly, learn to add a third view the individual user view--and explore parameter matching in URLs.
Chapter 6, Completing Our App, takes you through the last step in building the basic application, adding functionality to the chat and user views. You will learn to write and read data from Firebase, taking advantage of React life cycle methods to do so. Once that’s done, your web application will be complete, but it’s not quite progressive yet!
Chapter 7, Adding a Service Worker, covers service workers and how they work. Here, you'll understand how to register a custom service worker and learn about its life cycle, and then hook into the default Firebase messaging service worker.
Chapter 8, Using a Service Worker to Send Push Notifications, teaches you to configure the app now that our service worker is ready, to be able to send the push notifications. You will use Firebase Cloud Messaging to manage sending these notifications, and add customization to control how and when they are sent on desktop and mobile.
Chapter 9, Making Our App Installable with a Manifest, teaches that a manifest is a JSON file that allows users to save your app to their home screen. You will learn to create the manifest and understand the best practices as well as iOS-specific considerations. You will also learn to customize your splash screen and icons.
Chapter 10, The App Shell, puts across the point of the App Shell pattern being a key concept in PWAs, but what advantages does it bring? You will be introduced to both the shell and the RAIL system of progressive enhancement, and then move some of you app's layout out of React for optimal rendering.
Chapter 11, Chunking JavaScript to Optimize Performance with Webpack, explores the PRPL pattern, its goals and methods, as well as an overview of how to achieve it in your app. Then, you will dive in, splitting up the JavaScript into chunks based on routes, and then lazy loading the secondary routes.
Chapter 12, Ready to Cache, walks through how you can leverage the service worker to achieve offline capability, by understanding the new Cache API, and how to use it with your service worker to cache the JavaScript chunks.
Chapter 13, Auditing Our App, says it's now time to check our work! In this chapter, you will be introduced to Lighthouse and understand how to audit PWAs with Lighthouse.
Chapter 14, Conclusion and Next Steps, Your first PWA is complete! In the development process, you built most of the PWA infrastructure manually. In this chapter, you will get to learn about the helper libraries and shortcuts to save time, and you'll also explore the future of PWA development. Additionally, you will come across suggestions about the future project ideas and improvements that can be made to your chat app, as an extra challenge.
What you need for this book
All you require is a computer that can run Node.js (https://nodejs.org/en/download/), a text editor for writing code, and the latest version of the Chrome browser. If you want to test your application on mobile, you'll also need an Android or iOS phone.
Who this book is for
This book is for JavaScript developers who want to develop high-performance Web User interfaces. This book requires basic knowledge of HTML, CSS and JavaScript.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. To send us general feedback, simply email [email protected], and mention the book's title in the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files emailed directly to you. You can download the code files by following these steps:
Log in or register to our website using your email address and password.
Hover the mouse pointer on the
SUPPORT
tab at the top.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box.
Select the book for which you're looking to download the code files.
Choose from the drop-down menu where you purchased this book from.
Click on
Code Download
.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR / 7-Zip for Windows
Zipeg / iZip / UnRarX for Mac
7-Zip / PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Progressive-Web-Apps-with-React. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title. To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the internet, please provide us with the location address or website name immediately so that we can pursue a remedy. Please contact us at [email protected] with a link to the suspected pirated material. We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.
Creating Our App Structure
Welcome to Progressive Web Apps with React!
This book will take you through the entire process of building a React application that also functions as a Progressive Web App. We'll cover not only the "how" of constructing such an application, but also highlight best practices and how to measure your application to ensure successful implementation of PWA features.
Progressive Web Apps are poised to become the future of web applications. They promise a bevy of additional functionality, such as push notifications and the ability to be installed, which pushes them into the realm of native iOS or Android apps. Additionally, a strong focus on performance (taking advantage of cutting-edge web technology) means that PWAs create apps that are fast for everyone.
We'll cover each facet of PWAs in depth, as well as the process of converting a regular web application into a progressive one. We'll also dive deep into React best practices, using libraries such as React Router.
To check your code for this and future chapters, you can view the completed project athttps://github.com/scottdomes/chatastrophe/. The repository includes branches for each chapter. Visithttps://github.com/scottdomes/chatastrophe/tree/chapter1for this chapter's final code.
In this chapter, we will get started with the basic structure of our application. Here's what we'll cover:
The use cases of Progressive Web Apps
The basic user stories we want our app to fulfill
The project structure and basic HTML
Installing dependencies
Getting started with React
First, let's set the scene for our application's journey.
Setting the scene
One of your friends calls you on the phone, bursting with excitement about his latest start-up idea (you know the one). You patiently listen to his description, but respectfully decline to be a part of it. He's disappointed, but understands and promises to keep you updated on the project details. You murmur your assent.
A few months later, he meets you at your work and announces that he has found a group of serious investors, and he needs you to help him build the software he promised them. You again decline, but when discussing compensation, he mentions a number that you can't refuse. A week later, you're on a plane to San Francisco.
In front of the investors (who are, to your surprise, a rapt audience), your friend guides you through the basics of the application. In between the buzzwords ("mass interconnection" and "global community"), you gather just enough to summarize the application in a sentence.
"So, it's a chat room… for everyone in the world… all at once…"
Your friend smiles. "Yes."
You're bewildered by the image of a million strangers all talking at once on the same application, in the same room, but the investors break into applause. As you head for the door, your friend again announces how they'd like to compensate you… citing an even higher number than before. You sit down.
The problem
"The problem," your friend explains, "is that this chat room has to be for everyone."
"Global community," you say with a knowing nod.
"Exactly. Everyone. Even if they have terrible internet in some hut in the desert. They should be included."
"Mass interconnection," you add.
"Exactly! So it needs to be fast. And lightweight. And beautiful. And dynamic."
"So everyone will be talking at once? Won’t that be-"
"A worldwide collective, yes."
The other problem
"The other problem," your friend declares, "is that our users will mostly be on their phones. On the go."
"So you want to do an iOS and Android app?"
Your friend waves his hand. "No, no. No one downloads apps anymore. Especially in developing countries; that takes too much bandwidth. Remember, worldwide collective."
"So a web app."
"Yes. A web collective."
Despite your best instincts, the project intrigues you. How do you craft a web application to be as fast as possible? How do you make it work under all network conditions? How do you make a chat application with all the conveniences of a native app, but for the web?
You sigh and shake his hand. "Let's get to work."
Beginning work
Welcome to the world of Progressive Web Applications.
In the preceding scenario, the problems your friend was describing are exactly the problems PWAs (Progressive Web Applications) are crafted to solve.
The first problem is that many users will be visiting your web page under poor network conditions. They may be a Silicon Valley technocrat on their iPhone in a coffee shop with bad WiFi, or they may be a Bangladeshi villager in a remote location. Either way, they will not stick around if your site isn't optimized for them, for everyone.
How fast your application loads--its performance--thus becomes an accessibility concern. PWAs solve this by loading quickly the first time, and even more quickly every time after that. We'll talk more about how they do so as the book progresses.
Second, the installation process for mobile apps is an obstacle for users. It means that your users need to be extra committed to engaging with your application--enough to give up storage space and time, and expose themselves to the possibility of malicious and intrusive code, and that's before they even get the chance to try the app!
What if we can provide the native app experience without the initial investment? PWAs are an attempt to bridge that gap. Again, we'll talk in subsequent chapters about how they do so, and how successful they actually are. However, these are both worthy challenges, and solving both will be a huge user experience win for our application.
Why Progressive Web Apps?
Many static web pages do a fantastic job of performance. However, when all you need to do is render some HTML, CSS, and a smattering of JavaScript, it's less of a struggle to work well under all network conditions.
When we start talking about web applications--large, complex, JavaScript-based workhorses--performance becomes a significant challenge. Our frontend will have a lot of code. Our user needs to download all that code if they want to use our app to its fullest potential. How do we ensure that they're not staring at a blank loading screen for ten seconds, as 500 KB of JavaScript initializes?
Therefore, most of our performance enhancements will center around managing the JavaScript problem. This is especially true with React.
Why React?
React is quickly becoming the go-to solution for frontend web applications. Why? This is because it's fast, elegant, and makes managing large applications easy.
In other words, it makes complexity simple. There's no reason a PWA has to use React, though. PWAs can be any web app or site.
React does have one major benefit--its component pattern, where UIs are split into distinct pieces. As we'll see, the component pattern lets us break our interface into small chunks of code to alleviate the preceding JavaScript downloading issue. However, other than that, any frontend framework will work just as well for a PWA.
The advantage of React is that it is a beautiful and fun way to build frontend applications. It's also an in-demand skill. If you pair knowledge of React with experience with PWAs, you'll be about as future-ready as one can be in the fast-moving web development world.
A rose by any other name
You tell your friend about your learnings on PWAs and React, but before you finish, he waves his hand and interrupts.
"Yeah, yeah. Hey, what do you think the name should be?"
Once again, you're struck with the unnerving feeling that all of this was a mistake, that you never should have jumped on board this questionable venture, this potential catastrophe.
"Chatastrophe," you blurt out.
Your friend smiles and claps you on the back. "Brilliant. Okay, get Reacting or whatever!"
User stories
Before we begin building our app, let's take a deeper look at what exactly we want to achieve.
We can start with user stories. A user story is a description of a specific feature of an application, framed from the perspective of one of our users.
Here's the framework, as suggested by Jon Dobrowolski:
Not all features require the whole framework, though. Let's start with some basic examples:
Users should be able to log in and out of the application
Pretty straightforward. I don't think we need to add the justification for this, as it is a fairly basic feature.
Let's move on to something more advanced:
Users should be able to view their messages even when offline
As a user, I want to be able to check my messages without needing an internet connection, because I may need to read them on the go
Given that I start the application without internet access, I should be able to view all past messages
Let's cover some of the more basic functionality of the app. Users should be able to send and receive messages in real-time.
Real-time functionality will be key to our application. There's no point in having chat unless it's fast and fluid:
Users should be able to view all messages by a given author
As a user, I want to be able to view a list of all messages sent by a given user, because I may need to view their contribution to the conversation without the noise of others' messages
Given that I click on a user's email, I should be taken to a profile view with all their messages
The profile view is a special feature you suggested to the client to manage the inevitable chaos of the main chat room.
Let's add a couple more PWA-specific user stories:
Users should receive push notifications when a message is sent by another user
As a user, I want to be constantly updated on the progress of the conversation, because I don't want to miss anything important
Given that the chat is not open or visible on my screen, I should receive notifications for each message sent by another user
And installing:
Users should be able to install the app on their mobile device
As a user, I want to be able to open the application without navigating to the URL in my browser, because I want easy access to the chat room
Given that I have signed up to the chat for the first time, I should be prompted to install the app on my device
Don't worry about how we will achieve these goals; we'll cover that in due time. For now, let's just continue documenting what we want to do.
Our client was big on performance, so let's specify some performance-specific goals:
Users should be able to load the app in under 5 seconds, even under shaky network conditions
As a user, I want to be able to interact with the app as quickly as possible, because I don't want to be stuck waiting for it to load
Given that I have opened the application using a poor internet connection, I should still have it load in under 5 seconds
Load in under 5 seconds is still a bit vague in terms of what that means for our application. We'll revisit this story in more depth in the chapters on performance.
The previously mentioned user stories cover the basic functionality of our app. Let's talk about the specific challenges these points present.
Application challenges
With each of the following, I encourage you to think about how you will solve these problems within the context of a web application. Hopefully, this will give you a better insight into what we try to achieve with PWAs, and the difficulties we face.
Instant loading
With Progressive Web Apps, we aim to provide an experience that is closer to a native app (one downloaded from the Apple App Store, Google Play Store, or another app store) than your typical web application. One of the advantages native apps have, of course, is that all relevant files are predownloaded and installed, while each time a user visits a web application, they may have to download all the assets again.
