Congratulations! You have completed Angular PWA education, which enables you to build a Progressive Web App with Angular and have a good understanding of how PWA works. But, wait! This is just the beginning! From now on, you have to keep learning and trying to do things better and better. You don’t have to stop at this point but should continue your path, which you have come with me until this point in the book. There are a lot more things to learn. Some of the concepts that we have explored together in this book were just the surface for an ocean of knowledge and information. You should continue diving deeper and deeper.
As a developer, we all know that what we write today might be obsolete in the next five years. You have probably also noticed that I mentioned a few times in different chapters that many of these APIs are still evolving and changing over time, which means we need to embrace these changes and keep ourselves updated.
In this chapter, I will write a few pages about learning resources, case studies, and PWA examples in the real world as well as introducing a few new technologies and tools that you should keep an eye on.
Learning Resources
- 1.
https://developers.google.com/web/progressive-web-apps/
I believe you have seen this website before. Google Developer has a dedicated section for PWA under Web. Just check it out!
- 2.
In Chrome Dev Summit 2018, Googlers announced a new website dedicated to web and, in particular, PWA. This website not only helps you to learn more but also provides tools to measure and audit your web application.
- 3.
This website is powered by Mozilla and provides a collection of working, practical examples of using Service Worker in modern websites.
- 4.
Ensure you are getting the latest update from the Angular blog. Also, it’s good have an eye on Angular documents, especially the PWA guide.
- 5.
https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive
Mozilla MDN website is familiar to all developers. Keep your eye on PWA sections.
Case Studies
- 1.
https://developers.google.com/web/showcase/2018/nikkei
Nikkei achieves a new level of quality and performance with their multipage PWA.
- 2.
https://developers.google.com/web/showcase/2018/asda-george
George.com enhances the mobile customer experience with a new PWA.
- 3.
https://developers.google.com/web/showcase/2017/eleme
Ele.me improves performance load times with a multipage PWA.
- 4.
https://developers.google.com/web/showcase/2017/bookmyshow
BookMyShow’s new PWA drives an 80 percent increase in conversions.
- 5.
https://developers.google.com/web/showcase/2016/aliexpress
AliExpress increases the conversion rate for new users by 104 percent with a new PWA.
You can find a lot more on the Google website if you just simply search PWA case studies or check out www.pwastats.com to see more use cases in the context of business advantages.
Example Applications
If you are interested to see who is using PWA in production now, you can find a list of PWA websites on this website: https://outweb.io/ or https://pwa.rocks/ .
I encourage you to check out Hacker news as PWAs: https://hnpwa.com/ website where you will find a lot of different implementations of PWAs with different technologies and tools. It’s a good resource to learn and study more, especially about techniques that are being used to boost initial load and application performance.
Tools and Technologies
- 1.
Desktop Progressive Web App
As we already talked about, one of the main advantages of PWA is that we create only for browsers and we can ship it to different platforms. Mobile users are the most important target for our Angular PWA; that’s why we have focused on mobile refinement and mentioned that many times. However, we don’t have to forget that our desktop users will benefit from our optimization, too. In fact, Desktop PWAs are supported on many platforms already such as Chrome 67+ on Chrome OS, Linux, Windows, and Mac. Even better, we are able to submit our PWA app to the Microsoft Store; and once published, our customers can install to Windows 10 as an app. That’s huge. Imagine your PWA will be discovered by millions of active Windows users.
So, when you build your PWA with Angular, you should think of a wide variety of customers from mobile to desktop. I think we may see Google Play or Apple Store! Also we might be able to submit our PWA to their store in the future – who knows! Just even thinking of that makes me so excited.
In order to learn more about the Windows store and PWA, follow this link: https://developer.microsoft.com/en-us/windows/pwa . Also, Google has a dedicated page regarding this topic, which is accessible here: https://developers.google.com/web/progressive-web-apps/desktop .
- 2.
Trusted Web Activities
Trusted Web Activities are a new way to integrate your web-app content such as your PWA with your Android app using a protocol based on Custom Tabs. Read more about it on https://developers.google.com/web/updates/2019/02/using-twa.
- 3.
Web Share APIs
This is one of my favorite API that I hope will see better support soon, especially on iOS. This method provides a simple high-level JavaScript API that invokes the native sharing capabilities of the host platform. The API is Promised-based and has only a single method. It accepts configuration objects that at least need to have text or url properties.
Here is an example:// a method which gets invoke by user mouse click or tab (touch)async openShare(){if (navigator.share) {try {const result = await navigator.share({title: 'Apress NG-PWANote',text: 'Check out Apress Angular PWA Note!',url: 'https://awesome-apress-pwa.firebaseapp.com',})console.log('Successful share')} catch(error) {console.log('Error sharing', error)}}}Chrome for Android supports this API. There is no more support as of writing this book, but I hope that by the time you read this book, this API is supported widely across different platforms and browsers.
- 4.
Offline Webpack Plugin
You may, for some reasons, use webpack or are using webpack for your Angular application. If so, there is plugin in the webpack ecosystem that brings offline capabilities.
Find it here https://github.com/NekR/offline-plugin
- 5.
This website is founded by Microsoft and helps you to take data from your website and use that to generate a cross-platform PWA.
If you like automation and have no configuration for your website, you may find this website useful!
- 6.
Another great website from Microsoft developers.
Webhint is a linting tool that will help you with your site's accessibility, speed, security, and more by checking your code for best practices and common errors. Use the online scanner or the CLI to start checking your site for errors.
- 7.
Background Fetch
This is a web standard API that handles large uploads/downloads in the background with user visibility. The problem is when you fetch something, Service Worker must be alive and the process should be short; otherwise, the browser will kill Service Worker due to a risk for a user’s privacy and battery.
This is extremely useful for tasks that may take a long time to be finished, like downloading a movie or podcasts. At the time of writing this chapter, this API was introduced as an experimental web platform feature flag to Chrome 71.
Keep your eye on this API and find more information on it here:
https://developers.google.com/web/updates/2018/12/background-fetch
- 8.
Web Performance
We build PWA because we want users to have native-like experiences that are fast, reliable, and engaging. Thus, web performance is always a topic that we never have to stop learning about it. The more you learn, the faster the app you build. A lot of resources, including those that I have mentioned earlier in this chapter, provide performance-related topics, too; however, in addition, you can find the following link helpful:
https://developers.google.com/web/fundamentals/performance/why-performance-matters/
- 9.
Web Components
Web Components is a suite of different technologies allowing you to create reusable custom elements while their functionality is encapsulated away from the rest of your code and lets you utilize them in your web apps.
This is a great technology that Angular supports by Angular Element. You can find more about it here: https://angular.io/guide/elements . After Angular Ivy1 (pretty soon), Angular Element will be even better. Don’t forget to keep your eye on it.
- 10.
Web Assembly
Web assembly (abbreviated WASM) is designed to help with the compilation of high-level languages like C/C++/ Rust along with JavaScript, which means with Web Assembly JavaScript APIs, you can load WASM modules into a JavaScript app and share the functionality between the two. This is amazing technology that has, of now, been shipped to all major browsers.
The developer documentation is available here o nth Mozilla MDN web docs website:
Last Words
Web is evolving rapidly. PWA, in particular, is growing quickly. We hear about new technologies literally every day. Even during the time that I was writing this book, there was a lot of new news regarding PWA and Angular, and I probably should have revised what I have written. I personally love it. I love to see new APIs that make me excited and thrilled as a web developer. What I want to point out is that, even though the it takes great speed to catch up sometimes, the concepts and principles of Progressive Web Apps with or without Angular that have been taught to you throughout the book will remain the same. An Angular PWA must be fast to load, reliable to work with, and engaging as native apps were in the past and now. It must run on all browsers and platforms and must be developed and deployed progressively.
Thank you for reading! We had a long journey together. I hope you enjoy building amazing Progressive Web Apps with Angular (or maybe without!) as much as I enjoyed writing this book.
All the best.