concept

Progressive Web applications

The characteristics of

  • Discoverable: Content can be discovered by search engines.
  • Installable, which can appear on the device’s home screen.
  • Linkable, you can simply share it with a URL.
  • Network Independent, which can run offline or with poor Internet speeds.
  • Progressive, which is still available on older browsers, is fully functional on newer browsers.
  • Re-engageable, which can send notifications whenever there is new content.
  • Responsive, it works on any device with a screen and browser — including mobile phones, tablets, laptops, TVS, refrigerators, etc.
  • Safe, the connection between you and your app is secure and prevents third parties from accessing your sensitive data.

advantage

  • Reduce application load time after installation thanks to Service Workers caching to save bandwidth and time.
  • When an update is available to the application, you can update only the part of the content that has changed. In contrast, even the tiniest change to a native app forces users to download the entire app again.
  • The look and feel is more integrated with native platforms — app ICONS are placed on the home screen, apps can run in full screen, and so on.
  • Keep connected with users through system notifications and push messages, so as to generate more attraction to users and improve conversion efficiency.

Technical support

service worker

Service Workers are virtual agents between the browser and the network. They run on a thread separate from our page’s JavaScript main thread and do not have any access to the DOM structure. They provide more than just offline functionality, including handling notifications, performing heavy computations on separate threads, and more. Service Workers are powerful because they can control network requests, modify network requests, return cached custom responses, or synthesize responses.

Web App Manifest

Push

navigator.serviceWorker.register('service-worker.js') .then(function(registration) { return Registration. PushManager. GetSubscription (). Then (async function (subscription) {/ / registered part}); }).then(function(subscription) {// subscription);Copy the code

Notifications

Send notifications after requesting authorization

Notification.requestPermission().then(function(result) { if(result === 'granted') { randomNotification(); }});Copy the code

Request has three values: default (not selected), granted (granted), and denied (denied). Once agreed, it is valid for sending notifications and pushing messages

new Notification(notifTitle, options);
Copy the code

Add to Home Screen

App shell

Streams API

The sample project

js13kGames A-Frame entries

Reference:

PWA introduce MDN