We may earn an affiliate commission when you visit our partners.
Pluralsight logo

Building Progressive Web Apps with the App Shell Model

Nik Molnar

Current browser features make it easy to achieve eight of the nine attributes that make a web page a progressive web app. In this course, you will learn how to achieve that elusive ninth attribute by learning how to leverage the app shell model.

Read more

Current browser features make it easy to achieve eight of the nine attributes that make a web page a progressive web app. In this course, you will learn how to achieve that elusive ninth attribute by learning how to leverage the app shell model.

At the core of building app-like Progressive Web Apps is a thorough knowledge of the app shell model. In this course, Building Progressive Web Apps with the App Shell Model, you will learn how to leverage the app shell model in your own web apps. First, you will discover what the app shell model is and why it’s desirable. Next, you will explore building app shells with server-side rendered HTML. Finally, you will learn how to build app shells with client-side rendered HTML. When you are finished with this course, you will have a foundational knowledge of how to leverage the app shell model that will help you as you move forward to building app-like experiences.

Enroll now

What's inside

Syllabus

Course Overview
Introducing the App Shell
Server-side Rendered App Shells
Client-side Rendered App Shells
Read more

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Teaches skills, knowledge, and tools that are highly relevant to industry
Develops professional skills or deep expertise in a particular topic or set of topics
Covers unique perspectives or ideas that may add color to other topics and subjects
Taught by instructors who are recognized for their work in the topic that the course teaches
If this course explicitly advises students to take other courses first as prerequisites

Save this course

Save Building Progressive Web Apps with the App Shell Model to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Building Progressive Web Apps with the App Shell Model with these activities:
Review HTTP Basics
Review the basics of HTTP to better understand the app shell model.
Browse courses on HTTP
Show steps
  • Review the basic concepts of HTTP, such as request and response messages, methods, and status codes.
  • Read articles or tutorials on HTTP to refresh your knowledge.
Participate in an App Shell Discussion Forum
Engage in discussions with peers on forums or online communities to exchange knowledge and insights about the app shell model.
Show steps
  • Join an online forum or community focused on web development.
  • Participate in discussions related to app shells.
  • Share your knowledge and experiences, and learn from others.
Practice Building Simple App Shells
Practice building simple app shells to gain a better understanding of their structure and implementation.
Show steps
  • Create a basic HTML page with a header, footer, and main content area.
  • Add a service worker to the project to enable offline caching.
  • Test the app shell in different browsers and devices.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Follow Tutorials on App Shell Optimization
Follow online tutorials or documentation on app shell optimization to learn best practices and techniques.
Browse courses on Performance Optimization
Show steps
  • Find reputable tutorials or articles on optimizing app shell performance.
  • Follow the steps and instructions provided in the tutorials.
  • Experiment with different optimization techniques and compare the results.
Write a Blog Post on App Shell Benefits
Create a blog post or article on the benefits of using the app shell model to enhance your web applications.
Browse courses on Progressive web apps
Show steps
  • Research the benefits and use cases of app shells.
  • Outline the key points you want to cover in your blog post.
  • Write the content, ensuring it is well-structured, informative, and engaging.
  • Proofread and edit your blog post before publishing it.
Contribute to an App Shell Open-Source Project
Contribute to an open-source project related to app shells to gain practical experience and enhance your understanding.
Browse courses on Open Source
Show steps
  • Find reputable open-source projects focused on app shell development.
  • Review the project's documentation and codebase.
  • Identify areas where you can contribute, such as bug fixes or feature enhancements.
  • Submit a pull request with your contributions.
Participate in an App Shell Hackathon
Join a hackathon centered around app shell development to test your skills and collaborate with others.
Show steps
  • Find and register for a hackathon focused on app shell development.
  • Form a team or work individually on an app shell project.
  • Develop and implement your app shell solution within the hackathon's timeframe.
  • Present your project and compete for prizes or recognition.

Career center

Learners who complete Building Progressive Web Apps with the App Shell Model will develop knowledge and skills that may be useful to these careers:
Web Designer
Web Designers work alongside other web professionals to create an end product that meets the needs of their client. They ensure that web pages are aesthetically pleasing and accessible and may also be responsible for creating user interfaces for web pages or mobile applications. By taking this course, Web Designers can learn more about the app shell model and how it can be used to further their web design skills.
Software Engineer
Software Engineers leverage mathematics, engineering, and computer science to design, develop, test, and implement software. They may work for a wide range of employers in a variety of industries and specializations. This course is recommended for Software Engineers as it helps to strengthen their fundamentals with the app shell model.
Web Developer
Web Developers are responsible for both the front-end and back-end of the websites that they work on. They work with other developers to make sure that all the functions of a website work correctly and that the website runs smoothly for the end-user. Web Developers should take this course in order to further their knowledge and skills with app shell models.
Front-End Developer
Front-end developers primarily focus on the appearance and layout of a website or an app. They work to ensure that what users see is pleasing to the eye and easy to use. In working with the app shell model, Front-end Developers that take this course will be able to leverage the knowledge gained from this course in crafting stunning web pages that create beautiful user experiences.
User Experience (UX) Designer
User Experience (UX) Designers typically study the user's journey through various digital products, ensuring a frictionless, simple, and enjoyable experience. These professionals may conduct usability testing and research, create user personas, and develop sitemaps to help end-users engage with web-based applications and other digital products. If you are interested in becoming a User Experience (UX) Designer, then taking this course will help you by teaching you more about how the app shell model can be used to create more user-friendly websites and web applications.
Interaction Designer
Interaction Designers focus on the actual interactions that users have with digital products, such as the touchscreen interface of a mobile application, tablet, or other handheld device. They consider how users will navigate through a product, prioritizing design elements such as button placement and screen layout to provide a seamless user experience. An Interaction Designer that takes this course can learn more about the app shell model and how to use this model to design interactive web pages and web applications.
Software Architect
Software Architects are responsible for designing a software application's overall architecture. This includes deciding which technologies and frameworks to use, as well as how different components of the application will interact with each other. Those interested in working as a Software Architect may want to take this course in order to gain a deeper understanding of the app shell model, which can be useful for creating more efficient and scalable software designs.
Product Manager
Product Managers work on a company's digital products and may collaborate with other professionals, such as UX designers, software engineers, and marketing managers, to help bring visions for web-based products to life. Understanding how the app shell model can be used to create Progressive Web Apps is important knowledge for a Product Manager to have, and taking this course can help one to gain that knowledge.
UI Developer
UI Developers focus on the user interface (UI) of digital products, working to implement interactive elements, styles, and other features that end-users will see and interact with. Web applications, mobile applications, and software all need to have functional and efficient UI elements, and this course will teach UI Developers more about how the app shell model can be used to design these interfaces.
Web Analytics Specialist
Web Analytics Specialists can help improve digital products by measuring, collecting, analyzing, and reporting on web data to gain insights into how users engage with a website or app. Understanding how the app shell model can be used to create web applications is a valuable skillset for Web Analytics Specialists to have, as it can help improve the user experience and maximize user engagement.
Software Development Manager
Software Development Managers plan, oversee, and manage the software development process, working alongside other managers, developers, and engineers to ensure a successful final product. Those interested in this career path may want to take this course in order to learn more about the app shell model.
Quality Assurance (QA) Tester
Quality Assurance (QA) Testers perform tests throughout the software development process to ensure that software meets quality standards and customer expectations. This may involve testing web applications to ensure the site is user-friendly, bug-free, and accessible. Those interested in becoming a QA Tester can benefit from taking this course to learn more about the app shell model.
Data Scientist
Data Scientists use data to solve business problems and develop effective strategies for a variety of industries and sectors. They use data to identify patterns and trends, which can be leveraged to make better decisions and improve outcomes. If you are interested in working as a Data Scientist, then taking this course will help you build a foundation in using the app shell model, which can contribute to your overall skillset.
Information Technology (IT) Manager
Information Technology (IT) Managers plan, organize, and direct the implementation of IT systems for an organization. They work to ensure that the organization's IT systems are aligned with business goals and objectives. Those interested in working at an IT Manager level may wish to take this course in order to strengthen their understanding of the app shell model.
Project Manager
Project Managers oversee and manage software development projects, coordinating resources and completing tasks to ensure successful completion of each project. Project Managers with an understanding of the app shell model may have an advantage in the workplace, and this course can help to provide that knowledge.

Reading list

We've selected 14 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Building Progressive Web Apps with the App Shell Model.
Provides a comprehensive guide to designing and developing JavaScript applications. It covers the app shell model and other advanced topics, and good choice for anyone who wants to learn more about this topic.
Provides a comprehensive guide to site reliability engineering. This knowledge is essential for building high-quality progressive web apps.
Provides a comprehensive guide to design patterns. This knowledge is essential for building high-quality progressive web apps.
Provides a comprehensive guide to DevOps. This knowledge is essential for building high-quality progressive web apps.
Provides a comprehensive overview of the IT operations and software development process. It good choice for anyone who wants to learn more about this topic.
Provides a comprehensive guide to writing clean and maintainable code. This knowledge is essential for building high-quality progressive web apps.
Provides a comprehensive guide to agile development. This knowledge is essential for building high-quality progressive web apps.
While this book does not specifically cover the app shell model, it provides useful background knowledge for this course. It gives an overview of advanced techniques for optimizing HTTP/2 and HTTP/3 networks. is more valuable as additional reading than it is as a current reference.
Provides a comprehensive overview of performance optimization for web applications. While it does not cover app shells specifically, it provides useful background knowledge for building performant web apps with complex user interfaces.
Comprehensive guide to building PWAs with React, a popular JavaScript library for building web applications.
Beginner-friendly guide to JavaScript, the programming language used to build PWAs.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Building Progressive Web Apps with the App Shell Model.
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser