What is the PWA
PWA (Progressive Web Apps) is a project launched by Google in 2015. It aims to provide websites with similar native app experience through Web Apps.
advantages
1. Install without client and with a small amount of traffic 2. Add to the home screen and run in full screen 3. Offline function, faster response, timely update 4.PUSH capability 5. Data transfer must be HTTPS
disadvantages
2.PUSH is not mature enough and relies on Web PUSH Protocol. Chrome only supports Google proprietary GCM (Google Cloud Messaging) /FCM service for notification PUSH. Domestic Mipush also supports many apps. We hope that a unified push service can appear in China as soon as possible
Personal view
PWA is highly recommended because it is non-invasive, demotion-compatible, and has powerful offline capabilities for faster response.
Network Application List
The list of web applications is a JSON file, which mainly defines some configuration information such as startup url, custom icon, startup screen, theme color, and startup style. This is on page M of the App, and the browsers used by Domestic Android users do not support these definitions, so it will not be introduced in detail. The official document of The Web App Manifest, The webpack-manifest-plugin plugin can also be used to generate the Web App manifest Generator if you use Webpack
Service workers
Definition: Service Workers essentially acts as a proxy server between Web applications and browsers, and can also act as a proxy between browsers and networks when the network is available. They are designed, among other things, to enable the creation of an effective offline experience, intercept network requests and take appropriate action based on whether the network is available and whether updated resources reside on the server. They also allow access to push notifications and background synchronization apis.
Life cycle: Register → download → Install → Activate
Installing, installed, waiting, activating, and activated
Install prepares sw for use, such as creating a cache and placing an offline resource activate. At this point, the fetch can clean up the old cache and related things in order to update the fetch response to the request event. Processing the install, activate event triggers the waitUntil method
Note: 1. The Service workers are running on other threads and are completely asynchronous. Use Promise extensively
Cache
Methods add(), addAll(), delete(), keys(), match(), matchAll()
Basic usage
Create a separate app.js file, put it in the root directory, and reference it app.js in index.html
if ('serviceWorker' in navigator) {
// register service worker
The navigator. ServiceWorker. Register ('/service - worker. Js', {scope: '/'}) / / parameter 1: register provides the script URL parameter 2: navigation match
.then(function(registration) {
// Registration succeeded
The object holds state and state change events for the lifetime of the sw and some parent interface methods
// The states are installing, installed, waiting, activating, and activated
if(registration.installing) {
console.log('Service worker installing');
} else if(registration.waiting) {
console.log('Service worker installed');
} else if(registration.active) {
console.log('Service worker active');
}
}).catch(function(error) {
// Failed to register
});
}
Copy the codeCreate an executable file service-worker.js service-worker.js in the root directory
// Cache static files
self.addEventListener('install', function(event) {
event.waitUntil(
// Cache the specified file
caches.open('v1').then(function(cache) {
return cache.addAll([
'/',
'/index.html',
'/style.css',
'/app.js',
'/image-list.js',
'/star-wars-logo.jpg',
]);
})
);
});
// Cache interface data
self.addEventListener('fetch', function(event) {
event.respondWith(caches.match(event.request).then(function(response) {
// The request was matched
if (response ! == undefined) {
return response;
} else {
return fetch(event.request).then(function (response) {
// Cache response data
let responseClone = response.clone();
caches.open('v1').then(function (cache) {
cache.put(event.request, responseClone);
});
return response;
}).catch(function () {
return caches.match('/gallery/myLittleVader.jpg');
});
}
}));
});
// Update the cache
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
// If there is an update
if (cacheName ! == 'v1') {
return caches.delete(cacheName);
}
})
);
})
.then(function(){
return self.clients.claim()
})
);
});
Copy the codeWebpack project to upgrade PWA
The sw-Precach-webpack-plugin plugin will help you solve all your problems. Now let’s update the scaffolding of the small Web page packaging optimization article
1. Modify files:
-
index.html
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('./service-worker.js');
});
}
</script>
Copy the code-
webpack.prod.config.js
var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
// add to the plugins array
new SWPrecacheWebpackPlugin({
cacheId: 'my-vue-app',
filename: 'service-worker.js',
minify: true,
// See the official documentation for more configurations
})
Copy the codeService-worker.js is automatically generated and configured
2. Package ~ based on normal logic
npm run build ZZSellerTip
Copy the code3. Start a local static server
To facilitate debugging, Service workers can also run in http://localhost or http://127.0.0.1 local environments. Packaged files can be run through static servers generated by HTTP-server.
Turn off http-Server and you can see that it is still accessible
Note: If your static files are placed on a CDN, the server must have CORS enabled, as fetch requests are not supported across domains
Therefore, even if the project transformation is completed, the overall transformation cost is very low, so let’s do it together
— — — — — — — — —
Long press the QR code to follow the big Zhuan FE
▼
