PWA Technology

What is Progressive Web Apps

A progressive web app (PWA) is a website that looks and behaves as if it is a mobile app. PWAs are built to take advantage of native mobile device features, without requiring the end user to visit an app store, make a purchase and download software locally. Instead, a PWA can be located with a search engine query and accessed immediately through a browser.

PWAs combine the best of the website with the best of what native apps have to offer, creating a phenomenal mobile user experience. They are special web applications that are accessed like normal websites but offer benefits like offline usability, push notifications, and access to device hardware – things that were previously only available to native apps.​​​

Simply put, a PWA is a website with all the benefits of an app. PWAs give you a faster, more reliable, and more engaging version of your website or eCommerce store.

PWAs can do most things that native apps can do, such as operate offline, access your camera and microphone if necessary, GPS, and more.

app-img

INSTANT LOADING TIME

If your website takes more than 3 seconds to load, 53% of visitors will bounce. Furthermore, a local App serves to remove any clunkiness and lag while browsing, which is an important customer satisfaction factor.

PWAs use an alternative method called Client-Side Rendering or CSR. With this approach, content is rendered in the client’s browser, using JavaScript.

Instead of sending an entire HTML document from the server every time, the user is only receiving a tiny string of data with JavaScript file that will request and render the necessary parts of the page in the client’s browser, resulting in a significant website page load speed increase.

    OFFLINE BROWSING

    “Offline mode” is not a fully native offline experience. Standard browser caching management can be overridden with custom rules, and cache storage is independent of the remote server.

    If connection drops, browsing still remains possible: imagine browsing your favorite store while commuting on the London Underground or a rural area with spotty coverage.

    When you hit the Back button, rather than seeing a 404 error, a cached page with the previously retrieved data is delivered and displayed.

      app-img
      Messages

      Web Push Notifications


      Your PWA can receive push notifications. This feature is supported by the majority of recent web browsers. For Chrome, Firefox, and Opera, push notifications are delivered by Firebase, which is Google's platform. For Safari, notifications are delivered by APNs, Apple's platform.

        Shape

        Framework

        Angular

        Your PWA is built under the latest, stable version of Angular. Angular is a framework powered by Google. It supports PWA out of the box. It delivers app-like experiences in the web browser: high performance, offline, zero-step installation. Your PWA is compiled to generate a code highly optimized for today’s Javascript virtual machines. By combining Server Side Rendering for SEO purposes and Client Side Rendering for quick display, offline functionality, and fluidity, AppyNator provides you with a very comprehensive isomorphic PWA.

        Angular Material

        Your PWA is powered by the next-generation of Angular Material UI Framework. Every interaction you build follows a unified modern style. The interface is clear, consistent, and built to work seamlessly across mobile, tablet and desktop. Material Design is a visual language invented by Google.

        SEO

        URL slugs The distribution model of your PWA is the link and the slug is the exact URL of a webpage. You can customize each slug of your PWA, making the URL of important pages SEO friendly. Since every page of your PWA has a dedicated slug, deep linking is easily possible with your PWA.

        HTTPS

        Service workers can perform very powerful operation on the user’s browser. To ensure that this power is used for the good, it’s only possible to register a service worker on a page served over https. All your PWA’s pages are served over https by default. It guarantees that the service worker installed on the browser has not been tampered with. It also helps with your pages’ SEO.

        HTTP/2

        Your PWA is served over HTTP/2. The latest and most powerful version of the http protocol. HTTP/2 supports header compression, intelligent packet streaming management, query multiplexing and priority. It accelerates page download and reduces latency.

        Speed

        Optimized image compressor

        In order to minimize bandwidth consumption and reduce loading time, our engineers developed a dedicated algorithm to manage the compression of images. Each time you upload an image, several copies with different sizes are created. Each copy is compressed with our algorithm which has been coded to minimize quality loss. Copies are then used to deliver an image that is never larger than the version rendered on the user’s screen. It’s the best practice for improving the quality of your PWA and staying compliant with Lighthouse recommendations, by loading images fast and consuming less cellular data.

        CDN

        Each static asset of your PWA (Javascript code & images) is distributed over a content delivery network (CDN) using the HTTP/2 protocol. Anywhere in the world, your PWA will load quickly. Assets are located close to all of your end users. We rely on Stack Path global network. Assets are hosted in premium data centers with 10GB connections, located in 18 places all over the world.

        Manifest.json

        Your PWA is described by a JSON file called the Web App Manisfest. It contains the meta information needed to index your PWA in a store like the Windows store, and to install it onto your user’s device. The Web App Manifest is a specification established by the W3C.