Simplify Implementation without sacrificing data integrity
Progressive Web Apps (PWAs) are Web Apps that combine the best features of Web and Native Apps. In short, it can be described as “The best of the web, plus the best of native apps”. The biggest advantage is the cost-savings in terms of app development and maintenance, because, in general, creating a website is easier than building native apps for multiple platforms like Android, iOS and the web. Why make the same application for three platforms when you can make one for all of them?
With native apps the hardest problem is distribution. Mobile apps can take up a lot of storage space on your phone. A Progressive Web App takes up far less space, on average, and can save you a significant amount of storage and bandwidth (from downloading apps).
In this blog, we are going to look at how we can implement Progressive Web App behavior into existing or new ASP.NET Core 7 applications. If you are new to Progressive Web Apps (PWAs) please take some time to familiarize yourself with the concepts of PWA and the different development methodologies.
Progressive Web Apps are user experiences that have the reach of the web, and are:
Reliable – Load instantly and never show the chrome dinosaur, even in uncertain network conditions.
Fast – Respond quickly to user interactions with smooth animations and page scrolling.
Engaging – Feels like a natural app on the device, with an immersive user experience. This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.
This section talks about how to add PWA behavior to ASP.NET Core 7 app and how to extend it with a simple example.
This example assumes your site is served over HTTPS (required for service workers) and pages are responsive on tablets & mobile devices as these are considered the basic items in the baseline Progressive Web App checklist.
How to implement PWA Behaviour to ASP.NET Core 7 Solution
To transform your website into a Progressive Web App (PWA), start by incorporating a Service Worker and generating a Manifest for your site. The Manifest, presented as a JSON file, provides essential information about your site, enabling users to conveniently add it to their home screen on either a mobile device or desktop. The Service Worker simplifies caching and establishes guidelines for handling situations where content is unavailable.
A crucial prerequisite before commencing is ensuring that the Service Worker functions exclusively when your site is SSL-encrypted and redirects to HTTPS. The package provides several services that can be incorporated into the container using the ConfigureServices method in your Startup class.
The AddProgressiveWebApp method incorporates both a Service Worker and references to your Manifest. However, these can be added separately using the AddServiceWorker and AddWebManifest methods. Adjustments to PWA settings can be made in the appsettings.json file, as demonstrated below.
The cacheId establishes a distinctive identifier for the present version of your site, serving as a reference in your Service Worker to verify whether the user is currently using the latest version of the page.
The strategy option enables you to choose a predefined profile for your Service Worker. The default strategy, cacheFirstSafe, caches all resources. It guarantees that every resource with the Doctype text/html is initially accessed through the network to obtain the latest version. If the latest version is unavailable, it falls back to the cached version.
Furthermore, it caches resources utilizing the “v” querystring, assuming it represents unique content. The cacheFirst strategy is identical to the safe one but skips the network-first approach for text/html resources and excludes caching of resources with the “v” querystring. Therefore, it is recommended for sites where frequent changes are not anticipated.
For the networkFirst strategy, all resources are initially fetched from the network, and the retrieved resource is subsequently added to the cache. If the resource retrieval from the network fails, the strategy falls back to the cached version. On the other hand, the minimal strategy refrains from caching entirely and is primarily employed to trigger PWA installation prompts on phones using the Manifest.
The routesToPreCache parameter specifies the resources are marked for pre-caching, signifying that they will be included in the cache immediately after the Service Worker registration. This feature is particularly beneficial for caching all the subpages on your site, allowing users to access them when offline if revisited later.
The offlineRoute designates a route, to be cached, for situations where the user attempts to access a page that was not cached before going offline. While adding the page to routesToPreCache or uniquely identifying resources with the “v” querystring can often prevent this scenario, offlineRoute serves as a preferable option compared to encountering the “There is no connection” page in Chrome.
The functions registerServiceWorker and registerWebmanifest are used to deactivate specific features within the service, with the default setting being standard for both.
Alternatively, adjustments to the settings can be made in the Startup class by providing an object of PwaOptions to AddProgressiveWebApp. A notable advantage of this approach is the ability to programmatically modify settings, as illustrated in the following example where the cacheId is set using a version variable that could be sourced from a database or a similar context.
You can currently verify the registration of your service by opening the Chrome DevTools and navigating to Application > Service Worker.
Next, you simply need to incorporate a manifest for your site, typically referenced as a link in the header of your pages. However, this is also taken care of by WebEssentials.AspNetCore.PWA. The Manifest outlines specific details for your site when downloaded, including custom splash screens, icon standards, and more. Additionally, it prompts users to install it as a PWA through an install banner if they frequently visit the site on a phone. This feature is fundamental to a PWA (Progressive Web App) as it provides the immersive app experience. To implement this, create a new JSON file named manifest.json and place it in the wwwroot directory. The file should adhere to the following pattern:
- The “name” refers to the complete name of your site, while “short_name” is what will be displayed when a user adds your site to their homepage on a smartphone or desktop.
- The “orientation” specifies whether your website should be viewed in portrait or landscape mode, or use the keyword “any” if it’s up to the user, once it has been installed. The “display” setting determines how your site will appear after download.
- The default is “browser,” which opens your site in the standard browser. Alternatives include “standalone,” “minimal-ui,” or “full screen,” all of which generate a splash screen for your site while it loads.
- The splash screen displays the icon for the page and its name. The “icons” section provides icons in various sizes through a list representation.A basic requirement is to include both 192×192 and 512×512 icons, although additional sizes can also be included.
- The “start_url” specifies the page the site will open on. The “color” parameter determines the text color on the splash screen, while the “background_color” parameter sets the background color on the splash screen.
The “theme_color” establishes the site-wide theme color for your page, currently recognized as a property in Google Chrome. It is essential to include this property individually on each page with a meta tag for your manifest to be valid. However, our PWA package automatically injects this property into our pages, eliminating the need for manual intervention.
Several other properties can be incorporated into the Manifest, but the ones mentioned are fundamental. Additional details can be explored on Google’s post, “The Web App Manifest.” With the correct syntax, the Manifest is now prepared, and users will be prompted to add your page to their home screen.
These initial steps lay the foundation for transforming your site into a PWA. Additional specifications to adhere to, include ensuring fast response times, especially on slow 3G networks, and adopting a mobile-friendly design. An effective tool for testing your site is the Chrome tool Lighthouse, which assesses your site’s PWA implementation, performance, speed, content accessibility, and adherence to best practices for a modern web page. This tool simplifies the process of gauging your progress and provides guidance on the next steps for improvement.
SphereGen is a unique solutions provider that specializes in cloud-based applications, Intelligent Automation, and Extended Reality (AR/VR/MR). We offer full-stack custom application development to help customers employ innovative technology to solve business problems.
Learn more about what we do in Web and Mobile Apps: https://www.spheregen.com/web-and-mobile-apps/